在元素之前使用 而不是在 中包装元素有什么好处？ [复制]答案

【问题标题】：What are the advantages of using before an element instead of wrapping the element in ? [duplicate]在元素之前使用 而不是在 中包装元素有什么好处？ [复制]
【发布时间】：2012-11-12 00:47:55
【问题描述】：

可能重复：
 tag for icons?

我在FontAwesome 中看到，为了使用他们的图标字体，他们使用了一个空的，如下所示：

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

而不是像这样用 包装它：

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

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

使用空的 有什么好处吗？它是语义的吗？

【问题讨论】：

相关/重复： tag for icons?，How does Twitter Bootstrap's icon work?
这个伪元素现在被称为::before
@RobW：嗯，对于那些将 与 进行比较的问题，我找不到答案，所以我认为可以提出一个新问题？
"它是语义化的吗？"哎呀，不。任何想用 做图标的人都应该被串起来。这甚至比使用  的斜体更糟糕，它最初是为它创建的，即使它不是语义的。我敢说零语义（ 代表）击败了不正确的语义——甚至  在 HTML5 中被赋予了全新的、正确的语义含义，而“图标”不是它。
@ŠimeVidas: 可以使用::before 了吗？因为 AFAIK 某些浏览器（IE，如果我没记错的话）不会呈现 ::before。

标签： html css fonts icons font-face

【解决方案1】：

我能想到的唯一优点是  写起来更短（而不是通过网络发送，因为 gzip 不太关心它的 i 或跨度为 20 个字母的类）而且它与众不同从其他标记。就像自制的图标标签。

但是 中没有任何其他语义值。

i 元素代表一段文本以不同的声音或语气，或以其他方式偏离正常散文，例如分类学名称，技术术语，来自另一个人的惯用短语语言、思想、船名或其他具有典型特征的散文排版显示为斜体。

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

那么它是语义的吗？没有。但没人在乎，没什么大不了的。

【讨论】：

嗯，是的。我个人也很在意。但这种滥用的影响是如此之小。没有人会为此惩罚，不是用户，不是搜索引擎，没有人。所以没什么大不了的，真的。

【解决方案2】：

mentioned here 可能是一个原因 - 节省字节..

对我来说它很容易使用..

【讨论】：