我应该使用<i>标签来代替<span>图标吗？
我查看了Facebook的来源，他们使用<i>标签来显示图标。
另外，今天我看了Twitter的Bootstrap。 它还使用<i>标签来显示图标。
但，
从HTML5规范 ：
I元素代表以交替的声音或情绪表示的文本的范围，或以其他方式偏离正常散文，例如分类指定，技术术语，来自另一种语言的惯用语，思想，船名或其他散文的典型印刷forms是斜体。
为什么他们使用<i>标签显示图标？
这不是一个坏习惯吗？
还是我在这里错过了什么？
我使用span来显示图标，它似乎正在为我工作到现在。
更新：
Bootstrap 3现在使用span图标。 官方文件
为什么他们使用
<i>标签显示图标？
因为它是：
- 短
- 我代表图标（虽然不是在HTML中）
这不是一个坏习惯吗？
可怕的做法。 这是性能胜过语义的胜利。
我在这里稍微晚了一点，但当我自己思考的时候碰到了这个页面。 当然，我不知道Facebook或Twitter是如何certificate它的，但这是我自己的思考过程。
最后，我断定这种做法不是那么没有意义的（这是一个字吗？）。 事实上，除了简洁和“我是为了图标”这样的好关联，我认为它实际上是一个简单的<img>标签不实用的图标的最有语义的select。
1.使用符合规格。
虽然这可能不是W3主要考虑的内容，但在我看来，官方规范很容易容纳一个图标。 毕竟，回复箭头符号以另一种方式说“回复”。 它expression了一个读者可能不熟悉的技术术语，通常会被斜体化。 （“这里在Twitter，这就是我们所说的回复箭头 ”）这是另一种语言的术语：象征性的语言。
如果Twitter不是使用箭头符号，而是使用<i>shout out</i>或<i>[Japanese character for reply]</i> （在英文页面上），则符合规范。 那么为什么不<i>[reply arrow]</i> ？ （我在这里严格地讲HTML语义，而不是可访问性，我会去的。）
据我所知，图标中明确违反的唯一部分就是“文本范围”短语（当标签也不包含文本时）。 很显然， <i>标签主要用于文本，但与标签的整体意图相比，这是一个非常小的细节。 这个标签的重要问题不是它包含什么格式的内容，而是那个内容的含义是什么。
当考虑到“文本”和“图标”之间的界限在网站上几乎不存在的时候尤其如此。 文本可能看起来更像一个图标（如在日本的例子），或者一个图标可能看起来像文本（如在一个JPG提交或带有重叠标题的猫照片）或文本可能被replace或增强通过CSS的图像。 文字，图像 – 谁在乎？ 这都是内容。 只要每个人 – 有障碍的人，有障碍的浏览器，search引擎蜘蛛和其他各种各样的机器都能理解这个意思，我们就完成了我们的工作。
所以说规范的作者没有想到（或者select）澄清这个事实，不应该把我们的手做得有意义而且符合标签的精神。 <a>标签最初是<a>用户带到别的地方，但现在可能会popup一个灯箱。 大呐，对吗？ 如果有人在规范追上之前就已经知道如何在点击的时候popup一个灯箱，他们仍然应该使用<a>标签，而不是<span> ，即使它与当前定义不完全一致 – 因为它是最接近的，并与标签的精神一致（“点击这里时会发生什么事”）。 同样的处理 – 无论你把什么types的东西放在里面，或者无论你创造性地使用它，它expression了一个替代或分离术语的总体思路。
2. <i>标签为图标元素增加了语义。
自带图标类的替代选项是<span> ，这当然没有任何语义含义。 当一台机器询问它所包含的内容时，它说：“我不知道，可能是任何东西。 但标签上写道：“我用一种不同于常规方式的方式来说话，或者是一种陌生的词语。” 这不同于“我包含一个图标”，但它比<span>有更多的距离！
最后，常见的用法是正确的。
除此之外，值得考虑的是，机器阅读器（无论是search引擎，屏幕阅读器还是其他）可能会随时考虑到Facebook，Twitter和其他网站使用<i>标签图标。 他们并不关心规范，而是关心如何从代码中提取意义。 所以他们可能会使用这种常用的知识来简单地logging下“这里可能有一个图标”，或者做一些更高级的事情，比如触发一个提示到意思的CSS，或者知道是什么。 所以，如果你select在你的网站上使用<i>图标，你可能会提供比规范更多的含义。
而且，如果这种用法变得普遍，将来可能会包含在规范中。 然后你将会通过你的代码，用<span>的replace<span> s！ 因此，看起来似乎是规范的方向，尤其是当它与当前的规范没有明显的冲突时，可能是有道理的。 常见的用法倾向于比其他方式更多地支配语言规则。 如果你够大的话，那么你记得当这个词是新的时候，“网站”是官方拼写吗？ 字典坚持必须有一个空间，networking必须大写。 这是有语义的原因。 但常见用法说：“无论如何，这是愚蠢的，我使用'网站'，因为它更简洁，看起来更好。 不久之后，字典正式承认拼写正确。
所以我会继续使用它。
所以，由于规格的原因，给机器提供了更多的意义，它给人类提供了更多的意义，因为我们很容易将“我”与“图标”联系起来， 而且它只有一个字母长。 赢得！ 如果您确保在<i>标记内或旁边包含相同的文本（如Twitter所做的那样），则屏幕阅读器将理解要点击回复的位置，如果CSS未加载，则链接可用;而人有良好的视觉和体面的浏览器的读者看到一个漂亮的图标。 考虑到这一切，我没有看到不利的一面。
昆汀的答案明确指出， i不应该使用i标签来定义图标。
但是，霍利build议span本身没有意义，并投票支持i而不是span标签。
很less有人build议使用img因为它的语义和包含alt标签。 但是，我们也不应该使用img因为即使是空的src也会向服务器发送一个请求。 在这里阅读
我认为，正确的方法是，
<span class="icon-fb" role="img" aria-label="facebook"></span>
这解决了无广告标签的问题，并使视力受损的用户可以访问。 这是语义，不滥用（黑客）任何标签。
我的猜测：因为Twitter认为需要支持传统浏览器，否则他们会使用:before / :after伪元素。
传统的浏览器不支持我提到的那些伪元素，所以他们需要为图标使用一个实际的HTML元素，而且由于图标没有“独占”标签，他们只是用<i>标签所有浏览器都支持该标签。
他们当然可以使用<span> ，就像你一样（这是完全正确的），但可能是因为我上面提到的加上Quentin提到的原因，也是Bootstrap使用<i>标签的原因。
当你为了样式的原因而使用额外的标记是一个糟糕的做法，这就是为什么伪元素被发明，以分离内容和样式…但是当你看到需要支持传统的浏览器，有时你被迫做这种的东西。
PS。 图标以'i'开始，并且有一个<i>标签的事实完全是巧合。
我完全不同的看待其他人的答案。 让我以我的解决scheme为前缀，并声明有时标准和惯例是打算被打破，特别是在标准的HTML词法标记定义的上下文中。
没有什么可以阻止你创build自定义元素，这是自描述的目的。
现代浏览器甚至IE 6+（w / shim）都可以支持如下的东西：
<icon class="plus">
要么
<icon-add>
只要确保标签正常化：
icon { display:block; margin:0; padding:0; border:0; ... }
如果您需要支持IE9或更早版本，请使用填充（请参阅下面的文章）。
看看这个StackOverflow后：
有没有办法在HTML5中创build自己的HTML标签
为了进一步说明，Google的Angular指令和新的Polymer工程都使用了自定义HTML标记的概念。
我认为这看起来很糟糕 – 因为我最近在Joomla模板上工作，而且我一直在使用W3C的模板，因为它使用了<i>标签，并且已经被弃用了，因为它原来的用途是为了斜体，现在是通过CSS而不是HTML来完成。
这确实是一个非常糟糕的做法，因为当我看到它时，我浏览了模板，并将所有的<i>标签改为<span style="font-style:italic"> ，然后想知道为什么整个模板看起来很奇怪。
这是以这种方式使用<i>标签是一个坏主意的主要原因 – 你不知道谁将在事后看到你的工作，并“假设”你真正想要做的是斜体文本而不是比显示一个图标。 我只是把一些图标放在一个网站上，我用下面的代码做了
<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">
这样我就可以把所有的图标都放在一个类中，所以我所做的任何修改都会影响到所有的图标（比如说我想要它们大一点或者小一点，或者四舍五入的边框等等），这样屏幕上的读者就有机会告诉这个人什么这个图标并不仅仅是“斜体文本，斜体文字结尾”（我不完全知道屏幕阅读器是如何读取屏幕的，但我猜这是类似的），标题也给了用户一个鼠标hover的机会图像，并得到一个工具提示，告诉他们图标是什么，如果他们无法弄清楚。 比使用<i>好得多，并且通过了W3C标准。
我也发现这是有用的，当我想放置一个链接<a>标记内的绝对定位的图标。
我首先想到了<img>标签，但链接内的这些标签的默认样式通常具有边框样式和/或阴影效果。 另外，使用<img>标记时没有定义“src”属性，而使用背景图像样式表声明，以至于图像不会出现鬼影和拖动，感觉不对。
在这一点上，你正在考虑像<span>或<i>这样的标签，在这种情况下，这种图标的意义就很大。
总而言之，除了直观之外，我认为它的好处在于它只需要最小的样式表调整就可以使这个标签成为一个图标。
