無料でアイコン使い放題!FontAwesomeの使い方まとめ

Pocket

Bootstrapと一緒によく使われるのが、FontAwesome。なんと500以上のアイコンが無料で使い放題。しかも画像とは違うので一つずつダウンロードして、imageフォルダにアップロードして・・・という面倒なことをする必要がありません。

クラス名を付け加えるだけなので使い方も非常に簡単。この記事ではFontAwesomeをもっと使いこなすための便利な使い方についてまとめてみました。

FontAwesomeを使うための準備

FontAwesomeを使用するにはHTMLファイルのhead内にCSSを読み込む必要があります。一番簡単なのはCDNを使う方法。以下のコードを付け加えるだけで使用できます。

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

ファイルをダウンロードして使う場合は必要なファイルを公式サイトからダウンロードします。

FontAwesome
Font_Awesomeをダウンロード

ダウンロードできたら、font-awesomeフォルダをプロジェクトフォルダ内に移動してhead内でlinkします。

<link rel="stylesheet" href="site-name/font-awesome/css/font-awesome.min.css">

これで準備完了。

FontAwesomeの使い方まとめ

iタグにクラス名を付け加える

FontAwesomeを使うにはiタグにアイコンごとに指定されたクラス名を付け加えるだけなのですごく簡単。このときfaをつけるのを忘れないようにしましょう。

fa-camera-retro

<i class="fa fa-camera-retro"></i> fa-camera-retro

FontAwesomeのアイコンのスタイルを変更する方法

FontAwesomeのアイコンはフォントとしてスタイルすることができます。

fa-star

<style>
  i {
    color: #B9B32A;
    font-size: 30px;
  }
</style>
<i class="fa fa-star">

アイコンのサイズを変更する方法

アイコンのサイズはCSSスタイルで変更することもできますが、FontAwesomeで用意されたクラスを使うこともできます。用意されているクラスは以下の通り。

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

リストでアイコンを使う

アイコンごとに微妙に幅が違っているため、リストなどで使用すると見た目が悪くなることもあります。

  • Home
  • Library
  • Applications
  • Settings

これを修正するには、.fa-fwを追加すればOK。アイコンごとに異なる幅を修正してくれます。

  • Home
  • Library
  • Applications
  • Settings
<ul>
  <li><i class="fa fa-home fa-fw"></i>Home</li>
  <li><i class="fa fa-book fa-fw"></i>Library</li>
  <li><i class="fa fa-pencil fa-fw"></i>Applications</li>
  <li><i class="fa fa-cog fa-fw"></i>Settings</li>
</ul>

また、.fa-ulを使えばリストで表示される丸い点を削除できます。

  • List icons
  • can be used
  • as bullets
  • in lists
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

アイコンをアニメーションで動かす

画面の読み込みなどでくるくる回るアニメーションがよくありますが、FontAwesomeでは.fa-spinを使うことで実装できます。また、.fa-pluseを使うことで点滅して回転するアニメーションを作ることもできます。





<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

アイコンの向きを変える

アイコンの向きを変えたり、左右上下を反転させることも可能。これもクラス名を付け加えるだけです。

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

アイコンを組み合わせて使う

アイコンを複数組み合わせて使用することも可能。spanで囲って下地にしたいものを記述した後、上に持ってくるアイコンを追加します。

Font_Awesome_stack
fa-flag on fa-circle

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle

Bootstrapのコンポーネントと一緒に使う

Bootstrapのボタンやフォームと組み合わせることもできます。アイコンを使うことで文字だけでなく、画像でも意味を伝えることができるのでUXの向上にもつながりますね。

Font_Awesome_bootstrap

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>