MENU
  2. Web関連
  3. アイコン
  4. 便利なアイコンWebフォント「Font Awesome」

便利なアイコンWebフォント「Font Awesome」

アイコン
本ページは広告が含まれています

最近、私もよく使用するようになった、便利なアイコンWebフォント。
通常のフォントと同じように使える、便利なアイコンになります。

その中から、ダウンロードやCDNと利用方法も選べるアイコンWebフォント
「Font Awesome」をご紹介します。

スポンサーリンク
もくじ

アイコンWebフォント

通常のフォントと同じように、CSSで色を変えたりサイズを変えたりすることができ、フォントのためテキストと合わせやすいところが最大のメリットです。

このサイトでは、サイドバーのSNS（Feedlyを除く）やメニューバーに使用しています。

Font Awesome

icon font-1 Quotation : Font Awesome

数多い、アイコンWebフォントの中から「Font Awesome」を選ぶ理由は、使いやすさです。
大抵のアイコンWebフォントは、ダウンロードして使用するWebサイトのサーバーにアップロードする必要がありますが、この「Font Awesome」はその方法以外に、CDNを利用することができます。

CDNとは

CDNとは、コンテンツ・デリバリー・ネットワーク（Contents Delivery Network）の略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。

具体的には、Webサイトにある画像や動画・CSSなどの静的コンテンツを、Webサイトが管理されている「サーバー」とは、別のサーバーにキャッシュし、 そのサーバーが、代わりに配信することで、負荷が分散され、Webサイトの表示速度の向上にもなる仕組みになります。

ここでいう「別のサーバー」というのが、「CDNサーバー」です。
via :  ゆとり世代のブログ運営論

CDNサーバーにキャッシュされた、アイコンWebフォントを利用することができます。

使用方法

CDNを利用する方法は、Wordpressならテーマのheader.phpの<head></head>の間に

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

と、コードを入れます。
あとは、アイコンWebフォントを使用したい箇所にマークアップをするだけ。

例えばbluetoothのアイコンWebフォントを利用する場合は、

<i class="fa fa-bluetooth"></i>

とマークアップすると、こんな感じに表示されます。→

Larger Icons

Larger Iconsも用意されています。CSSにてサイズを変更することも可能ですが、マークアップをする際に以下のように「fa-2x」などを入れるとサイズを変更することもできます。

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

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

Fixed Width Icons

マークアップ時に「fa-fw」を入れることで、固定幅にすることができます。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
  Home  Library  Applications  Settings

List Icons

マークアップ時に「fa-ul」「fa-li」を入れることで、リストアップすることができます。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
  • List icons
  • can be used
  • as bullets
  • in lists

あとがき

アイコンの数も、私が使用し始めた頃よりもどんどん増えてきています。
また、アルファベット順に並んでいるので探しやすく、検索もできます。

hover時のカラーも、フォントと同じようにCSSでカラーを指定するだけなので、とても使い勝手がいいです。

ご利用されたことの無い方は、一度お試しを…

アイコン
Icon
よかったらシェアしてね！
  • URLをコピーしました！
もくじ