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

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

この記事の内容は、Font Awesomeのアイコンのサイズ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をコピーしました