Lei Hau'oli（レイハウオリエンジニアブログ）Engineer's Blog

Icon Fontとは

アイコンのベクターデータをフォントにしたもの

• メリット
  
  • 高解像度ディスプレイ対応
  • 画像が劣化しないためメンテナンスしやすい。
• デメリット
  • モダンブラウザにしか対応していない(IE7,リガチャはAndroid2.xでできない)
  • アイコンとフォントの情報がマッチしない

モバイル時代でさらに強まったアイコンの役割

Icon on the PC site

テキストを修飾するデザイン的な要素が強かった

Icon on the smart device

狭い画面で直観的な操作を促すUIの役目を果たしている

How to mark up?

マークアップ例その1

• フォントの直書き
  
• デザイン上はHTML5でも、ブラウザやクローラーは　「う」　と認識
  

<a href="html5.html">う</a>

a {
    font-family: 'jsdoitSymbols';
}

マークアップ例その2

• 文章を書いたうえで、修飾としてアイコンを配置
  
• ユーザー、ブラウザー、クローラーにやさしい
  

<a href="" class="icon_html5">HTML5 Elements</a>

.icon_html5:before {
    content: "う";
}

マークアップ例その3

• spanの空タグ
  
• セマンティック上、意味のない空タグは使いたくない
  

<p><span class="icon-desktop"></span>Desktop</p>

.icon-desktop:before {
    content: "\f108";
}

空タグ。。。

• Semantic（不要なタグ）
  
• Accessibility（音声読み上げツールが読めない テキストブラウザーも読めない）
  
• Browserbility（無駄なDOM構築 ＞ レンダリングコスト増）
  
• SEO（クローラーも読めない）
  

マークアップ例その4

<i>タグに入れるって。。。？

<p><i class="icon-desktop"></i>Desktop</p>

.icon-desktop:before {
    content: "\f108";
}

< i >element

HTML5では声や心の中で思ったことなど、他と区別したいテキストを表すと変更された

< i >

Some examples of cases:

voice

taxonomic designation

technical term

idiomatic phrase from another language

… Some other prose whose typical typographic presentation is italicized.

cf.w3c

どうせなら、<i>は、こんなふうに使いたいところ

<i>I love HTML5.</i>

マークアップを考える

• < i >や< span >などの空タグを書く意味はない
  
• 空タグ使わないで親タグのbeforeでいいと思うよ

<p class="icon-desktop">Desktop</p>

.icon-desktop:before{
    content: "\f108";
}

アクセシビリティ

iphoneの音声読み上げツールで読んでみた。

Font Awesome

結果：音声読み上げツールで“toggle navigation”と発声

Font Awesome ほんとAwesomeだよ!!

UIとしてのアイコンのマークアップ

• 親タグのbefore要素にアイコンフォントを指定
• アクセシビリティに対応させるため、テキストを書き、それを囲む要素でテキストを非表示にする。

<a class="icon-menu"><span>Toggle Navigation</span></a>

.icon-menu:before {
    content: "\f0c9";  
}
span {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

Ligature Symbols

• 複数文字を一つの文字（合字）として、アイコンを作る。
  
• セマンティック的な問題が解決される。
  

<a href="">mail</a>

cf.Ligature Symbols

まとめ

修飾としてのIcon （Icon + テキスト）マークアップ

テキストがあるから読めるでしょとはいえ無駄な空タグはいらない

UIとしてのIcon（テキストなし ユーザー操作用）

ソースにテキストを書いてアクセシビリティに考慮しよう