アイコンフォントの使い方が簡単に分かるように解説します。文字では表現できなかったアイコンの表示方法を、分かり易く説明します。
【目次】
アイコンフォントの使い方
「FontAwesome」というアイコンフォントを使って、もっと見やすいブログ記事にしましょう
このようなアイコンが表示できます！
設定する概要は、下記の通りです。
・手順①：WordPressテーマのヘッダーにコードを記述
・手順②：使いたいアイコンを選定
・手順③：HTMLコードを記事に記述
難しそうですが、簡単です笑。
最初に試したときは色々つまづきましたが、この手順通りに実施していけば楽勝です。順番に解説していきますね！
手順①：WordPressテーマのヘッダーにコードを記述
まず、WordPressテーマのヘッダーに「CDNコード」を記述します。
※CDNコードとは、
「FontAwesome」で提供するアイコンを使用する時に、「アイコンを使いますよ！」ってな感じで定義するソースコードです。
自分の使っているWordPressのテーマのヘッダーファイルに記述します。
このCDNコードをテーマのヘッダーに記述します。
<!– Place your kit’s code here –>
<script src=”https://kit.fontawesome.com/907daea3df.js” crossorigin=”anonymous”></script>
※最新のCDNコードはこちらの「FontAwesome」サイトにアクセスして取得します。更新頻度が多いようなので、アイコンが表示されなくなった時は確認してみてくださいね！
※メアド登録【無料】が必要です。登録の仕方は動画で紹介しています。
登録画面 「https://fontawesome.com/start」
手順②：使いたいアイコンを選定
こちらの「FontAwesome」サイトで、使いたいアイコンを選びます。
無料(Free)でも、多種類のアイコンが使えるので十分だと思いますが、有料では使いきれないほど豊富なアイコンが用意されていますね(^^♪
予算に余裕ある方は、有料版を利用されてはいかがでしょうか( *´艸｀)
・使いたいアイコンをクリック
・「このアイコンの使用を開始」をクリック
・下記画面の赤枠のコードをコピー([Ctrl]+[c])
手順③：HTMLコードを記事に記述
・WordPress投稿画面のテキストモードにする
・手順②でコピーしたHTMLコードを、表示させたい文章の箇所にペースト
実際のHTMLコード
<i class=”fas fa-angle-double-right”> このように表示されました！</i>
プレビュー画面で確認してみましょう！！
このように表示されました！
★うまくいかない時は
・WordPressテーマのヘッダーファイルに、コードを記述してから反映されるまで数分かかる時がありますので、少し時間をおいてみてください。
・もしくは、ページを「新規再読み込み」してみるのもいいです。
自分が試したときは、再読み込みしても反映されず、数分後にプレビューしたら表示されました(^^♪
あなたの読者を惹きつけるラインマーカープラグイン
WordPressプラグイン ZEBLINE（ゼブライン）zebline
