[PC・ネット] Font Awesome 5 へのアップグレード : してログ

[PC・ネット] Font Awesome 5 へのアップグレード

Font Awesome がメジャーバージョンアップしていたので、当サイトも Font Awesome 4 → 5 へ上げてみました。単に CSS の入れ替えだけではダメだったので、アップグレードのポイントを整理しておきます。

変更要点

  • 導入は on-server を配置し、fontawesome-all.min.css を読み込めば OK です
  • アイコンは系列クラスに分けられて、ソリッド系("fas" 塗りつぶしスタイル)、レギュラー系("far" 線画系)、ブランド系("fab" 各種サービスロゴ)、そしてプロ版のライト系("fal" 細い線画系)があります
  • Font Awesome 4 の "fa" クラスはソリッド系 "fas" に互換割り当てされているようです(従って、アイコン名が変更されているものを除き、後ろに "-o" が付かないものは変更なしで表示されます)
  • Font Awesome 4 でアイコン名の後ろが "-o" になっているものは、Font Awesome 5 ではレキュラー系列 "far" に変更します(例:"fa newspaper-o" → "far newspaper")
  • それでも表示されないものは、アイコン名が変更されているので個別に調べて変更します

ソリッド系(fas)

レギュラー系(far)

ブランド系(fab)

Font Awesome の利点と課題

Font Awesome は 4 の頃から使っていますが、アイコンに関してほぼ困ることが無くなりました。ウェブ制作のみに限らず、開発における様々なシーンで適用可能で、アイコン制作にかける時間はかなり短縮できています。特にウェブシステム開発では、アイコン画像を無くすことができ、サイズ変更も容易なためメンテナンス性の向上は計り知れません。

いっぽう少なからず課題もあります。まず、日本でメジャーなブランド系、規格などの日本にマッチしたアイコンの不足です。個人的に欲しいと思ったのは、オリヅル、サクラ、モミジ、オニギリ、熨斗、日本列島、などです。系列を拡張できるなら、ジャパン系 "faj" とか作ったらいいかも知れません。

もう一点は、小さめのアイコンの系列です。リストのリーダとして利用する場合、標準のサイズでは大きいと思います。アイコンサイズを "fa-xs" などで小さくできるのは知っていますが、真ん中に来ないし位置合わせ等気にするのが嫌ですね。文字と同じサイズ指定で小さめのアイコンがあれば、もっと使い易くなると思います。

また、丸付き数字や四角付き数字はベタで30ぐらいまで欲しいかなと思います。これらは一個も無いので、シェイプ系のベースアイコンと他のアイコンや文字を組み合わせたいのだと思います。しかし、サクッと使いたい場面が結構あり、組み合わせるのに神経を使うのでは意味が無いです。

追記

アイコンの組み合わせですが、前あった fa-stack が効かないので調べたら fa-layers + JavaScript になったっぽい。そもそも Font-Awesome 5 自体が SVG + JavaScript を推奨してるようなので、<i> は互換性のため基本的な部分を残しているのかも知れません。

この fa-stack や fa-layers は自由な半面コードを複雑にするだけだと思うんですよね。もう少し使い方を制限してもいいので、簡潔な書き方で利用できるようになるといいですね。

0 件のコメント
名前:
コメント: