注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
WordPress アイキャッチ画像-アイコンフォント

<-WordPress-> 3分で分かる!アイコンフォントの使い方


アイコンフォントの使い方が簡単に分かるように解説します。文字では表現できなかったアイコンの表示方法を、分かり易く説明します。

この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています!

 

アイコンフォントの使い方

WordPress アイキャッチ画像-アイコンフォント

 

「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

 

 

目次に戻る

WordPress アイキャッチ画像-アイコンフォント
最新情報をチェックしよう!