html - style语法 - span</ span




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

为什么他们使用<i>标签显示图标?

因为它是:

  • 我代表图标(尽管不是HTML)

这不是一个坏习惯吗?

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

我研究过Facebook的来源,他们使用<i>标签来显示图标。

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

但,

来自HTML5规范

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

为什么他们使用<i>标签显示图标?

这不是一个坏习惯吗?

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

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

更新:

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


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

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

此时,您正在考虑像<span><i>这样的标签 - 在这种情况下, <i>与这种图标类似。

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


我完全采用完全不同的方法来解释其他人的答案。 让我以我的解决方案为前缀,并声明有时会打破标准和约定,特别是在标准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元素,并且由于图标没有“独占”标签,他们只是使用<i>标签,并且所有浏览器都支持该标签。

他们当然可以使用<span> ,就像你一样(这是完全正确的),但可能因为我上面提到的原因加上Quentin提到的原因,也是Bootstrap使用<i>标签的原因。

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

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


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

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

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

我认为,正确的方法是,

<span class="icon-fb" role="img" aria-label="facebook"></span>

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





semantic-markup