やばい、Font Awesomeが素晴らしすぎて、アイコンをどんどん使いたい

こんばんは!@tomicciです。

最近、とあるキュレーションメディアの開発に携わらせて頂いて、HTML内でFont Awesomeを幾つも使っていて、やばい、こいつはめちゃくちゃ便利だなと実感した。

Font Awesome自体は何年も前からあるみたいだけど、一度も使ったことがなかった。。

今まで相当な時間をロスしてたよ。アイコンで消耗してたわ。

アイコンデータを落としてきたり、自分で作るのもいいけど、僕みたいにアイコンを作ったりするのが苦手な人は、Font Awesomeを導入すれば簡単に沢山のアイコンが使えるようになる!

しかも画像ではなくフォントと同じような扱いで、アイコンサイズをあらかじめ決められたクラス名や、CSSの「font-size」で調整したり、「color」で色まで調整でき実に素晴らしい・・・。

要するにアイコン画像をフリーで使えるWebフォントにしたものっすね。

まだ使ったことのない人のためにも、早速紹介してみよう。

Font Awesomeとは

やばい、Font Awesomeが素晴らしすぎて、アイコンをどんどん使いたい

Font Awesomeってのは、Webでよく使用されるアイコン(現在その数605個!)をWebフォントにしたもの。

CSSでアイコンの装飾が容易に設定できるし、ベクター画像なので画像の高解像度対応なんてのも気にしなくて済む。

指定できるクラス名も幾つかあって、大きさや色、アニメーション、角度などを簡単に指定することができる。

まさにAwesome(素晴らしい)!

使い方

サクッと使い方を説明しよう。

まずは公式サイトの「Download」から必要なソース一式をダウンロードする。

やばい、Font Awesomeが素晴らしすぎて、アイコンをどんどん使いたい

ダウンロード時に選択を求められたら、

No thanks, just download Font Awesome

でいいだろう。

ダウンロードしたzipファイルを解凍すると

「font-awesome-4.5.0」

といった名称になると思うので、

「font-awesome」

とかにリネームして(しなくてもOK)、サーバーに一式アップしよう。

Font Awesomeを使用したいページのheadタグ内で、

<link rel="stylesheet" href="{path}/font-awesome/css/font-awesome.min.css">

のようにCSSを読み込んであげれば、なんとこれだけで使用準備OK!!!

得意な人はGitHubからForkしておけば簡単に最新版にアップデートして使用できる。

アイコンのタグを取得

下記ページにアクセスし、使用したいアイコンをクリックすると、必要なHTMLタグが表示できる。

タグは、Font AwesomeのCSSを読み込んだページで使用したい箇所にコピペすればOK。

表示例

公式サイトから、使用例を拝借してみる。

ただし、iタグなんてのは普段使わないので、spanタグを使った。

カメラのアイコン

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

HTMLソースはこんな感じね。

<span class="fa fa-camera-retro fa-lg"></span>
<span class="fa fa-camera-retro fa-2x"></span>
<span class="fa fa-camera-retro fa-3x"></span>
<span class="fa fa-camera-retro fa-4x"></span>
<span class="fa fa-camera-retro fa-5x"></span>

メニューで使われそうなアイコン

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

ローダー画像とか動くアイコン

<span class="fa fa-spinner fa-spin"></span>
<span class="fa fa-circle-o-notch fa-spin"></span>
<span class="fa fa-refresh fa-spin"></span>
<span class="fa fa-cog fa-spin"></span>
<span class="fa fa-spinner fa-pulse"></span>

CSSで色も変えられるよ

<span class="fa fa-trophy fa-3x" style="color:#e8b536";></span>
<span class="fa fa-trophy fa-3x" style="color:#969595";></span>
<span class="fa fa-trophy fa-3x" style="color:#a58753";></span>

まとめ

今回はできるだけ簡潔にFont Awesomeの素晴らしさ、使い方を紹介したがどうだっただろうか。

アイコン画像にこだわって作りこむ、高解像度対応に四苦八苦するなっていうのはもはや過去の出来事

Font Awesomeを使って、サクッとWebサービスなりブログを公開しちゃおうよ。

時間は有限なんだからね

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景