<<お知らせ>> 期間限定でキャンペーン実施中!

Font Awesomeが便利すぎる!Webアイコンフォントの表示方法

通常の文章ではあまり見かけませんが、「見出し」や「ボタン」に使われる「Webアイコンフォント」と呼ばれているものがあります。サイトで「文字(フォント)」と同じように、アイコンを表示できる優れもの。

文章で言われてもピンとこない人には、下記を見れば「なんか、よく見かけるね」と思うんじゃないでしょうか。

Webアイコンフォント

WordPress などにおいて、デフォルトでは表示させることができない「Webアイコンフォント」。このようなアイコン画像をダウンロードして表示させることもできますが、も〜っと簡単な方法があります

Font Awesome で簡単にアイコンを表示

「Webアイコンフォント」を簡単に表示させる方法としてオススメするのが、「Font Awesome」を使ったやり方。「画像素材」を一切使うことなく、アイコンを表示させることができます。

fontawesome

しかも、「大きさ」を変えたり「アニメーション」を加えたりすること可能。最初の「設定」さえできれば、そのあとは自由に表示させられるようになります。

表示させるための下準備

「Font Awesome」のアイコンを表示させるためには、サイトに情報を呼び出すためのコードを入れ込む必要があります。コードは、以下のもの。

コード
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

このコードを、WordPress の場合は「header.php」の <head>〜</head> に設置します。どの辺に設置すれば分からない場合は、</head> の直前に入れ込めば大丈夫です。

アイコン情報をダウンロードして表示させることもできますが、上記のコードを入れ込めば表示できるので説明は省きます。しかも、新しいデザインのアイコンがアップされるたびにダウンロードしなければならないし…

ちなみに、無料ブログでも html の設定を行えば利用できるので、探してみてください。と言っても、スマホでは表示されないなど WordPress のようにはいかないようですけどね。

アイコンをサイトに表示させる

アイコンを表示させるには、「Font Awesome」の一覧から選択してタグを貼り付けるだけ。ただ、それだけで「Webアイコンフォント」を表示させることができます。

MEMO
「Font Awesome」には有料のアイコンもありますが、基本的には無料で十分でしょう。もしプロ版を利用したい場合は、ライセンス料60ドルになります。

サイトトップにある「icons」をクリックすると、有料・無料ともにアイコンが表示されます。ライセンスを購入していない場合は、利用できる無料アイコンだけ色が濃くなっているのですぐに分かります。

「有料・無料が混じって紛らわしい!」と思う人は、左のメニューから「Free」をクリックすると無料アイコンだけの一覧となります

アイコンを探す

Font Awesome の一覧 から、表示させたいアイコンを選択します。

いっぱいあり過ぎて困るという人は、「検索欄」に入力して探すこともできます。でも、英語にしか対応していないんですけどねー。

コードをコピーする

表示させたいアイコンが見つかったら、次はコードをコピーします。コピーする部分は、<i>〜</i> まで全部

fontawesome

コードを貼り付ける

コピーしたコードを、表示させたいところに貼り付ければ完了となります。ただコピペするだけで、Webアイコンフォントが簡単に表示させることができます。

コード
<i class="fab fa-angellist"></i>
ブラウザ

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

アイコン自体はコピペで簡単に表示できることが分かったと思いますが、「大きさ」なども簡単にコードを追加するだけで設定することができます

大きさを変える

アイコンの大きさを変えるには、「fa-○○」を追加するだけ。何個も一気に変更したい場合は、div要素を利用したりcssを追加したりすれば可能です。

コード
<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
ブラウザ

アイコンの幅を揃える

アイコンを表示させてみると分かるのですが、 など細いアイコンと四角いアイコンでは横幅が異なってしまいます。

ブラウザ
Home
Info
Library

そんな時は、「fa-fw」を追加すると横幅が均等になります。

コード
<i class="fas fa-home fa-fw"></i>
<i class="fas fa-info fa-fw"></i>
<i class="fas fa-book fa-fw"></i> 
ブラウザ
Home
Info
Library

アイコンをずっと回転させる

全てではないのですが、対象のアイコンのみは「fa-spin」と追加することでずっと回転させることができます。対象のアイコン一覧は、こちら

「fa-spinner」というアイコンだけは、「fa-pulse」と追加すると点が順番に消えながら回転しているような表示になります。

コード
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
ブラウザ

アイコンの向きを変える

アイコンの向きを変えたい場合は、「rotate-○○」で設定することができます。

コード
<i class="fas fa-magic" data-fa-transform="rotate-90"></i>
<i class="fas fa-magic" data-fa-transform="rotate-180"></i>
<i class="fas fa-magic" data-fa-transform="rotate-270"></i>

アニメーションを加える

「Font Awesome」のアイコンは、アニメーションを追加することができます。ただ、これも下準備が必要となります

アニメーションの下準備

アイコンを表示させるための下準備と同じなのですが、下のコードも丸っとコピーして「header.php」の <head>〜</head> に追加します。

コード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

そして以下のclass名を追加すれば、以下のようなアニメーションを表示させることができます。

アイコンclass名
faa-wrench animated
faa-ring animated
faa-horizontal animated
faa-vertical animated
faa-flash animated
faa-bounce animated
faa-pulse animated
faa-shake animated
faa-tada animated
faa-burst animated

さいごに

あまり php などを触ったことがない人は怖いかもしれませんが、下準備さえしてしまえばとっても簡単です。「Webアイコンフォント」に興味がある人は、ぜひ試してみてください!