いまどきのウェブサイトやアプリなどに使われているアイコンフォント「Font Awesome」。さまざまなウェブサービスなどのアイコンやピクトグラムを収録していること、そしてHTMLやCSSで手軽に使えることから、ウェブの表現を豊かにするために広く活用されています。
茨木広告宣伝舎の制作するウェブサイト(ホームページ)でも、SNSのリンクを表示する際に使ったり、見出しにつけるアイコンとして使ったりしています。
たとえばYouTubeならこんなシンプルなHTMLで表現できます。
<i class="fab fa-youtube"></i>
上記のHTMLで表示したYouTubeのフォントアイコン
タイムリーなところでは、covid-19関連で(head-side-mask)なるアイコンや、(hand-wash)というアイコンもあります。
CSSを使えば、大きさや色、傾きなども表現できます。
Font Awesomeは、ウェブフォントなので自分のサーバーなどのフォントをインストールしなくても使えるのですが、Font AwesomeのCDNからスタイルシートを読み込む必要があります。
WordPressの場合、スタイルシートの読み込みのタグをテーマのheader.phpなどに組み込むのですが、子テーマを利用していない場合などは、テーマのアップデートで上書きされて、スタイルシートの読み込みが無効になってしまうことがあります。
するとFont Awesomeのアイコンフォントがすべて「TOFU(豆腐)」とも言われる四角(□)に置き換わってしまいます。
先日もそんな事故があったので、ふと思いついてFont AwesomeをHTMLを記述するだけで表示できるプラグインを探してみました。
するとFont Awesome謹製のプラグインがあるではありませんか!その名も「Font Awesome」。
ためしにスタイルシートの読み込みを設定していないWordPressサイトにこのプラグインをインストールして、HTMLだけでFont Awesomeアイコンフォントを表示できるか試しました。
もちろんきちんと表示できました。
ということで、今後は「Font Awesome」も、個人的MIP(マスト・インストール・プラグイン)になりました。