画像の代わりに使えるアイコンタイプのWebフォントのまとめ

サイトによって提供されているフォント形式が違っている場合もありますが、次のようにして呼び出すのがメジャーです。

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

これだと様々な環境に対応できます。

で、実際にフォントを使う場合ですが、アイコンの場合は直接記述せず、「:before」や「:after」を使ってCSS内に記述する場合が多いみたいです。

.home:before {
  font-family: "MyWebFont";
  content: "C";
}

この場合クラス名が「home」の要素の前に「C」に該当するアイコンが入ります。

<i class="home"></i>ホーム

こんな感じで、ホームの文字の前にアイコンが表示されます。

なぜこんな回りくどいことをするのか？これは推測ですが、検索エンジン対策ではないかと思います。

検索エンジンからすれば、アイコン型のフォントであることは恐らく分かりませんので、途中に謎のアルファベットが入った文章だと解釈してしまうのではないでしょうか？そんな誤解を防ぐためにCSSでアルファベットを挿入するようにしているのかなと思います。

あくまで私の推測です。。

あと、TTFやOTFしか提供されていない場合もありますが、@FONT-FACE GENERATORを使えばWOFF、EOT、SVGなど様々な形式に変換してくれて、フォントを呼び出すコードも作成してくれます。

ということで予備知識を簡単に説明しました。

1. Web Symbols typeface

2. Foundation Icons Fonts - ZURB Playground - ZURB.com

3. Font Awesome, the iconic font designed for use with Twitter Bootstrap

4. A Free Icon Web Font

5. Free Font Web Symbols by Just Be Nice Studio | Font Squirrel

6. Free Font Symbol Signs by Sander Baumann | Font Squirrel

7. Typicons

8. Iconic Icon Set – 171 icons in raster, vector and font formats—Some Random Dude

9. Fontello - easy iconic fonts composer

ということでアイコン形式のフォントをまとめてみました。今後CSS3を使った使用例なんかも考えていきたいです。