SOFTELメモ

Softel Inc.

Webフォントでアイコン

問題

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

特にアイコンとかに。

icons


答え

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

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

書き方例 その1 – :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>

書き方例 その2 – 対応する文字を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 お気に入りにする』?」のように見えて、意味不明ということになるかもしれません。ハートマークに対応する文字が「&#x2764;」などになっているフォントは、そのあたりを考慮したものかもしれません。

擬似要素を使うと、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

関連するメモ

コメント