2018/02/06 2018/03/11
【中級者向け】Font Awesome使用方法!ブログでよく使うアイコン15個
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

こんな方は必読です ブログに装飾を加えて見やすくしたい
ブログのカスタマイズとか正直分からない
面倒くさがり屋なので簡単なものがいい
Font Awesomeの設定方法
設定方法は色々なパターンがありますが、今回は専門的な知識のないブロガー向け(中級者向け)の記事ですので、分かりやすいように1つに絞ってご説明します。以下のコードをコピーして下さい
1 |
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> |
コードを貼り付けるファイルを開く
WordPressの場合の説明します。「header.php」を開いて下さい。
header.phpの場所管理画面
外観
テーマの編集
header.php
</head>
の直前に貼り付け
header.phpのファイルを開いたら、</head>
を探して下さい。上の方にあります。
</head>
の直前に、事前にコピーしておいたコードを貼り付けます。
※貼り付け例
1 2 3 4 5 6 |
<head> … ここはもっとごちゃっとコードが書いてあります … <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> |
Font Awesomeのアイコンの探し方

Font Awesomeのアイコンの表示の仕方
1.検索バーに「phone」と入力して検索してみます

2.表示したいアイコンをクリックして開いて下さい

3.ページ中段にあるコードをコピーします

1 |
<i class="fas fa-mobile"></i> |
4.WordPressの投稿画面の「テキストエディタ」を開いてください

5.スマホのアイコンを表示した結果
どうですか?表示されていますか? ↓記述したコードはこうなっています
1 |
<p><i class="fas fa-mobile"></i> どうですか?表示されていますか?</p> |
アイコンの大きさを変える方法
アイコンの大きさを簡単に変更することができます。例えば、先ほどのスマホのアイコンを様々なサイズのものを並べてみます。
フォントサイズを変更できるコードfa-xs 0.75倍
fa-sm 0.875倍
fa-lg 1.333倍
fa-2x 2倍
fa-3x 3倍
fa-5x 5倍
fa-7x 7倍
fa-10x 10倍
↓2倍の表示にした場合、記述したコードはこうなっています
1 |
<i class="fas fa-mobile fa-2x"></i> |
アイコンの色を変える方法
アイコンの色を変える場合は、CSSを追加します。今回は直接コードに書き込む方法です。 スマホの色をイエローに変更して、2倍の大きさで表示しています。
1 |
<i style="color:#F8BE36;" class="fas fa-mobile fa-2x"></i> |
ブログでよく使うアイコン15個
最後に、僕がブログでよく使うアイコンも紹介しておきます。<i class="fab fa-twitter"> | |
<i class="fab fa-facebook-square"> | |
<i class="fab fa-instagram"> | |
<i class="fab fa-line"> | |
<i class="fab fa-youtube"> | |
<i class="fas fa-check"> | |
<i class="fas fa-check-square"> | |
<i class="fas fa-external-link-alt"> | |
<i class="fas fa-arrow-up"> | |
<i class="fas fa-arrow-down"> | |
<i class="fas fa-arrow-right"> | |
<i class="fas fa-arrow-left"> | |
<i class="fas fa-user"> | |
<i class="fas fa-desktop"> | |
<i class="fas fa-image"> |
スポンサーリンク