Font Awesomeの使い方

Tag:

「Font Awesome」は、Webでよく利用する様々なアイコンを Webフォントとして利用できるようにしたサービスです。通常のフォントであれば『文字』が格納されてますが、アイコン型のWebフォントではフォントに『アイコン図形』が格納されてます。なので、アイコンを画像ではなくフォントとして扱うことができます。

つまり、CSSでアイコンを調整できます。font-sizeで大きさを変更したり、colorで色の変更をすることが可能です。

利用手順

CDNを使った利用手順です。

作業内容
1 head内に下記コードを記述。CDN経由でFont AwesomeのCSSを取り込みます。


URLについては、http://fontawesome.io/get-started/で確認してください。

2 [http://fontawesome.io/icons/] にアクセスして使いたいアイコンを選択。
3 iタグを使い表示させたい場所に記述。

<i class="fa fa-wordpress"</i> wordpress
<i class="fa fa-github"></i> github
結果
 wordpress
 github
4 CSSで大きさや色を調整

<i class="fa fa-wordpress" style="font-size:20px;color:#23AC0E"></i> wordpress
<i class="fa fa-github" style="font-size:20px;color:#DA5019"></i> github
結果
 wordpress
 github

さらに活用

http://fontawesome.io/examples/で活用例を確認できます。

拡大

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
結果
 fa-lg
 fa-2x

アニメーション

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
結果

Loading...


Loading...

回転

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
結果
 normal
fa-rotate-90

アイコンを重ねる

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

<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-ban on fa-camera

fa-stackに「position:relative」のスタイルが適用されてます。
fa-stack-2x、fa-stack-1xに「position:absolute」のスタイルが適用されてます。

結果
fa-flag on fa-circle
fa-ban on fa-camera

wordpressの記事で利用する場合は、自動brが入らないようにhtmlを改行しないで書きます。

スポンサーリンク