1. まとめトップ
  2. デザイン・アート

便利!Webフォントをアイコンとして使う方法

Webフォントという、ホームページなどで自分の好きなフォントを使う技術がありますが、Webフォントをアイコンとして利用する方法が便利だったので紹介します。

更新日: 2012年03月05日

peekさん

  • このまとめをはてなブックマークに追加
47 お気に入り 19032 view
お気に入り追加

Webフォントとは?

Webフォントとは、対象のフォントをサーバ上に置いて参照することで、指定のフォントがユーザーのローカル環境になくても指定のフォントが適用されるCSS3の技術です。
今回は、そのWebフォントを使って、フォントをアイコンとして使う方法を紹介します。

アイコンフォントの配布サイト

フォントファイルの使用方法

CSSでフォントファイルを読み込む

@font-face{
font-family: 'icon-font';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
}

CSSで読み込んだフォントをアイコンとして使う設定をする
(ここで、アイコンの色やサイズ、太字などの設定ができます。)

.icon{
font-family: 'icon-font', Arial, sans-serif;
color:blue;
font-size:20px;
font-weight:bold;
cursor:pointer;
padding:5px;
}

HTMLでフォントをアイコンとして使う

<div class=icon>t</div>

※CSSで設定したiconクラスを適用しています。「t」というのは、フォント側で「t」にはtwitterのアイコン、「f」にはfacebookのアイコンとという風に、文字ごとにアイコンが割り当てられていることを想定していますので、フォント側で設定されている文字を入れてください。

フォントをアイコンとして使うメリット

画像より軽いことが多い

フォントのファイルを読み込む必要がありますが、フォントファイルは1個ファイルを読みこむだけでかなりの数のアイコンを使えますので、画像を複数読み込むよりも軽くなる可能性が高くなると思います。

CSSで、色が変えられる

画像の場合、アイコンの色などはCSSなどで変えることができませんが、フォントをアイコンとして使う場合、CSSで簡単に変えられるので、フォントのアイコンセットを一個作っておけば、さまざまな色パターンに適用できます。

大きくてもきれい

画像の場合、ファイル形式にもよりますが、画像を拡大するときれいに表示できない場合がほとんどですが、フォントによるアイコンの場合は、拡大してもきれいに表示されます。

フォントをアイコンとして使うデメリット

オリジナルのフォントアイコンを作るのが多少面倒

環境ごとにファイル形式が違う(woff, ttf, eot, otf, svg)

IEやFirefoxなどのブラウザによって読み込めるフォントファイルが違うので全てのブラウザに対応しようと思うと複数の形式のフォントファイルが必要な場合があります。

オリジナルのフォントを作成

参考記事

1





peekさん

このまとめに参加する



  • 話題の動画をまとめよう