Font Awesome Iconsの詳細な使い方。簡単にWEBフォントが使えて便利
Font Awesome Icons
CSSファイルを読み込み、HTMLタグにclassを指定するだけで簡単にフォントが使えるWEBフォントアイコンです。手軽に利用できて、豊富なアイコンが用意されているため、利用しているサイトは多いです。
今回は、Font Awesome Iconsの導入方法・使い方を紹介します。
サンプル
いくつかサンプルを表示してみます。画像ではく、テキストですので拡大しても画質が悪いということはありません。テキスト同様に色やフォントサイズを変えることもできます。
準備
CDNが用意されているので以下のコードをhead内に記述するだけで利用可能になります。
<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を読みこむだけで利用可能になります。
<link rel="stylesheet" href="css/font-awesome.min.css">基本的な使い方
iなどのタグにclassを指定します。faは必ず必要で、その後に表示させたいアイコンのclassを指定します。アイコンのclass名は公式アイコンリストに記載されています。
<i class="fa fa-html5"></i>拡大
fa-lg, fa-2x, fa-3x, fa-4x, fa-5xのclassを追加することで大きなアイコンを表示させることができます。
<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.33倍
3倍
アイコン幅を固定
fa-fwを追加すると一定のアイコン幅に設定することもできます。ナビゲーションリストで役立ちます。
<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 (固定)Chrome
Firefox (固定)
Chrome (固定)
回転＆反転
fa-rotate-*で回転。fa-flip-*で反転します。
<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-verticalfa-rotate-90
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
アニメーション
fa-spinで回転します。fa-pulseで8段階で回転します。fa-pulseはfa-spinnerアイコンのための機能だそうです。
<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を利用することでアイコンの色を反転させることができます。
<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-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
