フォントアイコンの使い方 (FontAwesome)

フォントアイコンの使い方 (FontAwesome)

フォントアイコンを使いたいけど、なんか難しそう…。そんな初心者の人向けに導入方法と基本的な使い方を説明します。今回は、代表的な「FontAwesome」というフォントアイコンを使ってみましょう。SYNCERでは、これを採用しています。

サンプル

下記が、フォントアイコン(FontAwesome)のサンプルです。ウェブページの一点ものとして使えそうな種類のアイコンが豊富に揃っています。画像と違って、テキストと同じように色やサイズを自由に設定できる手軽さが魅力です。

  • ダウンロードはこちら
  • こちらをクリック!!
  • アクセス案内
  • トップページ
  • 最終更新時刻
  • Twitter
  • Facebook

SNS関係のアイコンも揃っているので、オリジナルのシェアボタンを作成するにも、便利ですね〜。これが画像だったら作業は大変です…。

準備編

サンプルを見て「FontAwesomeを使ってみたい」と思った人のために、ここから、基本的な使い方を説明していきます。まずは、ライブラリを導入しましょう。

ライブラリの入手

Font Awesomeの公式サイト
Font Awesomeの公式サイト

FontAwesomeを利用するには、公式サイトから、ライブラリを入手しましょう。下記のリンクよりアクセスして、トップページの「Download」というリンクをクリックして下さい。

Font Awesome
Font Awesome
Font Awesomeの公式ウェブサイト。フォントの一覧、ドキュメント、更新情報など確認することができます。

ファイルの設置

zipファイルを解凍すると、いくつかのファイルが含まれています。そのうち、基本的に利用するのは、下記のファイルのみで大丈夫です。サーバーにアップロードする時は、font-awesome.cssと、fontsフォルダの位置関係(相対パス)が変わらないようにしましょう。

font-awesome-4.4.0.zip

  • font-awesome-4.4.0
    • css
      • font-awesome.css
    • fonts
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2
      • FontAwesome.otf

もし、font-awesome.cssと、fontsフォルダの位置関係(相対パス)が変わってしまう場合は、font-awesome.css内で調整して下さい。下記部分の、url()の中身の、相対パスの記述を変更して下さいね。この相対パスは、font-awesome.cssが起点となります。

CSS

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

スタイルシートの読み込み

他のスタイルシートファイルを読み込むのと同じ要領で、利用するHTMLのヘッダー内で、font-awesome.cssを読み込みましょう。

HTML

<head>
	<!-- FontAwesomeの読み込み -->
	<link href="./font-awesome.css" rel="stylesheet">
</head>

使い方

準備が用意できたら、フォントアイコンを早速使ってみましょう。

フォントアイコンの表示

使い方は簡単で、iタグなどで空要素を作り、class属性値に、faと、アイコンごとのクラス(Androidならfa-android)を付けるだけです。

HTML

<i class="fa fa-android"></i>

次のように表示されれば、成功です。もし上手く表示されない場合は、font-awesome.cssが読み込めてないか、または、font-awesome.cssの中の、fontsフォルダへの相対パスの記述が間違っている可能性が高いです。次に進む前に、直しておきましょう。

クラス名の調べ方

FontAwesomeのアイコン一覧
FontAwesomeのアイコン一覧

専用クラスを調べるには、公式ウェブサイトの、見本のページに移動して、使いたいアイコンをクリックして下さい。

FontAwesome The Icons
FontAwesome The Icons
FontAwesomeのアイコン一覧。各アイコンをクリックすると、専用クラスを確認することができます。
各アイコンの専用ページ
各アイコンの専用ページ

各アイコンの専用ページで、アイコンに対応したクラスを確認することができます。

大きさの変更

フォントアイコンを2倍、3倍と変更するには、fa-2x、fa-3xという専用クラスを追加してあげて下さい。fa-5xまであります。ちなみに、fa-lgを指定すると、1.33倍の大きさにすることができます。

HTML

<i class="fa fa-android fa-4x"></i>

自分の思い通りに変更したい場合は、独自のクラスを作って、スタイルシートで指定しちゃいましょう。FontAwesomeはテキストと同じなので、文字サイズを変更するのと同じ要領で、スタイルシートでfont-sizeを調整すればいいというわけです。

HTML

<i class="fa fa-android fa-large"></i>

CSS

.fa-large
{
	font-size: 100px ;
}

色の変更

色は自分で用意する必要があります。独自のクラスを作成し、別途、スタイルシートで指定して下さい。文字の色を変更するのと同じ要領です。

HTML

<i class="fa fa-android fa-4x fa-green"></i>

CSS

.fa-green:before
{
	color: #A4C639 ;
}

アニメーションを付ける

fa-spinという専用クラスを追加することで、回転アニメーションを付けることができます。

HTML

<i class="fa fa-android fa-spin"></i>

fa-spinではなく、fa-pulseにすると、8フレームで1回転するようになります。これは、fa-spinnerというアイコンに最適化して作られたアニメーションのようです。

HTML

<i class="fa fa-android fa-4x fa-pulse"></i>
<i class="fa fa-spinner fa-4x fa-pulse"></i>

角度を指定する

fa-rotate-90、fa-rotate-180、fa-rotate-270という専用クラスを追加することで、それぞれ、90度、180度、270度だけ、右方向に角度を変更することができます。

HTML

<i class="fa fa-android fa-rotate-270"></i>

反転させる

fa-flip-horizontalなら水平、fa-flip-verticalなら垂直方向に、反転させることができます。角度の変更ではなく、反転です。形がそれぞれ、上下、左右、逆になります。

HTML

<i class="fa fa-android fa-flip-vertical"></i>

同じ幅で表示する

フォントアイコンは1つ1つの大きさが違いますが、fa-fwという専用クラスを追加することで、同じ幅にすることができます。例えば、下記は、fa-fwを指定しなかった場合です。

HTML

<i class="fa fa-android"></i> Android
<br><i class="fa fa-mobile"></i> Mobile
  • Android
  • Mobile

指定することで、次のように綺麗に揃えられます。これは便利ですね〜。

  • Android
  • Mobile

これは、フォントアイコンの大きさを変更しても、同様に効果があります。

  • Android
  • Mobile

:before、:after要素に使いたい

専用クラスを使わずに、ユニコードを指定することで、:before要素、:after要素に指定して、フォントアイコンを利用することができます。

仕様だとHTMLが汚れる

私は個人的に、次のようなHTML、空タグが嫌いです。デザインはあくまでも、スタイルシートで実装するべきだと考えています。

HTML

<i class="fa fa-android fa-fw"></i> Android
Android

だから、フォントアイコンを使うのなら、次のようにHTMLに記述したいんですよね…。私と同じような感覚を持っている人がいたら、読み進めてみて下さい。

HTML

<span class="android">Android</span>
Android

FontAwesome用のクラスを用意する

まずは、独自のクラスを用意しましょう。サンプルでは、fbとしています。font-familyにFontAwesomeを指定すれば、フォントアイコンを使うことができます。

CSS

.fb:before
{
	font-family: 'FontAwesome' ;
	padding-right: 5px ;
}

各アイコンのユニコードを確認する

ユニコードを確認する
ユニコードを確認する

続いて、使いたいアイコンのユニコードを調べます。公式ウェブサイトの、各アイコンの専用ページにある「Unicode」という部分で確認することができます。上記なら、f213となります。

ユニコードを指定する

各アイコン専用の独自クラスを用意しましょう。例えば、fb-sellsyなどとしておきます。そして、contentプロパティに、ユニコードを指定します。エスケープを忘れないようにしましょう。次のようになります。

CSS

.fb-sellsy:before
{
	content: '\f213' ;
	color: #0174C8 ;
}

アイコンを表示する

これで、fbとfb-sellsyを指定した要素の手前に、フォントアイコンが表示されるようにできました。次のように使ってみましょう。このようにすれば、HTMLを崩さずに、自然にフォントアイコンを紛れ込ますことができるようになりました。

HTML

<span class="fb fb-sellsy">sellsy</span>というウェブサイトがかっこいいですね。
sellsyというウェブサイトがかっこいいですね。