PR AFFINGER6

【AFFINGER6】 FontAwesome5でアイコンを表示する方法【アフィンガー6】

他テーマからAFFINGER6に移行したけど、アイコンが表示されない、、、FontAwesomeはどうやって表示できるのかな？

このような疑問に、AFFINGER6・FontAwesome5愛用者のぼくが答えます。

結論として、AFFINGER6でFontAwesome5のアイコンを表示するには設定が必要です。

本記事では、FontAwesome5を表示させる設定について解説します。

この記事を読んだら、アイコンでAFFINGER6のデザインをおしゃれにしましょう(｀･ω･´)ゞ

AFFINGER6（アフィンガー6）でFontAwesome5を表示する手順

AFFINGER6でFontAwesome5のアイコンを表示する手順は、下記の3つです。

  • ①：FontAwesomeに登録
  • ②：コードを貼り付ける
  • ③：アイコンを表示する

それでは、順番に解説します。

なお、FontAwesome4.7は管理画面の「“AFFINGER 管理“→“その他”→“FontAwesome4.7の読み込みをチェック”」で設定できます。

手順①：FontAwesomeに登録

まず、FontAwesomeの公式サイトを開きましょう。

参考：Font Awesome

左側の「Start for Free」をクリックして無料登録します。

Font Awesome

そして、メールアドレスを入力して「Send Kit Code」でメールを送信します。

Send Kit Code

メールが送られたら、「Click to Confirm Your Email Address + Set Thigs Up」をクリックしてアカウントの設定をしましょう。

パスワードの入力画面が開くので、入力したら「Set Password & Continue」をクリックして続行します。

パスワード

他のアカウント情報の入力欄が表示されますが、「No thanks….」からスキップしてOK。

手順②：CDNコードを貼り付ける

次に、”Kit Code”が表示されるのでコピーしましょう。

Kit code

もう一度、表示したいときは「”ユーザーアイコン”→”Kits”」から確認できます。

Your kits

”Kit Code”をコピーしたら、WordPress管理画面の「”AFFINGER 管理”→”その他”→”headに出力するコード”」に貼り付けましょう。

コード出力

ちなみに、「”外観”→”テーマエディタ”」の親テーマに貼り付けてもOKですが、AFFINGER6のアップデート時に削除されるかもしれません。

手順③：アイコンを表示する

それでは、記事内にアイコンを貼り付けましょう。（メニューに表示したい方はこちら）

まず、FontAwesomeの公式サイトを開き、アイコンを英語で検索しましょう。

参考：Font Awesome

Fontawesome home

次に、アイコンをクリックしてHTMLをコピーしましょう。

クリックする

そして、Gutenbergで「カスタムHTML」を追加し、貼り付けましょう。

カスタムHTML

これで、記事内に表示することができます。

AFFINGER6（アフィンガー6）でのFontAwesome5の補足

次に、FontAwesome5でアイコンを表示するときの補足情報を紹介します。

  • ①：メニューに表示する方法
  • ②：アイコンをカスタマイズする方法
  • ③：アイコンが表示されないときの対処法

それでは、この3つを順番に解説します。

補足①：メニューに表示する方法

AFFINGER6には下記の画像のようなメニューがあります。

メニュー

ここにアイコンを表示するには、「”外観”→“メニュー”」からアイコンを表示したい項目にHTMLを貼り付ければOK

メニュー

これで、アイコンが表示されるはずです。
文字とHTMLの間に半角スペースを入れるとイイ感じのデザインになりますよ。

補足②：アイコンをカスタマイズする方法

FontAwesome5では、HTMLを編集すれば下記のようなカスタマイズができます。

  • アニメーション
  • 色
  • 大きさ
  • 角度
  • 反転

例えば、アニメーション付きでアイコンを表示すると以下のようになります。

個人的には、ページ表示速度が低下するのでオススメはできませんが、おしゃれなサイトにしたい方にはいいかもです。

なお、その他のカスタマイズ方法はサルワカさんの記事が参考になりますよ。

参考：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

補足③：アイコンが表示されないときの対処法

もし、FontAwesome5のアイコンが表示されないときは下記の3つをチェックしてください。

  • CDNコードを違うところに貼る
  • 有料アイコンを使っている
  • AFFINGER6が最新版ではない

まず、CDNコードを「head内の出力するコード」に入力しても表示されなければ「”外観”→”テーマエディタ”→”テーマヘッダー”」に貼り付けましょう。

また、AFFINGER5ではFontAwesome5に対応してないのでAFFINGER6の最新版にしてください。

アイコンが表示されなければ、下記の記事を参考にしてみてください。

参考：【最新】FontAwesomeのアイコンが表示されないときの対処法 | Solabo-あきらめない雑記-

というわけで、今回はここまでです。

幸せなAFFINGERライフをお楽しみくださいd(￣ ￣)

【10分で完了】AFFINGER6の初期設定を7つ解説【アフィンガー6】

続きを見る

-AFFINGER6