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