![](https://takechiyo79.com/wp-content/uploads/2022/12/11829_color.png)
AFFINGER6でFont Awesomeのアイコンを使いたいんだけど、設定方法を教えてほしい。
元々AFFINGER6でFont Awesomeのアイコンを使ってたんだけど、アイコンが表示されなくなっちゃった。。
こんなお悩みを解決します!
本記事はこんな方向け
- Font Awesomeの登録方法を知りたい
- AFFINGER6でFont Awesomeのアイコンを使いたい
- 元々AFFINGER6でFont Awesomeのアイコンを使ってたのに、アイコンが表示されなくなった
\当ブログテーマ/
もくじ
そもそもFont Awesomeとは?
![そもそもFont Awesomeとは?](https://takechiyo79.com/wp-content/uploads/2023/03/Font-Awesome-1.png)
Font Awesomeとは、Webサイトでアイコンのコードを取得することができるサービスです。
有料版もありますが、無料版でも1000種類以上のアイコンがあります。
![アイコンの例](https://takechiyo79.com/wp-content/uploads/2023/03/アイコンの例-1.png)
【無料版】Font Awesomeのアカウント作成方法
![【無料版】Font Awesomeのアカウント作成方法](https://takechiyo79.com/wp-content/uploads/2023/03/cherries-5706738_1920-1-2.png)
Font Awesomeはアカウントを作成しないと使えないので、まずはアカウントを作成しましょう。
今回は無料版のFont Awesomeのアカウント作成方法を解説します。
▼ここから手順
まずはFont Awesomeの公式ページにアクセスしましょう。
アクセスができたら、「Start for Free」をクリックします。
![Start for Freeクリック](https://takechiyo79.com/wp-content/uploads/2023/03/公式ページ-1.png)
続いて、下記赤枠①にメールアドレスを入力し、「Send Kit Code」をクリックします。
![メールアドレス送信](https://takechiyo79.com/wp-content/uploads/2023/03/メールアドレス送信-1.png)
すると入力したアドレス宛に以下のようなメールが届くので、「Confirm Your Email Address」をクリックします。
![Font Awesomeから届くメール](https://takechiyo79.com/wp-content/uploads/2023/03/confirm-your-adoress-1.png)
以下の画面でパスワードを入力し、「Send Password &Continue」をクリックします。
![パスワード設定](https://takechiyo79.com/wp-content/uploads/2023/03/パスワード設定-1-1.png)
以下の画面に遷移するので、以下のような操作でアカウント作成を完了させましょう。
①:必須(名前を入力)
②:必須(苗字を入力)
③④:空欄でOK
![アカウント登録完了](https://takechiyo79.com/wp-content/uploads/2023/03/スタート-1-1.png)
これでアカウント作成は完了です!
AFFINGER6とFont Awesome6を連携する
![AFFINGER6とFont Awesome6を連携する](https://takechiyo79.com/wp-content/uploads/2023/03/team-4541278_1920-1.png)
それではAFFINGER6とFont Awesome6を連携して使えるようにしていきましょう。
まず、Font Awesomeにログインができていない方はこちらからアクセスしましょう。
ホーム画面にて、「Your Kits」をクリックします。
![Font Awesomeホーム画面](https://takechiyo79.com/wp-content/uploads/2023/03/kits画面へ.png)
続いて、以下の赤枠の部分をクリックします。
![Kits画面へ](https://takechiyo79.com/wp-content/uploads/2023/03/kits画面へ②.png)
以下の画面で赤枠の部分をクリックし、kitsコードをコピーしましょう。
![kitsコード](https://takechiyo79.com/wp-content/uploads/2023/03/これがkidsコード-1.png)
kitsコードをコピーしたら、WordPress管理画面に張り付けていきます。
WordPress管理画面で、
「AFFINGER管理」→「その他」
をクリックします。
![「AFFINGER管理」→「その他」の手順画像](https://takechiyo79.com/wp-content/uploads/2023/03/AFFINGER管理→その他.png)
上級者向け項目で以下の操作を行いましょう。
①:「headに出力するコード」に、先ほどコピーしたkitsコードを貼り付け
②:「Save」クリック
![AFFINEGER6との連携完了](https://takechiyo79.com/wp-content/uploads/2023/03/kitsコード貼り付け→Save-1-1.png)
▼『閲覧できません(Forbidden access)』というエラーが出た時
Font Awesomeアイコンの使い方
![Font Awesomeアイコンの使い方](https://takechiyo79.com/wp-content/uploads/2023/03/icons-645335_1280-1.png)
最後にFont Awesomeの使い方を解説していきます。
まずはFont Awesomeのホーム画面で検索アイコンをクリックします。
![Font Awesomeホーム画面](https://takechiyo79.com/wp-content/uploads/2023/03/検索-2.png)
アイコンの一覧が表示されるので、任意のアイコンをクリックします。
![アイコン一覧](https://takechiyo79.com/wp-content/uploads/2023/03/2023-03-25-1-1.png)
HTMLになっていることを確認し、アイコンコードをクリックしてコピーしましょう。
![アイコンのコードコピー](https://takechiyo79.com/wp-content/uploads/2023/03/アイコンコードコピー-1.png)
ここからは、
- 投稿の中で使う方法
- スマホフッターメニューで使う方法
の2通りの方法を解説します。
投稿の中でFont Awesomeのアイコンを使う方法
前提
前提として、2023年3月現在、Font Awesomeのバージョンが「6.0.0」だと投稿画面でのアイコン使用ができない状態です。
そのため、投稿にFont Awesomeのアイコンを挿入したい場合はバージョン5.15.4のアイコンを使用しましょう。
バージョンの切り替えは以下の画像を参考にしてください。
![バージョンの切り替え](https://takechiyo79.com/wp-content/uploads/2023/03/バージョン切り替え-1.png)
今回は「STINGER: マイボックス」でFont Awesomeのアイコンを使う方法を解説します。
まずはWordPress管理画面で投稿画面を開きましょう。
「STINGER: マイボックス」を表示させたら、「アイコンクラス」に先ほどコピーしたアイコンコードを張り付けます。
アイコンコードを張り付けたら、「””」で囲まれた部分以外は削除します。
![アイコンクラス変更](https://takechiyo79.com/wp-content/uploads/2023/03/アイコンクラス変更-1-1.png)
以下のコードを例にすると、マーカー以外の部分だけ残す感じです。
<i class="fas fa-home"></i>
↓
fas fa-home
![アイコンクラスに入力](https://takechiyo79.com/wp-content/uploads/2023/03/アイコン表示-1.png)
これで投稿画面にFont Awesomeのアイコンを表示させることができます。
スマホフッターメニューでFont Awesomeのアイコンを使う
![スマホフッターメニュー例](https://takechiyo79.com/wp-content/uploads/2023/03/スマホフッターメニュー例-1-3.png)
上記のようにスマホフッターメニューにFont Awesomeのアイコンを表示させることもできます。
表示方法は以下の記事の中で紹介しているのでぜひ参照ください。
近日公開予定:スマホフッターメニューにFont Awesomeのアイコンを表示させる方法
まとめ:Font Awesomeのアイコンを使ってブログをおしゃれに装飾しよう
![まとめ:Font Awesomeのアイコンを使ってブログをおしゃれに装飾しよう](https://takechiyo79.com/wp-content/uploads/2023/03/increase-4432670_1920-1.jpg)
AFFINEGER6とFont Awesomeを連携すれば、より一層おしゃれなブログを作ることができます。
本記事を参考にぜひFont Awesomeのアイコンを活用していきましょう。
まだAFFINEGER6を導入していない方はこちらかどうぞ!