ブログにちょっとしたアイコン入れると、見た目も整うし、テンションもちょっと上がる。
そんなときに便利なのがFont Awesome（ふぉんと・おーさむ）。
でも、SWELLでの使い方がわからない。筆者もその一人でした。
この記事では同じような悩みを持った方に向けてメモを残しておきます。
まずは結論から、
SWELLでFont Awesomeを使いたいなら、
Font Awesomeの読み込み設定を「CSSで読み込む」に設定する。
これでOKです。
あとは使いたい場所に、アイコンのHTMLコードを貼るだけ。
この記事でわかること
- SWELLでFont Awesomeを有効化する手順（CSSで読み込む設定）
- アイコンを表示させるためのHTMLコードの貼り方
- 表示されないときに確認すべきチェックポイント
目次
SWELLでFont Awesomeを使う設定方法
Font Awesomeの読み込み → 「CSSで読み込む」に変更するだけ
まずは設定から。
STEP
WordPressのダッシュボードへ
STEP
「SWELL設定」へ
STEP
「Font Awesome」タブ→Font Awesome読み込みを「CSSで読み込む」に変更
これだけです。
Font Awesomeの使い方｜SWELL
HTMLコードを貼れば、アイコンが表示される
たとえば、「ユーザー（人）のアイコン」を使いたい場合はこう。
Font Awesomeのホームページから、HTMLを取得し、使いたい箇所に貼り付ければOK
記事内で使いたい場合
「カスタムHTMLブロック」内に記述すれば表示されます。
↓これが
↓こうなる
実はこんな場所にも使える
ブログのトップページを少しおしゃれにしたい時、ありますよね。
そんな時にも使えちゃいます。
例えば、フッターメニューやカテゴリメニュー。
- 「外観」→「メニュー」から
- ナビゲーションラベルに直接HTMLを貼り付けると
- ブログのカテゴリメニューにアイコンが表示できます
フッターメニューも同様です。こういう細かい部分を簡単に装飾できるの、地味に嬉しいですよね。
表示されないときのチェックポイント
「CSSで読み込んでるのに表示されない…」
そんなときは以下をチェック。
- 読み込み設定がちゃんと「CSS」になっているか（再確認！）
<i>タグのclass名にミスがないか（fa-が抜けてないか）- Font Awesomeのバージョンに対応したコードを使っているか
なお、ブログテーマやプラグインによっては、Font Awesomeの読み込みが干渉してエラーになることも。
その場合は一度他のプラグインを停止して検証するのも手です。
おわりに｜SWELLなら、設定さえすればOK
というわけで、
- 「CSSで読み込む」にチェック
- HTMLコードを貼る
この2ステップだけで、SWELLでもFont Awesomeが使えます。
変に悩む前に、設定見直してサクッと使っていきましょう。
