Webフォントでアイコン

Tweet

Category css, html5 2012/12/29

問題

イラストフォントをWebの画面で使いたいなあ。

特にアイコンとかに。

答え

イラストフォントをWebフォントとして使って、アイコンの表示に使える。

文字なので、色はcolorで指定可能。大きさも font-sizeで変えられる。

書き方例 その１ – :before などの擬似要素を使う

CSS

/* フォントを定義して */
@font-face {
	font-family: 'IconicFill';
	src: url('iconic_fill.eot');
	src: url('iconic_fill.eot?#iefix') format('embedded-opentype'),
		url('iconic_fill.ttf') format('truetype'),
		url('iconic_fill.svg#iconic') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* アイコンごとにクラスを作る（共通の指定とアイコンごとに違うcontent部分で分けて書くと書きやすい） */
.iconic {
	display:inline-block;
	font-family: 'IconicFill';
}
.heart_fill:before {content:'\2764';}
.paperclip:before {content:'\e08a';}
.mail:before {content:'\2709';}
/* ... 以下省略 */

HTML

<p><span class="iconic heart_fill"></span> お気に入りにする</p>

書き方例 その２ – 対応する文字をHTMLにそのまま書く

CSS

/* フォントを定義して */
@font-face {
	font-family: 'IconicFill';
	src: url('iconic_fill.eot');
	src: url('iconic_fill.eot?#iefix') format('embedded-opentype'),
		url('iconic_fill.ttf') format('truetype'),
		url('iconic_fill.svg#iconic') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* アイコンのフォントになるようにするクラスだけ作っておく */
.icon {
	font-family: IconicFill;
}

HTML

<p><span class="icon">&#x2764;</span> お気に入りにする</p>

書き方はどっちがいい？

希望の図形が表示される文字が「A」などのとき、例2の方だと、<span style="font-family:hogehoge;">A</span> お気に入りにする のようなHTMLになり、検索ロボットから見ると「『A お気に入りにする』？」のように見えて、意味不明ということになるかもしれません。ハートマークに対応する文字が「❤」などになっているフォントは、そのあたりを考慮したものかもしれません。

擬似要素を使うと、HTML中に無駄な文字が入らないが、ブラウザか対応しているかどうかの問題が。

そして、いずれの方法にしても、そもそもWebフォントを使うと、きちんと表示されない環境が意外とあるようなので、環境がだいたい限定される業務システム画面や、スマートフォンのみ対象のWebサイトなどに使うのがよいかもしれません。

Webフォントとして使う以外にも、イラストフォントを画像にしてから使うのもよいでしょう。デザインができない人にとってはありがたい。

参考

各種フォントのWebサイト

1. Web Symbols typeface
2. Web Symbols Liga Font
3. Foundation Icons Fonts – ZURB Playground – ZURB.com
4. Font Awesome, the iconic font designed for use with Twitter Bootstrap
5. A Free Icon Web Font
6. Free Font Web Symbols by Just Be Nice Studio | Font Squirrel
7. Free Font Symbol Signs by Sander Baumann | Font Squirrel
8. Typicons
9. Iconic Icon Set – 171 icons in raster, vector and font formats—Some Random Dude
10. Fontello – easy iconic fonts composer
11. Sosa Icon Font
12. Entypo
13. Raphael Icon Set
14. PulsarJS @FontFace 73 Free IconFont
15. Heydings Icons
16. Modern Pictograms
17. Web Symbol Typeface
18. FontStruct
19. Social Media Icons