話題の記事

WebアイコンフォントFont AwesomeのSCSS版を使ってみる

野中龍一

2013.08.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。

Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。

注意

今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたいと思います。SCSS版はコンパイルする環境が必要です。まだ使ったことのない方はこちら「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」を参考に環境を準備してください。

Webアイコンフォントとは

Webでピクトグラムのような小さなアイコンを使うことは良くあると思います。サイトによっては何十種類というアイコンを使ってたりします。よくCSS Spriteで1つにまとめたりしますよね。

振る舞いに合わせてボタンやリンクなどの状態を変えたい時、それに合わせたアイコンもさらに必要になってきます。
例えば、20個のアイコンに対してnormal, hover, active, visited, disableの5つの状態が必要になったとき作らなければならないアイコンの数は100個です。

Retinaディスプレイ用の高解像度版（1.5倍と2倍）も含めると300個といったところでしょうか。こうなるとファイルサイズも大きくなりがちです。こんな働き方してたら負けかなと思ってます。

そんな時にすべて解決してくれるのがフォントの1文字1文字をベクターアイコンに置き換えたWebフォントアイコンってやつです。言ってしまえばテキストと同じなのでCSSのcolor、font-weightやtext-shadowやmask-imageプロパティが使えます。ベクターなのでRetinaディスプレイで拡大しても美しいし、アイコンの数によっては画像よりファイルサイズを抑えられます。

IEの対応

Font AwesomeはIE7に対応しています。
IEのConditional Comment（条件付きコメント）を使いIE7専用のCSSを読み込むことで対応します。

<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

SCSS版でIEにどう対応するかはまだ調査できていないので、別の機会に紹介したいと思います。

Font Awesomeとは

Font AwesomeはBootstrapでも使われている361個のアイコンが利用できるフリーのWebアイコンフォントです（バージョン3.2.1）。Bootstrapのために作られたものですがBootstrapなしでも簡単に利用することができます。

Font Awesomeのメリット

1フォントで361のアイコン
CSSでコントロールできる（LESS、Sass対応）
自由な拡大・縮小
商業利用可
IE7サポート
Retinaディスプレイ対応
Bootstrapのために作られた
チートシートあり
スクリーンリーダー対応
サブセット対応（別プロジェクト：http://www.icnfnt.com/）

361個のアイコン

どんなアイコンがあるかはこちらFont Awesome The Iconで確認できます。アイコンは今のところ7つのカテゴリーに分けられているようです。

また、すべてのアイコンはチートシートで確認することができます。

361個のフォント

ライセンス

フォント：SIL Open Font License（再販しない限り自由。詳しく）
ソースコード：The MIT License（詳しく）
ドキュメント：CC BY 3.0（詳しく）

Font Awesomeのダウンロード

Font Awesomeはとても簡単に導入することができます。もちろんBootstrapに依存しません。CSS版とLESS版は公式のGet Startedを参考にすればすぐに導入できます。今回は公式資料にないSCSS版を利用してみました。

まずは、以下のリンクからFont Awesomeをダウンロードしましょう。ダウンロードしたファイルの中はこんな風になっています。

font-awesome/
├── css
│   ├── font-awesome-ie7.css
│   ├── font-awesome-ie7.min.css
│   ├── font-awesome.css
│   └── font-awesome.min.css
├── font
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   └── fontawesome-webfont.woff
├── less
│   ├── bootstrap.less
│   ├── core.less
│   ├── extras.less
│   ├── font-awesome-ie7.less
│   ├── font-awesome.less
│   ├── icons.less
│   ├── mixins.less
│   ├── path.less
│   └── variables.less
└── scss
    ├── _bootstrap.scss
    ├── _core.scss
    ├── _extras.scss
    ├── _icons.scss
    ├── _mixins.scss
    ├── _path.scss
    ├── _variables.scss
    ├── font-awesome-ie7.scss
    └── font-awesome.scss

Font Awesomeを使うために必要なファイルだけを読み込む

ダウンロードしたものをそのまま使うのは無駄なファイルが多いためSCSS版の利点である必要なファイルだけを整理して利用しましょう。SCSS版で必要になるのはfont/とscss/にあるファイルだけです。また、scss/の中でもこれらのファイルは以下の理由で不要です。

scss/_bootstrap.scss Bootstrapは使わないため不要
scss/font-awesome-ie7.scss IE7向けの読み込みは今回解説から省くため
scss/font-awesome.scss @importが記述されたファイルで別ファイルに読み込むため

必要なファイルをチェックする

公式が用意しているfont-awesome.scssには以下のように@importを使ってファイルを読み込んでいます。とりあえず@import "bootstrap";を除いた6つを読み込むようにすれば良さそうです。

font-awesome.scss

/*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ...省略
 */

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "bootstrap";
@import "extras";
@import "icons";

例としてこのようなファイル構成にしてみました。

example-font-awesome/
├── css
│   └── style.css
├── fonts
│   └── font-awesome
│       ├── FontAwesome.otf
│       ├── fontawesome-webfont.eot
│       ├── fontawesome-webfont.svg
│       ├── fontawesome-webfont.ttf
│       └── fontawesome-webfont.woff
├── scss
│   ├── font-awesome
│   │   ├── _core.scss
│   │   ├── _extras.scss
│   │   ├── _icons.scss
│   │   ├── _mixins.scss
│   │   ├── _path.scss
│   │   └── _variables.scss
│   └── style.scss
├── config.rb
└── index.html

これ以降はSCSSのコンパイルがすでに可能な状態として進めます。config.rbの設定を忘れずに行ってください。

必要なファイルだけを@importする

公式が用意しているfont-awesome.scssを@importしても利用することはできますが、font-awesome.cssもコンパイルされてしまい無駄です。必要なパーシャルファイル（_から始まる読み込み専用ファイル）のみ読み込みたいですよね。

そこで上記ファイル構成を前提に別に用意したstyle.scssにFont Awesomeに必要なパーシャルファイルを読み込みます。

scss/style.scss

@import "font-awesome/variables";
@import "font-awesome/mixins";
@import "font-awesome/path";
@import "font-awesome/core";
@import "font-awesome/extras";
@import "font-awesome/icons";

最後にFont Awesomeのフォントファイル類を別のディレクトリに移しているのでパスの変更が必要です。scss/font-awesome/variables.scssを開いて、$FontAwesomePath: "../font" !default;の部分を変更します。

// Variables
// --------------------------

$FontAwesomePath: "../fonts/font-awesome" !default;
$FontAwesomeVersion: "3.2.1" !default;
$borderColor: #eeeeee !default;
$iconMuted: #eeeeee !default;
$iconLight: white !default;
$iconDark: #333333 !default;
$icons-li-width: (30em/14);
...

scss/font-awesome/variables.scssを変更したくないという場合はscss/style.scssから上書きさせることもできます。こちらのやり方をオススメします。

//Override Font Awesome path 
$FontAwesomePath: "../fonts/font-awesome";

//import font-awesome
@import "font-awesome/variables";
@import "font-awesome/mixins";
@import "font-awesome/path";
@import "font-awesome/core";
@import "font-awesome/extras";
@import "font-awesome/icons";

コンパイルして正しく表示されるか試してみる

それでは、SCSSをコンパイルして表示されるかチェックしてみましょう。index.htmlファイルを作り、コンパイルされたstyle.cssを読み込みます。

index.html

公式のやり方の通り、iタグにclass指定でアイコンを指定します。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Example: Font Awesome</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<p><i class="icon-comment"></i> Hello World</p>
</body>
</html>

プレビュー

無事表示されました。

サンプルのプレビュー

拡大してみると・・・

拡大表示

さすがベクター、拡大しても美しいままです。

公式に用意されているExampleの動作確認

公式で用意されているExampleがSCSS版でどの程度動くのかサンプルファイルを用意して試してみました。実際の表示はこちらのサンプルを確認してください。結果は以下の通りです。

Inline Icons：○
Larger Icons：○
Bordered & Pulled Icons：○
Buttons：×
Button Groups：×
Button Dropdowns：×
Bulleted Lists：○
Navigation：×
Prepended & Appended Form Inputs：×
Animated Spinner：○
Rotated & Flipped：○
Stacked Icons：○

どうやらいくつかの機能はBootstrapを前提としているため、Exampleの通りにはいかないものもあるようです。

Inline Icons: ○

Inline Icon Example

<p><i class="icon-comment"></i> Hello World</p>
<p><a href="#" class="icon-comment"> Hello World</a></p>

Inline IconはCSS :beforeとcontentプロパティが使われています。

Larger Icons: ○

Larger Icon Example

<p>
	<i class="icon-comment"></i>
	<i class="icon-comment icon-large"></i>
	<i class="icon-comment icon-2x"></i>
	<i class="icon-comment icon-3x"></i>
	<i class="icon-comment icon-4x"></i>
</p>

Bordered & Pulled Icons: ○

Bordered & Pulled Icons Example

<p class="clear"><i class="icon-quote-left icon-4x pull-left icon-muted"></i>
	Use a few of the new styles together ... lots of new possibilities.</p>
<p class="clear"><i class="icon-flag icon-4x pull-left icon-border"></i>
	Use a few of the new styles together ... lots of new possibilities.</p>

Buttons: ×

Buttons Example

<p class="clear">
	<a class="btn" href="#">
		<i class="icon-repeat"></i> Reload</a>
	<a class="btn btn-success" href="#">
		<i class="icon-shopping-cart icon-large"></i> Checkout</a>
	<a class="btn btn-large btn-primary" href="#">
		<i class="icon-comment"></i> Comment</a>
	<a class="btn btn-small btn-info" href="#">
		<i class="icon-info-sign"></i> Info</a>
	<a class="btn btn-danger" href="#">
		<i class="icon-trash icon-large"></i> Delete</a>
	<a class="btn btn-small" href="#">
		<i class="icon-cog"></i> Settings</a>
	<a class="btn btn-large btn-danger" href="#">
		<i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1</a>
	<a class="btn btn-primary" href="#">
		<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
</p>

Button Groups: ×

Button Groups Example

<div class="btn-group">
	<a class="btn" href="#"><i class="icon-align-left"></i></a>
	<a class="btn" href="#"><i class="icon-align-center"></i></a>
	<a class="btn" href="#"><i class="icon-align-right"></i></a>
	<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>

Button Dropdowns: ×

Button Dropdowns Example

<div class="btn-group open">
	<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
	<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
		<span class="icon-caret-down"></span></a>
	<ul class="dropdown-menu">
		<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
		<li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
		<li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="i"></i> Make admin</a></li>
	</ul>
</div>

Bulleted Lists: ○

Bulleted Lists Example

<ul class="icons-ul">
	<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
	<li><i class="icon-li icon-ok"></i>Buttons</li>
	<li><i class="icon-li icon-ok"></i>Button groups</li>
	<li><i class="icon-li icon-ok"></i>Navigation</li>
	<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
	<li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li>
</ul>

Navigation: ×

Navigation Example

<ul class="nav nav-list">
	<li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
	<li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
	<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
	<li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li>
</ul>

Prepended & Appended Form Inputs: ×

Prepended & Appended Form Inputs Example

<form>
	<div class="input-prepend">
		<span class="add-on"><i class="icon-envelope"></i></span>
		<input class="span2" type="text" placeholder="Email address">
	</div>
	<div class="input-prepend">
		<span class="add-on"><i class="icon-key"></i></span>
		<input class="span2" type="password" placeholder="Password">
	</div>
</form>

Animated Spinner: ○

Animated Spinner Example

<p><i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...</p>

Rotated & Flipped: ○

Rotated & Flipped Example

<p>
	<i class="icon-shield"></i>  normal<br>
	<i class="icon-shield icon-rotate-90"></i>  icon-rotate-90<br>
	<i class="icon-shield icon-rotate-180"></i>  icon-rotate-180<br>
	<i class="icon-shield icon-rotate-270"></i>  icon-rotate-270<br>
	<i class="icon-shield icon-flip-horizontal"></i>  icon-flip-horizontal<br>
	<i class="icon-shield icon-flip-vertical"></i>  icon-flip-vertical
</p>

Stacked Icons: ○

Stacked Icons Example

<p>
	<span class="icon-stack">
		<i class="icon-check-empty icon-stack-base"></i>
		<i class="icon-twitter"></i>
	</span>
	icon-twitter on icon-check-empty<br>
	<span class="icon-stack">
		<i class="icon-circle icon-stack-base"></i>
		<i class="icon-flag icon-light"></i>
	</span>
	icon-flag on icon-circle<br>
	<span class="icon-stack">
		<i class="icon-sign-blank icon-stack-base"></i>
		<i class="icon-terminal icon-light"></i>
	</span>
	icon-terminal on icon-sign-blank<br>
	<span class="icon-stack">
		<i class="icon-camera"></i>
		<i class="icon-ban-circle icon-stack-base text-error"></i>
	</span>
	icon-camera on icon-ban-circle
</p>

最後に

Font Awesomeはアイコンの種類も多くどれもクオリティが高いので実用的なWebアイコンフォントだと思います。bootstrapで使われているということもあり今後のバージョンアップにも期待が持て安心して使えるのが良いですね。どうやらアップデートで新しいアイコンも追加されているようです。このブログにも導入しようと思います。

以上、Font Awesomeの紹介でした。

WebアイコンフォントFont AwesomeのSCSS版を使ってみる

注意

Webアイコンフォントとは

IEの対応

Font Awesomeとは

Font Awesomeのメリット

361個のアイコン

ライセンス

Font Awesomeのダウンロード

Font Awesomeを使うために必要なファイルだけを読み込む

必要なファイルをチェックする

font-awesome.scss

必要なファイルだけを@importする

scss/style.scss

コンパイルして正しく表示されるか試してみる

index.html

プレビュー

公式に用意されているExampleの動作確認

Inline Icons: ○

Larger Icons: ○

Bordered & Pulled Icons: ○

Buttons: ×

Button Groups: ×

Button Dropdowns: ×

Bulleted Lists: ○

Navigation: ×

Prepended & Appended Form Inputs: ×

Animated Spinner: ○

Rotated & Flipped: ○

Stacked Icons: ○

最後に

イベント

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜AWS/システムアーキテクト/Android案件特集〜 を開催します

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制 はじめの一歩

関連記事

技術選定の参考にbulletproof-reactを見てみる

Backlogで「リンク付きの課題キーと件名」を取得するボタンを追加するChrome拡張機能を作ってみた

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS/システムアーキテクト/Android案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩