5 に答える
Twitter のブートストラップは、 CSS スプライト<i>のサンプル マークアップで空の要素を (ab) 使用しているだけです。どのタグを使用するかは問題ではありませんが、HTML5 は新たな生命とセマンティックな意味を与えてくれました。<i><b>
http://www.w3.org/TR/html5/the-i-element.html
i 要素は、テキストのスパンを別の声またはムードで表すか、分類上の指定、専門用語、別の言語の慣用句、思想、または西洋のテキストの船名。
空の要素は常に「完全にセマンティックではない」マークアップの兆候ですが、結局のところ、多くの人は目的を達成するために使用するだけです。アイコンはコンテンツではなくプレゼンテーションであるという議論がなされる可能性があるため、完全に適切ではない可能性があり、背景画像の方が優れています (さらに、http 要求が少なくなります)。<img>
私がときどき行うように、本当に辛辣なことをしたい場合は、そこにテキストを入れることができます。
<span class="icon icon-ok">OK</span>
次に、CSS でスタイルを設定して、次のようなテキストを非表示にしますtext-indent:-999px(ブートストラップはおそらく既にこれを行っています)。つまり、基本的には、高さと幅が固定され、背景画像を持つブロック要素としてスタイル設定されているだけです。
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
タグは重要ではないことがわかります。おそらく使用されiているのは...廃止されたからです。この場合、スプライト シートを使用しているため、イメージ タグは機能しません。
.icon-glass {
background-position: 0 0;
}
「i」タグはアイコンの短縮形ではありません。HTML4 では斜体テキストに使用され、HTML5 では少し異なるコンテキストが与えられています。Bootstrap はこれを悪用しており、多くの開発者は品質よりも速度やセマンティクスに関心があり、同様に悪用しています。
空のタグは意味的に間違っています。アイコンとは関係ありません。
PS テキストのインデントを使用してテキストを非表示にすることはできないため、使用しないでください。
実際のタグは重要ではなく、クラスだけです。あなたは<span class="icon-question-sign></span>何でも使うことができます。
<i>ただし、書くのは短く 、アイコンを表すことができます。
タグはまさにタグです。任意のタグを任意の目的で使用できますが、通常は意味的に正しいタグを使用して、さまざまな種類のコンテンツを表すことをお勧めします。この<i>タグは非推奨ではありませんが、ほとんど使用されていないため、Twitter Boostrap がその目的で使用する安全なタグであり、他の何かでオーバーライドされることを心配する必要はありません。