ウェブフォントでアイコンを表示するってのを使ってみた。

目次

アイコン用のウェブフォントを読み込んでアイコンを表示するってのをやってみた。何て言われてるんだろう、一般的に。
Facebook、Twitter、Email、Blogなどの先頭にあるアイコンがそれ。

ちょくちょく見かけるので一般的になってきてるのかな？
大きなプロダクションで分業化が進んでいたりすると難しいところもあると思うけど活用すると便利だと思う。
今回、使ったのはこれFont Awesomeというパッケージ化されてるもの。
フロントエンド側のHTMLやらCSSやらが苦手な人でも使えるようにTwitter Bootstrapってのに対応してるのが売りらしいけど、普通に使える。

Font Awesomeは、シンプルな使い方をする場合は以下のようにするだけ。

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('/stylesheets/fonts/../font/fontawesome-webfont.eot?#iefix') format('eot'), url('/stylesheets/fonts/../font/fontawesome-webfont.woff') format('woff'), url('/stylesheets/fonts/../font/fontawesome-webfont.ttf') format('truetype'), url('/stylesheets/fonts/../font/fontawesome-webfont.otf') format('opentype'), url('/stylesheets/fonts/../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

「font-awesome.css」っていうCSS内の@font-face内のフォントファイルへのパスを書き換えること。上記のような記述がコメントの後にあるので自分の環境にあわせて書き換える。zoomone.netの場合はドキュメントルートに「/fontawesome/」というディレクトリを作ってその中に「font」ディレクトリを作ってフォントファイルを置いたので以下のように書き換えた。必要なのはフォントデータの形式って（.eot、.woff、.ttf、.svg）これだけあるってのが驚き。

@font-face {
  font-family: 'FontAwesome';
  src: url('/fontawesome/font/fontawesome-webfont.eot');
  src: url('/fontawesome/font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('/fontawesome/font/fontawesome-webfont.woff') format('woff'),
  url('/fontawesome/font/fontawesome-webfont.ttf') format('truetype'),
  url('/fontawesome/font/fontawesome-webfont.otf') format('opentype'),
  url('/fontawesome/font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

<link rel="stylesheet" href="/fontawesome/css/font-awesome.css" media="screen" />
<!--[if IE 7]><link rel="stylesheet" href="/fontawesome/css/font-awesome-ie7.css"><![endif]-->

「font-awesome.css」とIE 7対策のための「font-awesome-ie7.css」は「/fontawesome/」内の「css」っていうディレクトリに置いたのでHTMLから読み込むためにパスを記述する。

<i class="icon-facebook-sign"></i> Facebook

Facebookのアイコンを表示する場合は文字の前にこうやって記述するだけでアイコンが表示される。めでたしめでたし。

メリット、デメリットはあると思うけどなかなかいいんでないかと思う。仕事で使う機会があるかどうかってなると自分でデザインしてコーディングまですると使うかもしれない。ちゃんと仕様の説明をして使った方がいいと思うので特に依頼してこないと使わないだろうと思う。

• Web Symbols typeface
• Web Icon Fonts | chibatch.jp
• 意外と知らない？アイコンはWebフォントでつくるとこんなに便利！