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

デザイン

こんばんは!とみっちです。

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

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

今まで相当な時間をロスしていました。

フリーのアイコンデータを探してダウンロードしたり、自分で作成するのもいいんですけど、僕みたいにアイコンを作ったりするのが苦手な人は、Font Awesomeを導入すれば簡単に沢山のアイコンが使えるようになりますよ!

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

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

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

Font Awesomeとは

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

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

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

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

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

使い方

サクッと使い方を説明してみましょう。

使い方は、ソース一式をあらかじめダウンロードしておくか、CDNサーバーから読み込む方法があります。

WordPressだと、テーマがFont Awesomeを読み込む設定になっているものがありますが、そうでない場合はプラグインで読み込むこともできます。

Better Font Awesome」というWordPressプラグインを使うと、ファイルを読み込む設定も可能で、投稿画面でアイコンを選択できて便利ですよ。

ファイルを一式ダウンロードする方法

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

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

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

No thanks, just download Font Awesome

でいいでしょう。

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

「font-awesome-x.x.x」

といったバージョン付きの名称のフォルダができあがります。

「font-awesome」

のようにリネームするなどして、サーバーに一式アップロードしましょう。

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

<link rel="stylesheet" href="【パスを指定】/font-awesome/css/font-awesome.min.css">

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

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

CDNサーバーから読み込む方法

CDNサーバーのFont Awesomeを利用する場合は、以下のように読み込んで使用します。

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

 

最新のバージョンはこちらで確認できます。

Font Awesome
The recommended CDN for Font Awesome

アイコンのタグを取得

Font Awesomeの公式サイトにアクセスし、使用したいアイコンをクリックすると、必要なHTMLタグが表示できます。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

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

表示例

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

iタグじゃなくて、spanタグとか他のタグを使ってもOKです。

カメラのアイコン

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サービスを公開しちゃいましょう。

時間は有限ですしね!

タイトルとURLをコピーしました