我查看了Facebook的来源，他们使用<i>标签来显示图标。
此外，今天我查看了Twitter的Bootstrap。它还使用<i>标记来显示图标。
但是，
来自HTML5 spec：
I元素代表一个交替的声音或心情的文本范围， 或以其他方式抵消正常散文，例如分类 指定，技术术语，来自另一个的惯用语 语言，思想，船名或其他一些典型的散文 印刷表示是斜体。
为什么他们使用<i>标记来显示图标？
这不是一个坏习惯吗？
或者我在这里遗漏了什么？
我正在使用span来显示图标，直到现在它似乎对我有效。
更新
Bootstrap 3现在使用span作为图标。 Official Doc
答案 0 :(得分：554)
为什么他们使用
<i>标记来显示图标？
因为它是：
这不是一个坏习惯吗？
糟糕的做法。它是性能优于语义的胜利。
答案 1 :(得分：250)
我在这里跳得有点晚了，但是在自己思考的时候遇到了这个页面。当然，我不知道Facebook或Twitter如何证明这一点，但这是我自己的思考过程，因为它的价值。
最后，我得出的结论是，这种做法不是那么无意义（这是一个词吗？）。事实上，除了短暂和＆＃34;我是用于图标的良好关联，＆＃34;我认为当一个简单的<img>标签不实用时，它实际上是图标的最大语义选择。
<强> 1。用法与规范一致。
虽然它可能不是W3主要考虑的内容，但在我看来<i>的官方规范可以很容易地容纳一个图标。毕竟，回复箭头符号表示＆＃34;回复＆＃34;用另一种方式。它表达了一个技术术语，读者可能不熟悉，通常用斜体字表示。 （＆＃34;在Twitter，这就是我们所说的回复箭头。＆＃34;）它是来自另一种语言的术语：一种符号语言。
如果Twitter使用<i>shout out</i>或<i>[Japanese character for reply]</i>（在英文页面上）而不是箭头符号，则与规范一致。那为什么不<i>[reply arrow]</i>？ （我在这里严格谈论HTML语义，而不是我可以访问的可访问性。）
据我所知，图标使用明确违反了规范的唯一部分是＆＃34;文本范围＆＃34;短语（当标签也不包含文本时）。很明显，<i>标记主要用于文本，但与标记的整体意图相比，这是一个非常小的细节。此标记的重要问题不是它包含的内容格式，而是该内容的含义。
当您考虑＆＃34; text＆＃34;之间的界限时尤其如此。和＆＃34; icon＆＃34;在网站上几乎不存在。文本可能看起来更像一个图标（如在日本示例中）或图标可能看起来像文本（如在jpg按钮中显示＆＃34;提交＆＃34;或带有重叠标题的猫照片）或文本可能通过CSS替换或增强图像。文字，图片 - 谁在乎？这都是内容。只要每个人 - 有障碍的人，有缺陷的浏览器，搜索引擎蜘蛛和其他各种机器都能理解这种意义，我们就完成了我们的工作。
因此，规范的作者没有想到（或选择）澄清这一点的事实不应该使我们的双手不能做有意义的事情并且与标签的精神一致。 <a>标记最初旨在将用户带到其他地方，但现在它可能会弹出一个灯箱。大呐喊吧？如果有人在规格问题出现之前弄清楚如何在点击时弹出一个灯箱，他们仍然应该使用<a>标签，而不是<span>，即使它并非完全一致使用当前的定义 - 因为它最接近并且仍然与标签的精神一致（＆＃34;当您点击此处时会发生某些事情＆＃34;）。同样处理<i> - 无论你放入其中的任何类型的东西，或者你创造性地使用它，它都表达了一个替代或分开的术语的一般概念。
<强> 2。 <i>代码将语义添加到图标元素中。
单独携带图标类的替代选项是<span>，这当然没有任何语义含义。当机器询问<span>它包含的内容时，它说，＆＃34;我不知道。可能是任何东西。＆＃34;但是<i>标签说，＆＃34;我包含了一种不同于通常方式的说法，或者可能是一个不熟悉的术语。＆＃34;那与＆＃34;不一样;我包含一个图标，＆＃34;但它比<span>更接近它！
第3。最终，常见用法是正确的。
除了上述内容之外，值得考虑的是机器阅读器（无论是搜索引擎，屏幕阅读器等）可能随时开始考虑Facebook，Twitter和其他网站使用{ {1}}图标标记。他们不关心规范，因为他们关心通过任何必要的手段从代码中提取意义。因此，他们可能会使用这种常用的知识来简单地记录这些＆＃34;这里可能有一个图标＆＃34;或做一些更高级的事情，比如触发查看CSS以获得暗示意义，或者谁知道什么。因此，如果您选择在网站上使用<i>图标，则可能会提供比规范更多的含义。
此外，如果这种用法变得普遍，将来可能会包含在规范中。然后，您将查看代码，将<i>替换为<span>！因此，加入规范的方向可能是有意义的，特别是当它与当前规范没有明显冲突时。常见的用法倾向于比其他方式更多地规定语言规则。如果你已经够大了，你还记得那个＆＃34;网站＆＃34;这个词是新的时候官方拼写是什么？字典坚持必须有空间，Web必须大写。这有语义上的原因。但常见的用法说，＆＃34;无论如何，这是愚蠢的。我正在使用＆＃39;网站＆＃39;因为它更简洁，看起来更好。＆＃34;不久，词典正式承认拼写正确。
<强> 4。所以我要继续使用它。
因此，<i>为机器提供了更多的意义，因为规范，它为人类提供了更多的意义，因为我们很容易联想＆＃34; i＆＃34;使用＆＃34;图标＆＃34;，和它只有一个字母长。赢得！如果你确保在<i>标签内或其旁边包含等效文本（就像Twitter那样），那么屏幕阅读器就会明白在哪里点击回复，如果CSS没有，那么这个链接是可用的。负载，视力良好的人类读者和体面的浏览器看到一个漂亮的图标。考虑到这一切，我不会看到缺点。
答案 2 :(得分：49)
Quentin的回答明确指出i标签不应用于定义图标。
但是，Holly建议span本身没有任何意义，并投票赞成i代替span代码。
很少有人建议使用img作为语义并包含alt标记。但是，我们不应该使用img，因为即使空src也会向服务器发送请求。 Read here
我认为，正确的方法是，
<span class="icon-fb" role="img" aria-label="facebook"></span>
这解决了alt中没有span标记的问题，并使视障用户可以访问该标记。它是语义的，不会滥用（黑客）任何标签。
答案 3 :(得分：12)
我的猜测：因为Twitter认为需要支持旧版浏览器，否则他们会使用:before / :after伪元素。
旧版浏览器不支持我提到的那些伪元素，因此他们需要为图标使用实际的HTML元素，并且因为图标没有“独占”标记，所以它们只使用{{1标签，并且所有浏览器都支持该标记。
他们当然可以使用<i>，就像你一样（完全没问题），但可能由于我上面提到的原因以及 Quentin 提到的原因，也是为什么Bootstrap使用<span>标签。
当您使用额外标记出于样式原因，这就是pseudo-elements被发明的原因，将内容与样式分开时，这是一种不好的做法......但是当您发现需要支持旧版浏览器时，有时您会被迫做这些事情。
PS。图标以'i'开头且标有<i>标签的事实完全是巧合。
答案 4 :(得分：10)
我完全采用了与其他人的答案完全不同的方法。让我为我的解决方案添加前缀，并指出有时标准和约定应该被打破，特别是在标准HTML词法标记定义的上下文中。
没有什么可以阻止你创建自我描述的自定义元素。
现代浏览器甚至IE 6+（w / shim）都可以支持以下内容：
<icon class="plus">
或
<icon-add>
只需确保标记规范化：
icon { display:block; margin:0; padding:0; border:0; ... }
如果您需要支持IE9或更早版本，请使用填充程序（请参阅下面的帖子）。
查看此StackOverflow帖子：
Is there a way to create your own html tag in HTML5
为了进一步论证，Google的Angular Directives和新的Polymer项目都使用了自定义HTML标签的概念。
答案 5 :(得分：5)
我觉得这看起来很糟糕 - 因为我最近正在使用Joomla模板而且我一直在让W3C模板失败，因为它使用的是<i>标签并且已经弃用，因为它是原创的使用是斜体化，现在通过CSS而不是HTML完成。
这确实很糟糕，因为当我看到它时，我浏览了模板并将所有<i>标签更改为<span style="font-style:italic">，然后想知道为什么整个模板看起来很奇怪。
这是以这种方式使用<i>标签是个坏主意的主要原因 - 你永远不知道之后谁会看你的工作并且＆＃34;假设＆＃34;您真正想要做的是将文本斜体化而不是显示图标。我只是在网站上放了一些图标，并使用以下代码
<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">
通过这种方式，我在一个课程中获得了所有图标，因此我所做的任何更改都会影响所有图标（比如我希望它们更大或更小，或者是圆形边框等），alt文本为屏幕阅读器提供了机会告诉人们图标是什么，而不是仅仅用斜体显示文字，斜体结尾和＃34; （我并不完全知道屏幕阅读器如何阅读屏幕，但我猜它是这样的），标题还让用户有机会将鼠标悬停在图像上并获得工具提示，告诉他们图标是什么以防他们无法弄明白。比使用<i>要好得多 - 而且它也通过了W3C标准。
答案 6 :(得分：2)
当我想在链接<a>标记内放置一个绝对定位的图标时，我发现这很有用。
我首先考虑了<img>标记，但链接中这些标记的默认样式通常具有边框样式和/或阴影效果。另外，在没有定义“src”属性的情况下使用<img>标签感觉不对，而我正在使用背景图像样式表声明，以便图像不会重影和拖动。
此时您正在考虑像<span>或<i>这样的标签 - 在这种情况下，<i>比这种类型的图标更有意义。
总而言之，我认为它的好处除了直观之外，它需要最少的样式表调整才能使这个标签作为一个图标。