Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

【必見!】Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

ここあです。

 

ブログのデザインを良くする手段の1つとして

誰でも簡単にできるのが「Webアイコンフォント」

使用する方法です。

 

ブログの記事内に

ワンポイントとしてアイコンを加えるだけで

随分と印象が変わって見えます。

 

今回は初心者のあなたでも簡単に使うことができる

「Font Awesome(フォントオーサム)という

非常に便利なサービスがありますので

 

導入の仕方から使い方までやさしく解説していきます。

 

また、アイコンフォントはアイコン表示だけでなく

アニメーションを付けることもできるので

訪問者へのアイキャッチとしても効果的です。

 

Font Awesomeとは?

FontAwesone

 

Font Awesomeとは…

あなたのWebサイトやブログなどで

Webアイコンフォントを表示させられるサービスです。

 

このサービスは誰でも簡単に無料で利用することができます。

「Font Awesome 5」公式サイト

「旧バージョン4.7.0」公式サイト

 

Webアイコンフォントとは?

Webサイト上で文字と同じように表示できるアイコンです。

画像の場合だと、拡大したらぼやけたり

画像を貼り込むことでデータが重たくなったりしますが

 

Webアイコンフォントを使えば…

  • 拡大してもぼやけない
  • データが軽い
  • 色もサイズも簡単に変えられる

などのメリットがあります。

 

Webアイコンフォント使用例

例えば私のブログだと…

 

←Twitterのマーク

←矢印のマーク

←リストのマーク

など…

これらはすべてFont Awesomeの

Webアイコンフォントを使用して表示させています。

 

Font Awesomeの最新版は?

2017年末、新たにバージョン5

Font Awesome 5がリリースされています。

 

Font Awesome 5には…

種類が豊富な“PROプラン”も登場。

 

$60かかりますが、月額使用制ではないので

長く使いたい場合は投資するだけの価値はあります。

個人で使う場合は無料プランで十分。

 

また、旧バージョンの4.7.0もこれまで通り使えますので

お好みに合わせて使い分けることが可能です。

 

Font Awesomeの使用準備

Font Awesomeを使うためには下準備が必要です。

 

使うための方法として…

  • CDNを使う方法
  • 自分のサーバーにデータをダウンロードして使う方法

の2通りがあります。

 

今回は、私がおすすめする

CDNを使って表示させる方法だけに絞り

設定の仕方を説明していきます。

予備知識

そもそも「CDNってなんぞや?」って思う人もいるかもしれません。
CDNとは「コンテンツ・デリバリー・ネットワーク」の略で単純にいうと「ダウンロード配信技術」。
つまり、CDNを使えば、Font Awesomeのサーバーにあるデータを読み込んで
あなたのWebサイトに表示させる手段ということになります。
なので、CDN=データを専用サーバーから読み込んで表示させる方法
ということだけ覚えておいてもらえればOKです。

 

私がCDNを使すすめる理由は…

  • Font Awesomeの新しいアイコンが追加された時に
    自分のサーバーにダウンロードし直す手間が要らない。
  • Font Awesomeの専用サーバーから読み込むため
    自分のサーバーへの負荷も減らせる。
  • コードを調べて書くだけなので楽。

だからです。

 

予備知識

CDNのデメリットとしては、専用サーバーからデータを読み込むので
ロード時間がかかり、若干表示速度が落ちます。
極端に表示速度が落ちる訳ではないので、気にするほどではありませんが
CDNを使う場合のデメリットとして一応覚えておいてくださいね。

Font Awesomeの使用手順(1)コードをコピーする

Font Awesome をCDNで読み込むための以下のコードをコピーします。

Font Awesome 5のコード

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">


旧バージョン
を使う場合は、こちらのコードをコピーしてください。

Font Awesome 4.7.0のコード

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Font Awesomeの使用手順(2)コードをテーマヘッダーに貼り付ける

上記、コピーしたコードを子テーマ

テーマヘッダー(header.php)にコピーします。

 

テーマヘッダーへは

ダッシュボードメニューから外観 → テーマの編集をクリックし

ダッシュボードメニュー

 

テーマファイルの中のテーマヘッダーを選択します。

テーマヘッダー

 

テーマヘッダーを開いたら

〈head〉〜〈/head〉の間にコードをコピーして設定を保存します。

テーマヘッダー

 

これでFont Awesomeを使うための下準備は完了です。

注意

コードのコピーは必ず「子テーマ」で編集してください。
「親テーマ」にコードを入れてしまうとテーマのアップデート時に、
設定が上書きされて全て消えてしまうリスクがあります。
テーマの編集は必ず「子テーマ」で行うようにしてください。
※</head>の直前に貼ると、SNSシェアアイコンの表示が消える可能性がありますので
 SNSシェアアイコンの表示が消えない適度な上部に貼り付けてください。

 

子テーマのテーマヘッダーが見つからないという場合は…

 

テーマヘッダーを表示させる方法を

こちらの記事に記載していますので参考にしてください。

「親テーマ」のファイルを「子テーマ」で編集する方法

 

Font Awesomeの基本的な使い方

コードがコピーできて、下準備が完了すれば

Webアイコンフォントを表示させるのは非常に簡単。

順番に基本的な使い方を解説していきますね。

 

STEP1:使いたいアイコンフォントをサイトから探す

まずはFont Awesomeの公式サイトにアクセスして

あなたが使いたいWebアイコンフォントを探します。

頻繁に使いたい場合は、ブックマークしておくと便利ですね^^

 

「Font Awesome 5」公式サイト

Font Awesome 5

 

「旧バージョン4.7.0」公式サイト

Font Awesome旧バージョン

 

今回は、Font Awesome 5の方で説明致します。

 

公式サイトに移動したら…

トップページにIconsという表示があるのでクリックします。

Font Awesomeトップ

 

Iconsをクリックするとアイコン一覧が表示されます。

Font Awesomeアイコン一覧

 

しかし、表示されているアイコンは

PROプランのアイコンも全て含まれています。

 

左にあるFreeの文字をクリックして

無料で使えるアイコンのみを表示させます。

Font Awesomeアイコン一覧

 

Freeで使えるアイコン一覧が表示できたら

一覧表示の中から使いたいアイコンを選びます。

Font Awesomeアイコン一覧

 

今回はサンプルとして以下のアイコンを選びました。

Font Awesomeアイコン一覧

 

STEP2:Webアイコンフォントのコードをコピーする

使いたいアイコンを選んだら

使いたいアイコンをクリックして

アイコンコードの画面を表示させます。

Font Awesome:アイコンコード画面

 

この画面で、左下に表示されているコード

<i class=”fab fa-angellist”></i>の部分をコピーします。

Font Awesome:アイコンコード画面

 

STEP3:アイコンを表示させたい位置に貼り付ける

先ほどコピーした

<i class=”fab fa-angellist”></i>のWebアイコンフォントを

あなたが挿入したい場所にペーストして貼り付けます。

htmlコード

<p><i class="fab fa-angellist"></i>アイコンフォントかわいい</p>

ブラウザ表示

アイコンフォントかわいい

〈うまく表示されない・アイコンが消える時の対処法〉
※アイコンコードのコピーは必ず「テキスト」編集モードで貼り付けてください。
※アイコンコードは<p>〜</p>の間に入れてください。(pタグで挟む)
※アイコンだけで表示させる場合は、<p><i class=”fab fa-angellist”>&nbsp;</i></p>
  このように間に&nbsp;を入れてください。アイコンが消える可能性があります^^;
◎原因がよく分かりませんが、上手くいかない時は試してみてください。

 

STEP4:アイコンの大きさを変えたい時は…

Font AwesomeのWebアイコンは大きさを変えるのも簡単です。

CSSで“class”指定すると

自由自在にアイコンサイズの変更ができるようになります。

 

例えば…

あなたの好きな名前(今回はbigx2)をclass名に追加して

CSSでサイズ指定をします。

HTML

<p><i class="fab fa-angellist bigx2"></i>アイコンフォントを2倍にする</p>

CSS

.bigx2{
font-size: 2em/*2倍の大きさに*/
}

ブラウザ表示

 アイコンフォントを2倍にする

※emとは1文字分という単位のことなので2emなら2倍
 3emなら3倍とサイズ指定も分かりやすいです。

 

STEP5:アイコンの色を変えたい時は…

色を変える時も、先ほどのサイズ指定同様

CSSで指定すると簡単にできます。

 

例えば…

あなたの好きな名前(今回はmy-pink)をclass名に追加して

CSSでサイズ指定をします。

HTML

<p><i class="fab fa-angellist my-pink"></i>アイコンフォントをピンクにしてみる</p>

CSS

.my-pink{
color: #f05689;/*ピンク色に変える*/
}

ブラウザ表示

アイコンフォントをピンクにしてみる

アイコンがピンク色に変わりました^^

 

STEP6:アイコンと文字の間を空けたい時は…

Webフォントアイコンと文字の間を空けたい時は

単純にコードを入力する際に

スペースを入れれば空けることができます。

HTML

<p><i class="fab fa-angellist"></i> アイコンフォントかわいい</p>

ブラウザ表示

 アイコンフォントかわいい

 

さらにもっとこだわりたい場合は

CSSで指定をします。

 

例えば…

あなたの好きな名前(今回はmy-space)をclass名に追加して

CSSでスペースの距離を調整します。

HTML

<p><i class="fab fa-angellist my-space"></i>アイコンフォントかわいい</p>

CSS

.my-space{
padding-right: 0.5em;
}

ブラウザ表示

アイコンフォントかわいい

※半角スペースを空けたい時は0.5em
 全角スペース(1文字分)空けたい時は1emなど
 お好みで調整してみてください。

 

Font Awesomeの応用を効かした使い方

Font Awesomeの使い方が分かると

いろいろと応用させることができます。

 

Font AwesomeをCSSの疑似要素と組み合わせて使う方法

Font AwesomeのWebアイコンフォントを

CSSの疑似要素と組み合わせると、こんなこともできます。

これはapple社の製品です。

 

やり方はそれほど難しくはありません。

以下の方法で表示させることができます。

HTML

<p>これは<span class="apple">apple</span>社の製品です。</p>

CSS
.apple:before {
font-family: "Font Awesome 5 Brands";
content: '\f179';
}

ブラウザ表示

これはapple社の製品です。

 

簡単に解説すると…

 

“apple”というCSSのclass名を作り

appleの文字の前にFont Awesomeのアイコンを表示させてねというやり方。

※:before 要素の直前に内容を入れるコード(CSSの疑似要素)

 

さらに、font-family: "Font Awesome 5 Brands";

アイコンフォントを使うことを明記し

content: '\f179';でアイコンの種類を指定します。

 

今回はappleのマーク

赤枠のコード\f179をコピーして使用しています。

※\(バックスラッシュ)を忘れないよう記述してください。

Font Awesone

 

Font Awesomeの種類

Font Awesomeの種類は大きく分けて4つに分類されます。

分類接頭辞font weightコード例
solidfas900<i class=”fas fa-apple”></i>
regularfar400<i class=”far fa-apple”></i>
lightfal300<i class=”fal fa-apple”></i>
blandsfab400<i class=”fab fa-apple”></i>

 

fabで始まるブランド系アイコンはfont-mamilyを変える

上記、apple社のアイコンなど

 

ブランド系のWebフォントアイコンを使う場合は

font-familyの指定をfont-family: "Font Awesome 5 Brands";

としてください。

 

ブランド系アイコンの見分け方は

上記表を見て分かる通り

接頭辞が fab となっているWebフォントアイコンです。

 

例えば、上記appleマークの場合だと…

コードが<i class=”fab fa-apple”></i>と

コードの接頭辞にfabが付いています。

 

ここで、このWebアイコンフォントは

ブランド系と判別することができます。

 

見出しにFont Awesomeを使う

見出しにWebアイコンフォントを使う時は

以下の書き方を応用してください。

 

HTML

<h3>これは記事の見出しです。</h3>

CSS

.entry-content h3:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンコード*/
padding-right: 5px;/*アイコンと文字の隙間*/
color: #f89174;/*アイコンの色*/
}

※見出しにWebアイコンフォントを使用する場合は
 hタグの前に必ずentry-contentを付けてください。
 entry-contentを付けないと…
 記事以外の全てのhタグに反映されてしまいます。

 

なお、その他、見出しのデザイン例はこちらの記事にまとめています。

【コピペだけ!】STORK(ストーク)の見出しをオシャレにカスタマイズ!

 

リスト表示にWebアイコンフォントを使う

Webアイコンフォントはリスト表示にも使えます。

実際に私も使用しています。

  • リスト表示サンプルA
  • リスト表示サンプルB
  • リスト表示サンプルC

 

詳しいやり方は、以下の記事で紹介しています。

Webアイコンフォントをリスト表示で使う方法

 

Font Awesomeにアニメーションを付ける方法

Font AwesomeのWebアイコンフォントは

様々なアニメーションを付けることもできます。

 

例えば、私が使っているこのアイコンも

アニメーション機能を使って表示させています。

←webアイコン + アニメーション表示

 

Font Awesome Animationの使い方

Font Awesome Animationを使うには

Font Awesome同様、CDNとして読み込むための

以下のコードをテーマヘッダー(header.php)にコピーします。

 

Font Awesome Animationのコード

<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" />

 

アニメーションの動きの付け方

アニメーションを付ける場合は

以下のようにコードを書いてください。

HTML

<p><i class="fab fa-apple アニメーションのclass名"></i></p>

例えば、上記例の場合は…

fab fa-appleというのでapple社のアイコンのマークを表示させます。

 

ここに、アニメーションのclass名

faa-bounce animatedというのを足してみます。

 

HTML

<p><i class="fab fa-apple faa-bounce animated"></i>飛び跳ねるリンゴの出来上がり!</p>

そうすると…

ブラウザ表示

飛び跳ねるリンゴの出来上がり!

かわいい動きが付きましたね。これなら訪問者の目を引いてくれそうです^^

 

先に紹介したやり方を組み合わせると、色や大きさも変えられるし

アニメーションの動きを変えることもできます。

 

アニメーションの動きは

Font Awesome Animation公式サイトからコピーして

いろいろと試してみてくださいね。

 

Font Awesome Animation公式サイトの

主に一番左側の列で、動きのあるアニメーションを

表示させることができます。

Font Awesome Animation

 

アイコンにマウスを合わせた時(hover時)に動かす方法

Font Awesome Animationは常時動かすだけでなく

アイコンの上にマウスを合わせた時に

アイコンが動くようにも設定できます。

 

やり方はとても簡単!

 

先ほど書いたコードのanimatedを

animated-hoverに変えるだけ。

 

HTML

<p><i class="fab fa-apple faa-bounce animated"></i>←リンゴにカーソルを乗せて!</p>

例えば、上記例の…

animatedの部分をanimated-hoverに変更してみます。

 

HTML

<p><i class="fab fa-apple faa-bounce animated-hover"></i>←リンゴにカーソルを乗せて!</p>

そうすると…

ブラウザ表示

←リンゴにカーソルを乗せて!

リンゴアイコンの上に

マウスを持ってきた時だけ動くようになりました^^

 

アイコンhover時のアニメーションはどの動きでも可能です。

公式サイトを見ると分かりますが、全てのコードにおいて

違いはanimatedか、animated-hoverかだけです。

Font Awesome animated-hover

 

 

一番右にある親要素へのHover時のみアイコンを動かす方向

もありますが、ここでは説明は省かせていただきます。

なかなかそこまで機能を使う人は少ないと思います^^;

 

Font Awesome 5を使う時の注意点

Font Awesome 5を使用する際

CSSで指定しても「あれ?表示されない」

という時があるかもしれません。

 

CDNでFont Awesome 5を読み込む場合

CSSの指定の仕方が旧バージョンと若干変わっています。

 

CSSでFont Awesome 5を読み込む場合は

CSS

:before {
font-family: "Font Awesome 5 Free";
content: "\f107";

上記のように

font familyの指定は"Font Awesome 5 Free"; で。

 

また、先ほどの例に挙げたブランド系アイコンの場合は

CSS

.twitter::before {
font-family: "Font Awesome 5 Brands";
content: "\f099";
}

font familyの指定を"Font Awesome 5 Brands"; としましょう。

 

さらに、一部アイコンにはfont-weight: bold;と指定しないと

表示されないものもあるようです。

ややこしいですね^^;

 

万が一表示されない場合は試してみてください。

 

Font Awesome(Webアイコンフォント)の使い方まとめ

今回はFont Awesomeの導入の仕方から

使い方まで簡単に解説してきました。

 

Webアイコンフォントは記事の本文だけでなく

見出しやリスト、目次のワンポイントなど様々な場所で使えます。

 

Webアイコンフォントを導入すれば

ブログの印象も変えることができるし

手軽に導入できるのでぜひ試してみてくださいね^^

 

最後までお読みいただきありがとうございました!

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

合わせて読みたい!

【必見!】Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。