そして文字の入っているブロックの「HTMLとして編集」を選択します

コピーした＜i＞タグを下記の様に「HTML」に張り付けます。

<p>いったん文字をいれます。<i　class=”fab-※※※※”></i></p>

HTML編集後にブロックボタン内にある「ビジュアル編集」を選択すると通常表示に戻ります。

すると上記の様にアイコンが表示されるようになりました。

たまにアイコンが表示されなかったり、変な表示がされた場合は一旦ブロックを削除して、１から入れ直して下さい。

アイコンの表示を変更しよう

アイコンの大きさを変える

アイコンの大きさを変更する場合は以下の様にfa-※※と追加で記入します。

<i class=”fas fa-※※※※ fa-lg”></i>

• fa-lg：1.333倍
• fa-2x：2倍
• fa:3x：3倍
• fa-4x：4倍
• fa-5x：5倍

これ以外のサイズにしたい時は自分の好きな名前のclassを追加して、そのclassに対してCSSでカスタムしましょう。

<i　class＝fab-※※※※　my-size”＞＜/i＞

カスタムCSS

• .my-size{font-size:0.8em}　は0.8倍
• .my-size{font-size:9em}　は9倍

サイズを沢山作りたい時は「my-size１」、「my-size2」と増やしていきましょう。

CSSには「.my-size」最初のドットを忘れないようにしましょう。

アイコンの色を変える

アイコンの色を変える場合は＜i＞タグに好きな名前のclassを追加して、そのclassに対してCSSでカスタムしましょう。

<i　class＝fab-※※※※　my-color”＞＜/i＞

カスタムCSS

• .my-color{color:red}　は赤色
• .my-color{color:green}　は緑色
• .my-color{color:＃ffffff}　はカラーコードで指定

カラーバリエーションを増やしたい時は「my-coror1」、「my-coror2」と増やしていきましょう。

CSSには「.my-color」最初のドットを忘れないようにしましょう。

アイコンを回転させよう

アイコンを回転させたい時はclass内に「fa-spin」を追加します。

<i　class＝fab-※※※※　fa-spin”＞＜/i＞

アイコンの表示角度を変更しよう

アイコンの表示角度を変更する時はclass内に「fa-rotate-※※」を追加します。

• <i　class＝fab-※※※※　fa-rotate-90”＞＜/i＞　は90°回転
• <i　class＝fab-※※※※　fa-rotate-180”＞＜/i＞　は180°回転
• <i　class＝fab-※※※※　fa-rotate-270”＞＜/i＞　は270°回転

カスタムCSSの入れ方

自分はワードプレステーマで「cocoon」を使用しています。

「cocoon」では下記にカスタムCSSを記入する場所があります。

編集中の記事のみに反映されるので毎回CSSの記入が必要になります。

さいごに

調べているともっとアイコン利用方法があるみたいです。

今の自分のレベルではこれが限界ですが、もっと慣れてきたら追記していきたいと思います。

さいごにアイコンをカスタムした物↓↓↓

ご意見・ご感想はコメントよりお願いします。

バイバイまたねー✋