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

Font Awesomeは519種類のアイコンをWebアイコンとして利用できるだけでなく、フォトショップなどでアイコンをデザインする場合にも役にたちそうですね。

サイトからCSSで読み込みこむ

Bootstrap CDNでコードを確認し、header部分に記載する

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

表示する

Icon 一覧ページで使いたいアイコンをクリックし、HTML 要素をコピー

例）fa-camera
<i class="fa fa-camera"></i>

表示方法のカスタマイズ

サイズを変える

class に fa-lg fa-2x fa-3x fa-4x fa-5x を入れることで大きくなります。

fa-lg（ 約1,33倍 ）
fa-2x（ 2倍 ）
fa-3x（ 3倍 ）
fa-4x（ 4倍 ）
fa-5x（ 5倍 ）

    <i class="fa fa-area-chart"></i>
    <i class="fa fa-area-chart fa-lg"></i>
    <i class="fa fa-area-chart fa-2x"></i>
    <i class="fa fa-area-chart fa-3x"></i>
    <i class="fa fa-area-chart fa-4x"></i>
    <i class="fa fa-area-chart fa-5x"></i>

色を変える

CSSを使って装飾ができます。

    <p style="color: green;">
       <i class="fa fa-flag"></i> 旗アイコン
    </p>

表示幅を統一

class にfa-fwを加える

fa-fwが無いの場合、アイコンの位置がバラバラになりますが、
fa-fwをつけるとicon 部分に横幅が付きます。

    <i class="fa fa-at fa-fw"></i>angellist
    <i class="fa fa-bell-slash fa-fw"></i>area-chart
    <i class="fa fa-bell-slash-o fa-fw"></i>at
    <i class="fa fa-bicycle fa-fw"></i>bell-slash

リストで利用する場合

ul の class に fa-ul をつけ、 li の class に fa-li をつける

    <ul class="fa-ul">
    <li><i class="fa-li fa fa-binoculars fa-fw"></i>binoculars</li>
    <li><i class="fa-li fa fa-birthday-cake fa-fw"></i>area-chart</li>
    <li><i class="fa-li fa fa-bus fa-fw"></i>at</li>
    <li><i class="fa-li fa fa-calculator fa-fw"></i>bell-slash</li>
    </ul>

角度を変える

classに下記を追加する。
fa-rotate-角度、fa-flip-horizontal 、fa-flip-vertical

    <i class="fa fa-cutlery"></i>
    <i class="fa fa-cutlery fa-rotate-90"></i>
    <i class="fa fa-cutlery fa-rotate-180"></i>
    <i class="fa fa-cutlery fa-rotate-270"></i>
    <i class="fa fa-cutlery fa-flip-horizontal"></i>
    <i class="fa fa-cutlery fa-flip-vertical"></i>

CSSとして使う

CSS上でフォントコードを指定するには、Font Awesomeのアイコンコードで使いたいアイコンを選びます。

なお、&#xは\になるので注意が必要です。
例） 　⇒\f138

1.見出しで使う

    //css
    .tit-icon:before {
      font-family: 'FontAwesome';
      content: "\f04d";
      color: #66CC99;
      margin-right: 3px; /* アイコンと要素の空き調整 */
    }

    //html
    <h5 class="tit-icon"> 見出し</h5>