Font Awesomeの色・サイズをHTMLで指定する方法(コード・ショートコード)

WordPress
スポンサーリンク

Font Awesomeのサイズを、CSSを使わず、編集画面上のHTMLのみで指定する方法です。

Font Awesomeの追加

公式サイトからコードをコピペして追加する場合

コードをコピーして、テキストエディターに貼り付け。

<i class="fas fa-paper-plane"></i>

ショートコードで追加する場合

ショートコードを使用するには、あらかじめ「Font Awesome」のプラグインを導入し、有効化させておく必要があります。

一覧のなかのアイコンを選択(クリック)して挿入。

[icon name="paper-plane" prefix="fas"]

上の[ ]の記号は本来ならば半角です。

挿入されたアイコン(紙飛行機)

編集画面ではアイコンは表示されない(ショートコードで表示される)ので、プレビューか投稿後の画面で、表示状態を確認します。
スポンサーリンク

色を指定する

Font Awesomeのコードに「style=”color: blue;”」のカラー属性を追記します。
※「blue」(青色)の部分は任意の色の名前。

公式のコードの場合

<i class="fas fa-paper-plane" style="color: blue;"></i>

ショートコードの場合

[icon name="paper-plane" prefix="fas" style="color: blue;"]

上の[ ]の記号は本来ならば半角です。

アイコンが指定した色(青色)になります。

HTMLで色を指定する場合、「#○○○」などの番号を使うことはできません。
色は「blue」「red」「yellow」などの名前で指定します。
下のサイトから名前は確認することができますが、Font Awesomeでは使える色と使えない色があるようです。

サイズを大きくする

Font Awesomeのコードに「fa-lg」などのサイズ属性を追記します。

「fa-lg」(少しだけ大きく)、「fa-2x」(2倍)、「fa-3x」(3倍) など。

公式のコードの場合

<i class="fas fa-paper-plane fa-lg"></i>

ショートコードの場合

[icon name="paper-plane" prefix="fas fa-lg"]

上の[ ]の記号は本来ならば半角です。

アイコンが指定したサイズに(少し大きく)なります。

動きをつける(回転)

「fa-spin」を追記すれば、アイコンに回転の動きをさせることができます。

公式のコードの場合

<i class="fas fa-paper-plane fa-spin"></i>

ショートコードの場合

[icon name="paper-plane" prefix="fas fa-spin"]

上の[ ]の記号は本来ならば半角です。

アイコンに回転の動きが加わります。

タイトルとURLをコピーしました