html - style语法 - span</ span

我应该使用标记来代替图标吗? (5)

为什么他们使用标签显示图标？

因为它是：

这不是一个坏习惯吗？

可怕的做法。这是性能胜过语义的胜利。

我研究过Facebook的来源，他们使用标签来显示图标。

另外，今天我查看了Twitter的Bootstrap。它还使用标签来显示图标。

但，

I元素代表以替代语音或情绪表达的文本范围，或以其他方式偏离正常散文，如分类指定，技术术语，来自其他语言的惯用语，思想，船名或其他散文的典型印刷形式是斜体。

为什么他们使用标签显示图标？

这不是一个坏习惯吗？

或者我在这里错过了什么？

我使用span来显示图标，它似乎一直在为我工作。

更新：

Bootstrap 3现在使用span来表示图标。官方文件

当我想在链接<a>标签内放置绝对定位的图标时，我也发现这很有用。

我首先想到了<img>标签，但链接内的这些标签的默认样式通常具有边框样式和/或阴影效果。另外，使用<img>标记时感觉不对，而没有定义“src”属性，而我使用的是背景图像样式表声明，以便图像不会出现鬼影和拖动。

此时，您正在考虑像或这样的标签 - 在这种情况下， 与这种图标类似。

总而言之，我认为除了直观之外，它的好处还在于它需要最少的样式表调整才能使此标记成为图标。

我完全采用完全不同的方法来解释其他人的答案。让我以我的解决方案为前缀，并声明有时会打破标准和约定，特别是在标准HTML词法标记定义的背景下。

没有什么可以阻止你创建自描述性的自定义元素来达到它的目的。

现代浏览器甚至IE 6+（w / shim）都可以支持如下内容：

<icon class="plus">

要么

<icon-add>

只要确保标签正常化：

 icon { display:block; margin:0; padding:0; border:0; ... }

如果您需要支持IE9或更早版本，请使用垫片（请参阅下面的帖子）。

看看这个 Post：

有没有办法在HTML5中创建自己的HTML标签

为了进一步提出我的观点，Google的Angular指令和新的Polymer项目都使用了自定义HTML标记的概念。

我的猜测：因为Twitter认为需要支持传统浏览器，否则他们会使用:before / :after伪元素。

传统浏览器不支持我提到的那些伪元素，所以他们需要为图标使用实际的HTML元素，并且由于图标没有“独占”标签，他们只是使用标签，并且所有浏览器都支持该标签。

他们当然可以使用 ，就像你一样（这是完全正确的），但可能因为我上面提到的原因加上Quentin提到的原因，也是Bootstrap使用标签的原因。

当你使用额外的标记进行样式设计时，这是一个不好的做法，这就是为什么pseudo-elements被发明出来，将内容与风格分开的原因......但是当你看到需要支持传统浏览器时，有时候你会被迫做这种类型的的东西。

PS。图标以'i'开始并且有标签的事实完全是巧合。

昆汀的回答明确指出， i不应该使用i标记来定义图标。

但是，霍利建议span本身毫无意义，并投票赞成i而不是span标签。

很少有人建议使用img因为它的语义和alt标签。但是，我们也不应该使用img因为即使是空的src也会向服务器发送请求。在这里阅读

我认为，正确的方法是，

这解决了无标签大span ，并使视力受损的用户可以使用它。它是语义的，不会滥用（黑客攻击）任何标签。