１サイト構築の際にタイトルの装飾などによく絵文字が使われているのを見かけると思いますが、あれって自作するのって大変だなと思いますよね。
実はあの絵文字ですがウェブアイコンフォントを使ってるんです。
私も前々から知ってはいたんですが、最近、サイト構築で使ってみたのでこれを機に紹介したいと思います。
その前に、ウェブアイコンフォントを使うメリットを少し上げておきます。
ウェブアイコンフォントを使うメリットとは
ウェブアイコンフォントを使うメリットですが次のようなことが挙げられます。
- 今まで自作していたアイコンを新しく作らなくて済む
- 画像ではなくテキストなのでウェブ表示速度が向上（CMSを使っている場合は意外と重要）
- あくまでもフォントなのでサイズを大きくしても画質が落ちない
- 色の変更などカスタマイズが楽になる
などが挙げられます。
これらはウェブ構築を行うに当たって結構、メリットがあると思います。特にアイコンを自作するのか、ウェブアイコンフォントを使うのかでは工数的に大きく違ってきます。
CSSで見た目を変えようと思った時に、普通のテキストと同じやり方でカスタマイズできるのが非常に手軽です。
今回は私がおすすめする２種類のウェブアイコンフォントを紹介します。
お勧めのウェブアイコンフォント
Font Awesome
１つ目ですが、CSSフレームワークとしても使える「Font Awesome」です。
Font Awesome
使えるフォント一覧。種類別に分かれていて見やすいですね。
Font Awesome フォント一覧
ユニコード付きのチートシートも用意されています。
Font Awesome チートシート
現時点（2014/5/21）で648個のアイコンが登録されています。
Foundation Icon Fonts 3
２つめはCSSフレームワークとしても有名な「Foundation」のウェブアイコンフォントです。
Foundation Icon Fonts 3
アイコンの種類もGeneral,page,arrow,people,device,text editor,media control,ecommerce,accessibility,social,miscellaneousと種類別に色々と分けてあるので便利です。
使用方法
ウェブアイコンフォントの使用方法ですがどちらもCSSファイルとフォントファイルを適切にウェブにアップロードしてCSSの設定を行い、使用したい場所で
<i class="アイコンフォントクラス名"></i>
を入れることで表示可能です。
Font Awesomeのcssを参考にして、例えば
<p><i class="fa fa-camera-retro"></i>fa-camera-retroを表示</p>
と入力することで
fa-camera-retroを表示
と表示されます。
アイコンを大きくするときには
<p><i class="fa fa-camera-retro fa-2x"></i>fa-camera-retroを表示</p>
とiconx2fa-2をクラスに追加すると大きく表示されます。
fa-camera-retroを2倍サイズで表示
サイズの変更は次のようにクラス分けされています。
fa-lg ラージサイズ
fa-2x 2倍
fa-3x 3倍
fa-4x 4倍
fa-5x 5倍
Principleのテーマで使う際にはCSSとFontのフォルダをテーマフォルダにアップロードして、子テーマのstyle.cssにcssをインポートするコードを入れて下さい。
@import url('../principle/style.css'); ←元からあるコード
@import url('../principle/css/font-awesome.min.css'); ←このコードを追加
最後に
今回、2種類のウェブアイコンフォントを紹介しましたが、他にも色々とあるようです。
自分の使い勝手やサイトの構成に合わせたアイコンフォントを使う事によってデザイン的に、また、工数的にもメリットがあると思うので興味のある方は是非、試してみて下さい。
コメント