SWELLで「Font Awesome」のアイコンを使う方法

「Font Awesome」とは以下のようなアイコンですね。以前は画像をわざわざ用意していましたが、「Font Awesome」が利用できるので、とても楽になりました(*^^*)

↓「Font Awesome」公式サイト

あわせて読みたい

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設定」をクリック。

上部タブの「Font Awesome」をクリック。「Font Awesomeの読み込み」から 「CSSで読み込む」を選択。
その後、「変更を保存」をクリックしましょう。

「Font Awesome」使用方法

まずは以下から使いたいアイコンを探しましょう。

あわせて読みたい

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.

各リンク先をクリックしてみてください。いろいろなアイコンが確認できます。

好きなアイコンをクリックします。

<i から始まるコードの class=”fa-sharp fa-solid fa-phone” をコピーしておきましょう。

後は以下のようにすればOKです。

[icon class="fa-sharp fa-solid fa-phone"]

　見出しの前に電話アイコンが表示されています。

あわせて読みたい

キャプションボックスの使い方 今回はキャプションボックスの使い方です。コンテンツをキャプション付きで見やすくするためのブロックのことです。「見出し＋説明文で構成する時に少し目立たせたいな...