TechNote

事務屋のおぼえがき

BootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件

しばらくニュースをチェックできずにいて何気なくFontAwesomeのサイトを覗いてみたら、FontAwesome4.0.0が公開されていました。ということで、4.0.0の特徴(変更点)と使い方のメモを残します。


f:id:kojikoji75:20131027194627j:plain

1.念のため、FontAwesomeとは


FontAwesomeは以下のような特徴をもつWebフォントです。

  • 370個の豊富なアイコン
  • テキストであるため以下のようなメリットがある
    • サイズを大きくして表示しても画質が落ちない(Retinaディスプレイでもハッキリ)
    • CSSで色やサイズを自由に変えられる
    • CSSでドロップシャドウなどの効果が簡単に付けられる


※FontAwesomeの導入編については「非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた」に書いていますのでご参考までに。


よく「エンジニアはデザインが苦手」と言われたりするようですが、最近ではCSSフレームワークやFontAwesomeのようなフォントセットが多く登場したため、デザイン面で苦労するという話は減少傾向にあるのではないでしょうか。


個人的には、アイコンリストを眺めているだけで「作成中のWebアプリのあの部分に使えるんじゃないかなー」などとイマジネーションが刺激され、生産欲を掻き立ててくれます。この「生産欲を掻き立てる」というのが、案外一番大きな導入メリットかもしれません。

f:id:kojikoji75:20131027195605j:plain





2.4.0.0での変更点

  • 370個に増量
  • コード部分での大幅な変更が加えられて、後方互換性なし
  • クラス名のプレフィックスがicon-からfa-に変更
<i class="icon-○○○"></i> 前バージョンまでの書き方
<i class="fa fa-○○○"></i> 4.0の書き方

注意点としては、例えばVer3.3を使用していた人が、4.0に移行しようとして、html内の文字列「icon」を「fa fa」に全部テキスト置換するなどして使用できるというものでもないようです。

具体例を挙げると、Ver3.3で

icon-warning-sign
icon-download-alt

だったのが、ver4.0.0では

fa fa-warning
fa fa-download

といった具合に、プレフィックス以外の部分も微妙に変わっていたりするためです。








3.iタグを使いたくない場合の使用方法


html中に上記のようなiタグが当たり前のように散見されるのが気持ち悪いという方もいるかもしれません。そのような場合は、以下のような方法で、回避することができます。


(1)使いたいアイコンをiconsなどを見て決め、名前を調べる。
(2)font-awesome.cssを開き、使用したいclass名((1)で調べた名前)を検索する。
(3)該当のclassでbefore以降の部分のみ(例えば下記)をコピーする。

:before{
	content:"\f07a";
}

(4)使用しているcssで、使用したいクラスへ貼りつける。
例えば、default.cssというcssの「sample」クラスの頭にWebフォントを挿入したい場合、以下のようになります。

.sample:before{
    font-size:1.2em;
	content:"\f07a";
}

あわせて読みたい

非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた - TechNote非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた - TechNote

エンジニアにとって、webサービスや社内webシステムを作るときに毎回苦労するのが「デザイン」ですが、最近はBootstrapやBootMetro、Pureなど...

IEでtd,thの幅指定(width)が効かないときにするべきこと - TechNoteIEでtd,thの幅指定(width)が効かないときにするべきこと - TechNote

table内のtd,thに対してcssできちんと幅指定をしているはずなのに、効かないことがあります。本件、遭遇する度にイヤ気がさす自分がいるので、今回はきちんと...

Webサイトを作るときに知っておくとかなり便利なサイト横幅の決め方 - TechNoteWebサイトを作るときに知っておくとかなり便利なサイト横幅の決め方 - TechNote

Webサイトの設計を始めるとき、サイトの横幅を何pxにするかが重要な問題となる。サイト幅を決定するときの判断材料はおおむね以下のようなところだろう。昨今普及して...

現場でかならず使われている CSSデザインのメソッド

現場でかならず使われている CSSデザインのメソッド

サイトデザインに差をつける Webフォントコレクション (ijデジタルBOOK)

サイトデザインに差をつける Webフォントコレクション (ijデジタルBOOK)