1. >
  2. >

Font Awesome Iconsの詳細な使い方。簡単にWEBフォントが使えて便利

 

fa icon

Font Awesome Icons

CSSファイルを読み込み、HTMLタグにclassを指定するだけで簡単にフォントが使えるWEBフォントアイコンです。手軽に利用できて、豊富なアイコンが用意されているため、利用しているサイトは多いです。

今回は、Font Awesome Iconsの導入方法・使い方を紹介します。

サンプル

いくつかサンプルを表示してみます。画像ではく、テキストですので拡大しても画質が悪いということはありません。テキスト同様に色やフォントサイズを変えることもできます。

         

準備

CDNが用意されているので以下のコードをhead内に記述するだけで利用可能になります。

HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

CDNを利用しない方法も紹介します。Font Awesome公式サイトからライブラリをダウンロードします。cssとfontsフォルダをコピーして、cssフォルダにあるfont-awesome.min.cssを読みこむだけで利用可能になります。

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

基本的な使い方

iなどのタグにclassを指定します。faは必ず必要で、その後に表示させたいアイコンのclassを指定します。アイコンのclass名は公式アイコンリストに記載されています。

HTML
<i class="fa fa-html5"></i>

拡大

fa-lg, fa-2x, fa-3x, fa-4x, fa-5xのclassを追加することで大きなアイコンを表示させることができます。

HTML
<i class="fa fa-html5"></i> 1倍
<i class="fa fa-html5 fa-lg"></i> 1.33倍
<i class="fa fa-html5 fa-3x"></i> 3倍
1倍
1.33倍
3倍

アイコン幅を固定

fa-fwを追加すると一定のアイコン幅に設定することもできます。ナビゲーションリストで役立ちます。

HTML
<i class="fa fa-firefox"></i> Firefox
<i class="fa fa-chrome"></i> Chrome
<i class="fa fa-firefox fa-fw"></i> Firefox (固定)
<i class="fa fa-chrome fa-fw"></i> Chrome (固定)
Firefox
Chrome
Firefox (固定)
Chrome (固定)

回転&反転

fa-rotate-*で回転。fa-flip-*で反転します。

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

アニメーション

fa-spinで回転します。fa-pulseで8段階で回転します。fa-pulsefa-spinnerアイコンのための機能だそうです。

HTML
<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>

アイコンを重ねる

アイコンを重ねるには、fa-stackを親要素に指定し、fa-stack-1xが通常サイズ、fa-stack-2xが大きいサイズのアイコンとなります。fa-inverseを利用することでアイコンの色を反転させることができます。

HTML
<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>
<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>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
クラウドソーシング「ランサーズ」
  • B!