Font Awesome -使い方-

font_awesomeロゴ

今回はフォントアイコンの「Font Awesome」の使い方を記載したいと思います。
メリットの1つですが、種類が豊富な為、自分でアイコンを制作する時間は勿論、他で探す必要もなくなり制作の時間短縮になると思います。
このブログ内でも、Category Menuの部分など所々に使用させて頂いています。

メリット

  • 無料
  • 軽い
  • 種類が豊富
  • 大きさや色をCSSで簡単に変更出来る
  • ベクター形式なので、スマホ等どの端末でも綺麗に表示

デメリット

  • 色の指定は単色のみ

1.Font Awesome -準備-

Font Awesomeのアイコンをサイトで使用する為には2種類の方法があります。

(1)CDNを使用

以下のコードをhead要素内に追加します。

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

(2)ファイルをDLして使用

Font Awesomeのサイトに行きます。

Font Awesome Download

Downloadをクリック。
下記画像部分がモーダルウインドウで出来てきます。

Font Awesome Download

緑枠で囲った部分をクリック。
Download画面に移行しますので、出てきたzipファイルを保存します。

解凍したファイルの中身はこんな感じです。

Font Awesome Download

cssフォルダとfontsフォルダを自分のサイトに設置します。

head要素内に追加するコードは、

<link href="css/font-awesome.min.css" rel="stylesheet">
hrefの部分は自分のサイトに合わせて変更します。

個人的には簡単なCDNがオススメです。
*ただし、ネットに繋がっていない場合やCDNにトラブルが起こった時は使用出来ません。

2.Font Awesome -使い方-

使用したいアイコンをFont Awesome iconへ探しに行きます。

Font Awesome Download

使いたいアイコンをクリック。

Font Awesome Download

上記画像の緑枠内のコードを使用します。

<i class="fa fa-facebook" aria-hidden="true"></i>

このコードを使いたい場所に挿入すればOKです。
このコードの中のclassをイジると、様々なコトが出来ます。

例えば色を変えたければ・・・

cssファイル

.fa-facebook{
    color:blue;
}

全ての.fa-facebookではなく、その部分の.fa-facebookだけ色を変えたければ・・・

HTMLファイル

<i class="fa fa-facebook blue" aria-hidden="true"></i>

cssファイル

.blue{
    color:blue;
}

と言った形で、classを追加して色を変えたり・・・

HTMLファイル

<i class="fa fa-facebook" style="color:blue;" aria-hidden="true"></i>

と言った形で、直接styleで色を指定するコトも出来ます。

コード内に「aria-hidden=”true”」とありますが、デザインとしてだけアイコンを使う場合であれば、気にしないでそのままにしておきましょう。

3.Font Awesome -アイコンサイズ-

アイコンの大きさを変えるclass

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

これらをclass内に追加することで簡単にサイズを変えるコトが出来ます。

4.Font Awesome -アイコン表示幅-

Font Awesomeのサイトからコピーしてきたままのコードだとアイコンとテキストの間にスペースがなく、くっついた状態になっています。

それを解決するためのclassは・・・

fa-fw

とりあえずこのclassは記載しておいた方が良いと思います。

5.Font Awesome -リスト表示方法-

リストにアイコンを使いたい場合は・・・

ul要素のclassに「fa-ul」li要素のclassに「fa-li」を追加します。

<ul class="fa-ul">
    <li><i class="fa fa-hand-o-right fa-li"></i><a href="#">concrete5</a></li>
    <li><i class="fa fa-hand-o-right fa-li"></i><a href="#">Dropplets</a></li>
    <li><i class="fa fa-hand-o-right fa-li"></i><a href="#">Mac</a></li>
    <li><i class="fa fa-hand-o-right fa-li"></i><a href="#">Thunderbird</a></li>
</ul>

6.Font Awesome -その他-

他にもアイコンをアニメーションで動かしたり、回転させるコトなどが出来るのですが、基本的には上記に記した内容で十分活用出来ると思います。

Life Manual Navigation

Categories: Font Awesome