html - 在元素之前使用 <i> 而不是将元素包装在 <span> 中有什么好处?

标签 html css fonts icons font-face

<分区>

Possible Duplicate:
<I> tag for icons?

我在 FontAwesome 中看到过为了使用他们的图标字体,他们使用了一个空的 <i> ,像这样:

<a class="btn" href="#">
   <i class="icon-refresh"></i> Refresh
</a>

而不是用 <span> 包装它像这样:

<a class="btn" href="#">
   <span class="icon-refresh">Refresh</span>
</a>

我看到其他一些网站也采用了类似的技术。据我所知,这两种技术都利用了 CSS 伪元素 :before ,所以我想知道他们为什么使用 <i>而不是用 <span> 包装它?

使用空的 <i> 有什么好处吗? ?它是语义化的吗?

最佳答案

我能想到的唯一优点就是<i>写起来更短(而不是通过网络发送,因为 gzip 不太关心它的 i 或 span 是否为 20 个字母的类)并且它与其他标记不同。它就像图标的自制标签。

但是<i>中没有其他语义值无论如何。

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

http://www.w3.org/International/questions/qa-b-and-i-tags/

那么它是语义化的吗?没有。但是没人在乎,没什么大不了的。

关于html - 在元素之前使用 <i> 而不是将元素包装在 <span> 中有什么好处?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13532719/

相关文章:

html - 将伪类 "before"和 "after"应用于多行文本

html - 无法使 <p> 文本在网格布局中与顶部对齐

javascript - 使用CSS定位元素

javascript - Jquery 显示隐藏在列表中无法正常工作

linux - 我如何让 Emacs 从文件加载字体?

.net - unicode 实现 : many fonts, 还是一种大字体?

html - Gmail 和 Quora 的 HTML 中的 class 或 id 字段是如何生成的,为什么?

jquery - 如果基于滚动位置的语句不起作用

php - 如何使用 jQuery 将不同的 FontAwesome 图标填充到 WordPress 类别列表中?

android - 如何使用 EditText android 更改 TextInputLayout 中标签的字体样式