![](https://coin-blog.net/wp-content/uploads/2022/03/img13-150x150.png)
SWELLで「Font Awesome」のアイコンを使うにはどうすればいい?
このような悩みを解決します。
SWELLでFont Awesomeを使うには、CSSファイルを読み込ませればOK
「カスタマイザー」>「SWELL設定」>「Font Awesome」
まずFont Awesomeについて解説し、次に「設定方法」や「使い方」を紹介。
この記事を読めば、SWELLでFont Awesomeのアイコンを使えるようになりますよ!
SWELLのレビューはこちら
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
\国内人気No.1/
Font Awesomeとは
![Font Awesome](https://coin-blog.net/wp-content/uploads/2024/04/img7873.png)
![Font Awesome](https://coin-blog.net/wp-content/uploads/2024/04/img7873.png)
Font Awesomeとは、アイコンフォントの素材サイト。
アイコンのクラス名をコピペするだけで、サイト内にかんたんにアイコンが貼れます。
1,000種類以上のアイコンを無料で利用可能です。
有料の「Proプラン(99ドル/年)」は利用できるアイコン数が増えるので、お好みでご利用ください。
【SWELL版】Font Awesomeの設定方法
それでは、SWELLで「Font Awesome」の設定をしましょう。
![SWELL設定](https://coin-blog.net/wp-content/uploads/2024/04/img7874.png)
![SWELL設定](https://coin-blog.net/wp-content/uploads/2024/04/img7874.png)
「ダッシュボード」>「SWELL設定」
![SWELLの「Font Awesome」設定画面](https://coin-blog.net/wp-content/uploads/2024/04/img7875.png)
![SWELLの「Font Awesome」設定画面](https://coin-blog.net/wp-content/uploads/2024/04/img7875.png)
「Font Awesome」>「CSSで読み込む」>「変更を保存」
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
バージョンは「v6」のままでOK
【SWELL版】Font Awesomeの使い方
続いて、Font Awesomeの使い方を解説します。
Font Awesome公式サイトを開いたら、以下の手順にお進みください。
![Font Awesomeアイコン一覧](https://coin-blog.net/wp-content/uploads/2024/04/img7876.png)
![Font Awesomeアイコン一覧](https://coin-blog.net/wp-content/uploads/2024/04/img7876.png)
記事に貼り付けるアイコンを選択します。
![Font Awesome「コーヒーアイコン」](https://coin-blog.net/wp-content/uploads/2024/04/img7878.png)
![Font Awesome「コーヒーアイコン」](https://coin-blog.net/wp-content/uploads/2024/04/img7878.png)
<i class="fa-solid fa-mug-hot"></i>
をコピーし、どこかに貼り付けておきましょう。
![Font Awesomeのコード](https://coin-blog.net/wp-content/uploads/2024/04/img7879.png)
![Font Awesomeのコード](https://coin-blog.net/wp-content/uploads/2024/04/img7879.png)
先ほどコピーしたコードを[]内に貼り付け、「icon class=”fa-solid fa-mug-hot”」と整えれば完了です。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
テーブルや見出しなど、あらゆるところで使える
まとめ|【SWELL版】Font Awesomeの設定方法
今回はSWELLで「Font Awesome」を使う方法をまとめました。
最後がややこしいですが、何度か利用しているうちに慣れます。
「ほかの人とは違うアイコンを使いたい」という方はぜひご利用ください。
それでは、楽しいブログライフを!
\国内人気No.1/
あわせて読みたい