
AFFINGER6でFont Awesomeのアイコンを使いたいんだけど、設定方法を教えてほしい。
元々AFFINGER6でFont Awesomeのアイコンを使ってたんだけど、アイコンが表示されなくなっちゃった。。
こんなお悩みを解決します!
本記事はこんな方向け
- Font Awesomeの登録方法を知りたい
- AFFINGER6でFont Awesomeのアイコンを使いたい
- 元々AFFINGER6でFont Awesomeのアイコンを使ってたのに、アイコンが表示されなくなった
\当ブログテーマ/
もくじ
そもそもFont Awesomeとは?

Font Awesomeとは、Webサイトでアイコンのコードを取得することができるサービスです。
有料版もありますが、無料版でも1000種類以上のアイコンがあります。

【無料版】Font Awesomeのアカウント作成方法

Font Awesomeはアカウントを作成しないと使えないので、まずはアカウントを作成しましょう。
今回は無料版のFont Awesomeのアカウント作成方法を解説します。
▼ここから手順
まずはFont Awesomeの公式ページにアクセスしましょう。
アクセスができたら、「Start for Free」をクリックします。

続いて、下記赤枠①にメールアドレスを入力し、「Send Kit Code」をクリックします。

すると入力したアドレス宛に以下のようなメールが届くので、「Confirm Your Email Address」をクリックします。

以下の画面でパスワードを入力し、「Send Password &Continue」をクリックします。

以下の画面に遷移するので、以下のような操作でアカウント作成を完了させましょう。
①:必須(名前を入力)
②:必須(苗字を入力)
③④:空欄でOK

これでアカウント作成は完了です!
AFFINGER6とFont Awesome6を連携する

それではAFFINGER6とFont Awesome6を連携して使えるようにしていきましょう。
まず、Font Awesomeにログインができていない方はこちらからアクセスしましょう。
ホーム画面にて、「Your Kits」をクリックします。

続いて、以下の赤枠の部分をクリックします。

以下の画面で赤枠の部分をクリックし、kitsコードをコピーしましょう。

kitsコードをコピーしたら、WordPress管理画面に張り付けていきます。
WordPress管理画面で、
「AFFINGER管理」→「その他」
をクリックします。

上級者向け項目で以下の操作を行いましょう。
①:「headに出力するコード」に、先ほどコピーしたkitsコードを貼り付け
②:「Save」クリック

▼『閲覧できません(Forbidden access)』というエラーが出た時
Font Awesomeアイコンの使い方

最後にFont Awesomeの使い方を解説していきます。
まずはFont Awesomeのホーム画面で検索アイコンをクリックします。

アイコンの一覧が表示されるので、任意のアイコンをクリックします。

HTMLになっていることを確認し、アイコンコードをクリックしてコピーしましょう。

ここからは、
- 投稿の中で使う方法
- スマホフッターメニューで使う方法
の2通りの方法を解説します。
投稿の中でFont Awesomeのアイコンを使う方法
前提
前提として、2023年3月現在、Font Awesomeのバージョンが「6.0.0」だと投稿画面でのアイコン使用ができない状態です。
そのため、投稿にFont Awesomeのアイコンを挿入したい場合はバージョン5.15.4のアイコンを使用しましょう。
バージョンの切り替えは以下の画像を参考にしてください。

今回は「STINGER: マイボックス」でFont Awesomeのアイコンを使う方法を解説します。
まずはWordPress管理画面で投稿画面を開きましょう。
「STINGER: マイボックス」を表示させたら、「アイコンクラス」に先ほどコピーしたアイコンコードを張り付けます。
アイコンコードを張り付けたら、「””」で囲まれた部分以外は削除します。

以下のコードを例にすると、マーカー以外の部分だけ残す感じです。
<i class="fas fa-home"></i>
↓
fas fa-home

これで投稿画面にFont Awesomeのアイコンを表示させることができます。
スマホフッターメニューでFont Awesomeのアイコンを使う

上記のようにスマホフッターメニューにFont Awesomeのアイコンを表示させることもできます。
表示方法は以下の記事の中で紹介しているのでぜひ参照ください。
近日公開予定:スマホフッターメニューにFont Awesomeのアイコンを表示させる方法
まとめ:Font Awesomeのアイコンを使ってブログをおしゃれに装飾しよう

AFFINEGER6とFont Awesomeを連携すれば、より一層おしゃれなブログを作ることができます。
本記事を参考にぜひFont Awesomeのアイコンを活用していきましょう。
まだAFFINEGER6を導入していない方はこちらかどうぞ!