2018/02/06 2018/03/11

【中級者向け】Font Awesome使用方法！ブログでよく使うアイコン15個

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

「Font Awesome」を今回ご紹介します。Font Awesomeとは、アイコンを画像ではなくフォント・文字として、ページに表示できるツールです。僕はホームページ制作にFont Awesomeを使用するようになり、非常にストレスが解消されました。一昔前って、SNSのアイコンを表示させようと思えば、わざわざ画像を作ってページに表示させていました。Font Awesomeを使用すると、サイトに表示してあるコードをコピペするだけで、サイト上に表示されてしまいます。しかも、色も大きさも変更できます(動きも加えられる)。

今回は、サイト制作をしている方ではなく、ブロガーにこそおすすめ！！と思って記事を書きました。ブログの記事を書いていて、あともう少し装飾を加えられて見やすくなればいいのになと思ったことありません…ありますよね！!笑 (~~食い気味~~)

なんのこと？となるので、先にFont Awesomeで表示したアイコンをバーっと並べてみます。これをブログでもすぐに表示できるようにします。

　　　　　　　　　　　　　　

※こちらの記事は、Font AwesomeのVersion 5.0.6を元に書いています(2018年2月時点、最新版)

こんな方は必読ですブログに装飾を加えて見やすくしたい
ブログのカスタマイズとか正直分からない
面倒くさがり屋なので簡単なものがいい

Font Awesomeの設定方法

設定方法は色々なパターンがありますが、今回は専門的な知識のないブロガー向け(中級者向け)の記事ですので、分かりやすいように１つに絞ってご説明します。

以下のコードをコピーして下さい

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

1	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

補足：今回はCDNという方法を使用します。CDNとは簡単に説明すると、専用のサーバーに保管されている画像やフォントを使用する方法です。自分のサーバーにダウンロードする必要がないので、とてもお手軽です。

コードを貼り付けるファイルを開く

WordPressの場合の説明します。「header.php」を開いて下さい。

header.phpの場所管理画面

外観

テーマの編集

header.php

`</head>`の直前に貼り付け

header.phpのファイルを開いたら、</head>を探して下さい。上の方にあります。
</head>の直前に、事前にコピーしておいたコードを貼り付けます。

※貼り付け例

<head>
…
ここはもっとごちゃっとコードが書いてあります
…
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<head>

…

ここはもっとごちゃっとコードが書いてあります

…

</head>

これで設定完了です！あとは、使用したい時にアイコンのコードをコピーして記事内に貼るだけです。

Font Awesomeのアイコンの探し方

Font Awesome アイコン一覧からアイコンを探すことができます。

探し方は上部の検索バーにキーワードを入力します。例えば、twitter,instagramなどサービス名で検索するパターン。他にはphone,arrow,mail,checkなど連想するキーワードを入力して下さい。日本語検索は対応していません。

Font Awesomeのアイコンの表示の仕方

1.検索バーに「phone」と入力して検索してみます

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

※薄いグレーのものは選択できません(１回払いきり$60のproプランがあります)

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

このコードです。

<i class="fas fa-mobile"></i>

1	<i class="fas fa-mobile"></i>

4.WordPressの投稿画面の「テキストエディタ」を開いてください

右上の「テキストエディタ」です。ビジュアルエディタをお使いの方が多いかもしれませんが、コードはテキストエディタにしか貼ることができません。

5.スマホのアイコンを表示した結果

どうですか？表示されていますか？

↓記述したコードはこうなっています

<p><i class="fas fa-mobile"></i> どうですか？表示されていますか？</p>

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倍

↓２倍の表示にした場合、記述したコードはこうなっています

<i class="fas fa-mobile fa-2x"></i>

1	<i class="fas fa-mobile fa-2x"></i>

「fa-2x」を上と同じ場所に追加するだけです。

アイコンの色を変える方法

アイコンの色を変える場合は、CSSを追加します。今回は直接コードに書き込む方法です。

スマホの色をイエローに変更して、２倍の大きさで表示しています。

<i style="color:#F8BE36;" class="fas fa-mobile fa-2x"></i>

1	<i style="color:#F8BE36;" class="fas fa-mobile fa-2x"></i>

#F8BE36のところを好きな色のコードに変更すると、色が変わります。カラーコードはこちらで調べてみて下さい。

ブログでよく使うアイコン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">`