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

ここあです。

 

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

誰でも簡単にできるのが「Webアイコンフォント」を使用する方法です。

 

「Webアイコンフォント」は

ブログの記事内にワンポイントとしてアイコンを加えるだけで

かなりサイトの印象を変えることができます。

 

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

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

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

 

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

 

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

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

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

 

Font Awesomeとは?

FontAwesone

 

Font Awesomeとは…

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

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

 

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

 

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

<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

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

CSS

.bigx2{
font-size: 2em
}

ブラウザ表示

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

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

 

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

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

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

 

例えば、あなたの好きな名前(今回はmy-orange)

class名に追加してCSSでサイズ指定をします。

 

HTML

<p><i class="fab fa-angellist my-orange"></i>アイコンフォントをオレンジにしてみる</p>

CSS

.my-orange{
color: #ffb36b;
}

ブラウザ表示

アイコンフォントをオレンジ色にしてみる

アイコンがオレンジ色に変わりました^^

 

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アイコンフォントを導入すれば

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

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

 

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

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG