いまどきのウェブサイトやアプリなどに使われているアイコンフォント「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(マスト・インストール・プラグイン)になりました。

ウェブの表現が広がるアイコンフォント「Font Awesome」がWordPressで使いやすくなるプラグイン

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください


Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Yahoo!ショッピング制作(申込~開店フルサポート)88,000円から
独自ドメインのインターネット通販サイト構築(運用支援オプションあり)88,000円から
スマホ対応のウェブサイト制作(ホームページ制作)33,000円から