![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
今日はフォントアイコンを使う方法ですね。
文字だけよりアイコンがあった方が愛着も湧きますし、見やすくなるので、オススメです。
「Font Awesome」とは以下のようなアイコンですね。以前は画像をわざわざ用意していましたが、「Font Awesome」が利用できるので、とても楽になりました(*^^*)
![](https://shares-hp.com/wp-content/uploads/2022/11/3.png)
![](https://shares-hp.com/wp-content/uploads/2022/11/3.png)
↓「Font Awesome」公式サイト
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://img.fortawesome.com/1ce05b4b/open-graph-general.png)
![](https://img.fortawesome.com/1ce05b4b/open-graph-general.png)
![](https://img.fortawesome.com/1ce05b4b/open-graph-general.png)
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
目次
SWELLで「Font Awesome」のアイコンを使う方法
SWELL設定から読み込ませる
![左のメニューの「SWELL設定」をクリック。](https://shares-hp.com/wp-content/uploads/2022/11/1-4.jpg)
![左のメニューの「SWELL設定」をクリック。](https://shares-hp.com/wp-content/uploads/2022/11/1-4.jpg)
![上部タブの「Font Awesome」をクリック。「Font Awesomeの読み込み」から 「CSSで読み込む」を選択。
その後、「変更を保存」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/2-4.jpg)
![上部タブの「Font Awesome」をクリック。「Font Awesomeの読み込み」から 「CSSで読み込む」を選択。
その後、「変更を保存」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/2-4.jpg)
その後、「変更を保存」をクリックしましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/a-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/a-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/a-150x150.jpg)
これだけで「Font Awesome」が使えるようになります。
「Font Awesome」使用方法
まずは以下から使いたいアイコンを探しましょう。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://img.fortawesome.com/1ce05b4b/open-graph-icons.png)
![](https://img.fortawesome.com/1ce05b4b/open-graph-icons.png)
![](https://img.fortawesome.com/1ce05b4b/open-graph-icons.png)
Find Icons with the Perfect Look & Feel | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.
![](https://shares-hp.com/wp-content/uploads/2022/11/4-3-1024x502.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/4-3-1024x502.jpg)
![好きなアイコンをクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/1-5-1024x516.jpg)
![好きなアイコンをクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/1-5-1024x516.jpg)
![<i から始まるコードの class="fa-sharp fa-solid fa-phone" をコピーしておきましょう。](https://shares-hp.com/wp-content/uploads/2022/11/2-5-1024x632.jpg)
![<i から始まるコードの class="fa-sharp fa-solid fa-phone" をコピーしておきましょう。](https://shares-hp.com/wp-content/uploads/2022/11/2-5-1024x632.jpg)
後は以下のようにすればOKです。
[icon class="fa-sharp fa-solid fa-phone"]
見出しの前に電話アイコンが表示されています。
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
ちょっと最後が難しいですが、使いだすと面白いですよ^^
キャプションボックスとかはデフォルトで簡単に使えるので、以下も合わせて確認してみてください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-17-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-17-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-17-300x158.jpg)
キャプションボックスの使い方
今回はキャプションボックスの使い方です。コンテンツをキャプション付きで見やすくするためのブロックのことです。「見出し+説明文で構成する時に少し目立たせたいな...