スポンサーリンク

ウェブフォントで作られたアイコン集、Font Awesome

Font Awesomeはウェブサイトで使われるポピュラーなウェブフォントアイコン集です。

ウェブサイトでこういうアイコンを見かけたら、Font Awesomeを利用している可能性が高いです。

Font Awesomeバージョン4.6.3では重複分も含めると634種ものウェブサイトで使いやすいアイコンが用意されているばかりではなく、回転させたり2つのアイコンを重ね合わせることが容易なため、多彩な表現が可能となっています。

アイコンの形をしていても実態はフォントなので、文字と同じようにサイズや色を変更したり背景色を設定することができます。しかも普通の画像アイコンとは異なり、サイズを大きくしても荒くなることがありません。

Twitter Twitter Twitter

アイコンの拡大や回転はスタイルシートのクラスで定義されているため、タグのClass属性にそれらを書き込むだけで使えます。

もちろん自分でクラスを定義して新たに使いやすいセットを作ることも可能なので、ウェブサイトでアイコンを利用する際に、目的のサイズに合わせて画像を作ったり探す手間がなくなります。

Font Awesomeアイコンピッカー

Font Awesomeという名の示す通り、イカすフォント集です。

Font Awesomeでできること

背景に色を付けてアイコンの色を白くすればソーシャルボタンになります。この方法はよく使われるだけに、白への反転にはフォントの色を指定する必要はなく、fa-inverseをクラスに書き足すだけです(.fa-inverseのカラープロパティは#ffffff)。上に挙げたソーシャルボタン風ツイッターアイコンのコードは下のようになっています。

Twitter Twitter Twitter

 

<i class="fa fa-twitter fa-lg" style="color: #88c5f3; padding: 12px 15px;"> Twitter</i>
<i class="fa fa-twitter fa-lg" style="background: #88C5F3; padding: 12px 15px;"> Twitter</i>
<i class="fa fa-twitter fa-lg fa-inverse" style="background: #88C5F3; padding: 12px 15px;"> Twitter</i>

 

重ね合わせは禁止マークを赤で2倍にしてを重ねれば、車侵入禁止マークになります。

<span class="fa-stack fa-fw">
<i class="fa fa-car fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
</span>

重ね合わせ(スタック)では2つのアイコンのpositionを固定して配置するので、fa-stackクラスでくくってやる必要があります。

FontAwesomeの仕組み

一般的なウェブフォントと同じで、ベクターデータでフォントを作成しています。そのフォントにCSSでクラス名をつけることで、HTMLでクラス属性の指定で使えるようになっています。

角度を指定したりサイズ変更などといったよく使うCSSの定義もあらかじめ用意されているため、主要なクラス名さえ覚えてしまえば、驚くほど手軽にアイコンを操作することができます。

もちろん自分でCSSをいじって変更することもできますが、フォント色と背景色のクラスを定義するだけで十分ではあります。

Font AwesomeはUnicodeのf000からの文字コードに割り当てられているので、フォントファミリーを指定することで要素を使わずHTMLに直接記述もできます。

<span style=”font-family:font-awesome;”>&#xf011;<span>と書けば、fa-power-offというクラス名のついたが表示されます。

FontAwesomeの使い方

i要素かspan要素にクラス名を記述していくだけです。インライン要素なら機能するのでiでもspanでも構いません。ただ、あまり使われていないiを用いることが多いようです。

Classの中は下のようになります。

<i class="fa fa-heart fa-2x"></i>

最初のfaはアイコンフォントとして使うためのクラス、次のfa-heartはハートマークというクラス名を表しています。”fa クラス名”だけで表示はできます。ただ、通常のサイズは14pxとアイコンとしては小さいため、2倍にしています。

実際に表示するとになります。標準サイズ(何もつけない)で赤にするとこう。文中で使うなら標準か1.33倍のlgがフィットします。

なお、<i class=””></i>のタグの間に文字を記述すると、アイコンに与えた属性の影響を受けてしまいます。標準なら問題ないですが、i要素の属性が適用されるので注意が必要です。

大きさを変更する

大きさは、何もつけない標準サイズの14pxからfa-5xまでの6段階が選べます。

fa-x1……1倍…………

fa-lg……1.33倍 ……

fa-x2……2倍…………

fa-x3……3倍…………

fa-x4……4倍…………

fa-x5……5倍…………

スポンサーリンク

Web関連