【SWELL版】Font Awesomeの設定方法

記事内にプロモーションを含む場合があります
【SWELL版】Font Awesomeの設定方法
初心者さん

SWELLで「Font Awesome」のアイコンを使うにはどうすればいい?

このような悩みを解決します。

SWELLでFont Awesomeを使うには、CSSファイルを読み込ませればOK

「カスタマイザー」>「SWELL設定」>「Font Awesome」

まずFont Awesomeについて解説し、次に「設定方法」や「使い方」を紹介。

この記事を読めば、SWELLでFont Awesomeのアイコンを使えるようになりますよ!

SWELLのレビューはこちら

プロフィールカード

\国内人気No.1/

目次

Font Awesomeとは

Font Awesome
出典:Font Awesome

Font Awesomeとは、アイコンフォントの素材サイト。

アイコンのクラス名をコピペするだけで、サイト内にかんたんにアイコンが貼れます。

1,000種類以上のアイコンを無料で利用可能です。

有料の「Proプラン(99ドル/年)」は利用できるアイコン数が増えるので、お好みでご利用ください。

【SWELL版】Font Awesomeの設定方法

それでは、SWELLで「Font Awesome」の設定をしましょう。

STEP
SWELL設定
SWELL設定

「ダッシュボード」>「SWELL設定」

STEP
Font Awesomeの設定
SWELLの「Font Awesome」設定画面

「Font Awesome」>「CSSで読み込む」>「変更を保存」

エイタ

バージョンは「v6」のままでOK

【SWELL版】Font Awesomeの使い方

続いて、Font Awesomeの使い方を解説します。

Font Awesome公式サイトを開いたら、以下の手順にお進みください。

STEP
アイコンを選択
Font Awesomeアイコン一覧

記事に貼り付けるアイコンを選択します。

STEP
HTMLコードをコピー
Font Awesome「コーヒーアイコン」

<i class="fa-solid fa-mug-hot"></i>をコピーし、どこかに貼り付けておきましょう。

STEP
HTMLコードの作成
Font Awesomeのコード
エディターではこう表示されます

先ほどコピーしたコードを[]内に貼り付け、「icon class=”fa-solid fa-mug-hot”」と整えれば完了です。

エイタ

テーブルや見出しなど、あらゆるところで使える

まとめ|【SWELL版】Font Awesomeの設定方法

今回はSWELLで「Font Awesome」を使う方法をまとめました。

最後がややこしいですが、何度か利用しているうちに慣れます。

「ほかの人とは違うアイコンを使いたい」という方はぜひご利用ください。

それでは、楽しいブログライフを!

\国内人気No.1/

あわせて読みたい

【SWELL版】Font Awesomeの設定方法

この記事が気に入ったら
フォローしてね!

よかったらシェア!
  • URLをコピーしました!
目次