便利な無料アイコン（Font Awesome）の使い方

Webサイトをみてると、 おしゃれなアイコンを使っているサイトが結構ありますよね。

その多くは「Font Awesome」という無料のWebアイコンフォントを使っています。

無料で簡単に使用できてサイトのデザイン性も良くなるので、 ぜひ使ってみることをおすすめします。

ここでは「Font Awesome」の使い方を、準備から応用まで丁寧に解説します。

[toc]

Font Awesomeとは

Font Awesome

Font Awesome

「Font Awesome」とは、無料で使えるWebアイコンフォントです。

「Font」とあるようにアイコンを文字として使うことができます。

「文字として使える」ということは、 「フォントのように大きさや色を自由に変更できる」ということです。

一部有料のものもありますが、無料でも十分な数のアイコンフォントがあります。

使用準備： JSファイルを読み込む

使用するための準備は簡単です。JSファイルを読み込むだけです。

以下の script タグをHTML内にコピペしてください。 一般的には head タグ内に記述しますが、そうでなくても大丈夫です。 （バージョン番号は最新に変更してください）


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

使用方法

アイコンフォント検索ページ

まずは、上のリンクから「Font Awesome」のアイコンフォント検索ページを表示してください。

検索ページ

ここでは、検索ボックスに例として「CSS3」と入力します。

すると下図のように、「CSS3」にヒットするアイコンフォントが５個表示されました。

検索結果

無料と有料の区別方法

ここで無料と有料の区別方法を説明しておきます。

アイコンフォントの「色が濃い」のが無料で、「色が薄い」のが有料です。

下図では左から４個が無料で、右端の１つが有料となります。

無料・有料の区別

さらに、有料版はアイコンフォントにカーソルを乗せると、 右上に「Pro」と表示されるのですぐわかります。

有料版

使いたいアイコンフォントを選択する

ではアイコンフォントを選択します。

今回は左から２番目のアイコンフォントを使ってみます。使いたいアイコンフォントをクリック。

フォントアイコンを選択

下図のような画面が表示されます。

フォントアイコンページ

画面左上にHTMLコードが書かれている箇所があります。 「i」タグで囲まれている部分です。

HTMLタグ

赤枠で囲ったHTMLコード部分をクリックすると、HTMLコードがクリップボードにコピーされます。

今回の場合だと、


<i class="fab fa-css3-alt"></i>

このHTMLコードをご自身のHTMLファイルの表示したい場所に貼り付けます。

ここに貼り付けました。
↓↓↓

小さいですけど（汗）、表示されていますね。 次はサイズを大きくする方法を説明します。

アイコンフォントの大きさを変更する

アイコンフォントのサイズを変更する方法は２通りあります。 「font-size」を指定する方法と、クラスを使ってサイズ指定する方法です。

「font-size」を指定する方法

CSSで「font-size」を指定してアイコンフォントの大きさを変更します。

次のようにCSSを記述してください。 

.fa-css-all {
  font-size: 2em;
}

下のように2emのサイズで表示されます。

クラス名に指定するのは下記の赤字部分です。


<i class="fab fa-css3-alt"></i>

最初のクラス「fab」を指定しても変更されないので注意してください。

クラスを使ってサイズ指定する方法

次はクラスを使ってサイズ指定する方法を説明します。

先程のアイコンフォント画面の下側、赤枠部分を見てください。 サイズの違うアイコンフォントが複数表示されています。

いろいろなサイズ

赤枠内のアイコンフォントにカーソルをのせると、 サイズが表示されます。

下図の場合だと「size: 3x」と表示されています。この表示を利用してサイズを変更します。

サイズ表示

指定方法は次のとおりです。


<i class="fab fa-css3-alt fa-3x"></i>

赤字部分のように、「fa-数値x」というクラスを加えます。

「fa-3x」を加えた場合は次のように表示されます。

「fa-4x」を加えた場合は次のように表示されます。

（補足）

「font-size」で指定する方法は、小数点単位も指定できますが、 ２番目の「fa-数値x」クラスを指定する方法は、小数点単位は指定できません。

「1.5倍」「2.5倍」等を指定したい場合は１番目の「font-size」で指定してください。

アイコンフォントの色を変更する

色を変更する場合は、CSSの「color」プロパティを指定します。

例として、青色に変更する場合は次のように記述します。


.fa-css3-alt {
  font-size: 2em;
  color: blue;
}

青色のアイコンフォントが表示されます。

アイコンフォントを回転させる

アイコンフォントを回転させることもできます。 class=""の部分に「fa-spin」を追加します。 

<i class="fab fa-css3-alt fa-2x fa-spin"></i>

見た目でインパクトを与えたいとき使えますね。

ヘッダーのマークにアイコンフォントを使用する

ヘッダーのマークとして使用することもできます。

次のようなチェック印のアイコンフォントを使用します。

h5タグの先頭マークとして使用する場合、 CSSは次のようになります。


h5:before {
  font-family: "FontAwesome";
  content: "\f00c"; /* unicode */
  font-size: 2em;
  padding-right : 5px; /* 右パディング */
  color: red;
}

表示結果
↓↓↓

H5 ヘッダーテキスト

ポイントは赤字の部分です。 「font-family: "FontAwesome";」と「content: "\f00c";」を指定しています。

「content」プロパティの値（Unicode：この場合"f00c"）は、 該当アイコンフォントページの左上、HTMLタグの横にあります。

Unicode

上記CSSのUnicode部分を使用したいアイコンフォントのUnicodeに変更してください。

後は、アイコンとテキストの間を適度にあけた方が見やすくなるので、 「margin-right」も指定した方がいいでしょう。

リストのマークにアイコンフォントを使用する

リストのマークに使用する場合も、ヘッダーと同じようにできます。

CSSは次のようになります。 

ul {
  list-style: none;
  padding-left: 5px;
}

li:before {
  font-family: "FontAwesome";
  font-size: 1em;
  content: "\f00c";
  padding-right : 5px; /* 右パディング */
  color: red;
}

表示結果
↓↓↓

  • リスト1
  • リスト2
  • リスト3
  • リスト4

    • ulタグの「list-style: none」でデフォルトのマークを消して、 「li:before」でアイコンフォントを指定します。

    このように、アイコンフォントはいろんな場所で簡単に使えるのでおすすめです。

HTML・CSS入門