Home
Menu
Side
Twitter
Top
ホーム / Blog |

無料で良質なアイコンをブログに使いたい方へ 【 Font Awesame 】

2020/07/22

Blog

この記事はこんな悩みを解決します！
  • 自分のブログにアイコンを表示させたい
  • Font Awesome の使い方が知りたい

こんにちは HARU（ @HARU ）です。

自分でブログや Web サイトを運営していると、必ず SNS やホームボタンを作るときがきます。

いや、必ずは言い過ぎかもしれません。

しかし、そういったアイコンで表現したい場面は必ずあります。

例えばこんなとき
  • 更新日をアイコンで表現したい
  • 外部リンクと内部リンクをアイコンで表現したい

何かとアイコンで表現したいことはたくさんありますが、そんなとき重宝する Font Awesome について説明します。

とにかく便利なツールなので、是非皆さんも使ってみてください。

Font Awesome とは

Font Awesome とはアイコンを画像ではなく、フォントで表現できるツールです。

分かりやすく言えば、文字コードを入力することでアイコン（ 絵 ）として表示してくれるツールです。

アイコンを表示したいときにわざわざ、画像を挿入する手間がなく、文字コードを入力するだけでいいのでとても楽です。

また、大きさや色の調整も簡単にすることができます。

無料版と有料版があり、アイコンの種類の多さに違いがありますが、無料版でも使えるアイコンが揃っています。

Font Awesome のバージョンについて

Font Awesome にはバージョンによる使い方の違いがあります。

現在（ 2020.7 ）の最新は バージョン５ であり、次いでよく使われているのは旧バージョンの４があります。

いろいろな Web サイトで、Font Awesome を使ったブログのカスタマイズを説明していますが、この認識が無いと「 説明通りにやってるのにアイコンが表示されない！ 」となります。

予め Font Awesome には複数のバージョンが存在し、使い方が若干違うということを覚えてください。

なお、今後バージョン６がリリース予定となっています。

公式サイト

ver.４ も ver.５ も使いたい！

私自身がそうなのですが、どちらのバージョンも使えるようにしておきたいというのが本音です。

なぜかというと、ブログのカスタマイズをする際に、参考元によってどちらのバージョンを利用しているのか分かりづらいからです。

結局すべてを理解してしまえば、バージョン違いに対応することは可能ですけどね。

コピペでブログをカスタマイズしていきたい人にとっては、そういった知識を入れる工程は省きたいと思うのです。

ちなみに私のブログはどちらのバージョンにも対応するようにしてあります。

今回はその手順で使い方も説明していきます。

Font Awesome の使い方

実際に Font Awesome の使い方を以下に示します。

Font Awesome の導入

以下のコード２つを <head> の直下に記述します。

２つ記述しておくことで、バージョン４、バージョン５両方使える状態にできます。

Font Awesome（ ver.5 ） 
<!-- Font Awesome ver.5 -->
<link href='https://use.fontawesome.com/releases/v5.6.4/css/all.css' rel='stylesheet'/>
Font Awesome（ ver.4 ） 
<!-- Font Awesome ver.4 -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
注意

Blogger の仕様かわかりませんが、ver.5を上に、ver.4を下に記述しないと、HTML に直接記述した場合に不具合が発生することがありました。

HTML に直接記述する

文章中に直接文字コードとして記述することで、アイコンを表示させることができます。

例えばこんな感じに（ ）任意の場所に表示できます。

Font Awesome（ ver.5 ） 

  <!-- ソースコード -->
  <i class="fab fa-google"></i>
  <!-- 実行結果 -->
Font Awesome（ ver.4 ） 

  <!-- ソースコード -->
  <i class="fa fa-google"></i>
  <!-- 実行結果 -->

バージョンの違いについて【 HTML 】

HTML に直接記述した場合、バージョンによる使い方の違いはありません。

アイコンの調整【 HTML 】

アイコンは CSS で調整することで色や大きさを変更することができます。

HTML に直接 CSS を書く 

  <!-- ソースコード -->
  <i class="fab fa-google" style="color:red; border:solid 2px; padding:2px;"></i>
  <!-- 実行結果 -->
CSS ファイルに書く 

  .example {
    color: red;
    border: solid 2px;
    padding: 2px;
  }


  <!-- ソースコード -->
  <i class="fab fa-google example"></i>
  <!-- 実行結果 -->

CSS を使って自動でアイコンを表示させる

繰り返し表示したいアイコンは :after や :before を使って、自動で表示させるようにしましょう。

アイコンの調整は CSS ファイルに記述することで可能です。

Font Awesome（ ver.5 ） 

  .example:after {
    font-family: 'Font Awesome 5 Brands';
    content: "\f1a0";
    margin-left: 10px;
    color: red;
    border: solid 2px;
    padding: 2px;
  }


  <!-- ソースコード -->
  <p class="example">この文のあとにアイコンが表示される</p>
  <!-- 実行結果 -->
  この文のあとにアイコンが表示される
Font Awesome（ ver.4 ） 

  .example:after {
    font-family: 'FontAwesome';
    content: "\f1a0";
    margin-left: 10px;
    color: red;
    border: solid 2px;
    padding: 2px;
  }


  <!-- ソースコード -->
  <p class="example">この文のあとにアイコンが表示される</p>
  <!-- 実行結果 -->
  この文のあとにアイコンが表示される

バージョンの違いについて【 CSS 】

CSS を使って自動でアイコンを表示させる場合、バージョンによって fontfamily の指定が違います。

アイコン調整時の参考記事

アイコンの調整を行うには、CSS を使うことが前提となります。

CSS の使い方に関して、簡単にまとめてありますので参考にしてください。

CSS について

アイコンをお探しの方へ

Font Awesome の公式ページで探すか、以下のページで探すといいでしょう。

以下のページは日本語でアイコンを検索できるページです。

参考

まとめ

現在はバージョン４が使える状態ですが、次回バージョン６がリリースされたときに使えなくなる可能性も考えなくてはいけないかもしれませんね。

となると、今後はバージョン５を使っていくほうがいいでしょう。

今までバージョン４を主に使っていた方は、Font Awesome のバージョンを４から５に置き換えるだけなので、やっておいて損はないと思います。

QooQ