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

因为它是:

短 i代表图标(虽然在HTML中不是)

这不是不好的做法吗?

可怕的实践。这是性能对语义的胜利。

我的猜测:因为Twitter看到了支持旧浏览器的需要，否则他们将使用:before /:after伪元素。

传统浏览器不支持我提到的那些伪元素，所以它们需要为图标使用一个真正的HTML元素，由于图标没有“exclusive”标记，它们只是使用了< I >标记，而且所有浏览器都支持该标记。

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

当你出于样式原因而使用额外的标记时，这是一种糟糕的做法，这就是为什么发明了伪元素，将内容与样式分开…但是当您看到支持旧浏览器的需求时，有时您不得不做这些事情。

PS.事实上，图标以“i”开头，并且有一个<i>标签，这完全是巧合。

我说得有点晚了，但我自己思考的时候看到了这一页。当然，我不知道Facebook和Twitter是如何证明它的价值的，但以下是我自己的思考过程。

最后，我得出结论，这种做法并不是没有语义的(这是一个词吗?)事实上，除了简短和“i is for icon”的良好关联外，我认为当直接的<img>标记不实用时，它实际上是最语义的图标选择。

1. 使用方法与规范一致。

虽然这可能不是W3的主要想法，但在我看来，<i>的官方规范可以很容易地容纳一个图标。毕竟，回复箭头符号是在用另一种方式表示“回复”。它表示一个读者可能不熟悉的技术术语，通常是斜体的。(“在Twitter，这就是我们所说的回复箭头。”)这个词来自另一种语言:象征语言。

如果Twitter使用<i>喊出</i>或<i>[回复的日文字符]</i>(在英文页面上)而不是箭头符号，这将与规范一致。那么为什么不使用<i>[回复箭头]</i>呢?(这里我说的是严格的HTML语义，而不是可访问性，稍后我会讲到。)

据我所知，规范中唯一被图标使用明显违反的部分是“文本跨度”短语(当标签也不包含文本时)。很明显，<i>标记主要用于文本，但与标记的总体意图相比，这是一个非常小的细节。对于这个标记来说，重要的问题不是它所包含内容的格式，而是该内容的含义。

This is especially true when you consider that the line between "text" and "icon" can be almost nonexistent on websites. Text may look like more like an icon (as in the Japanese example) or an icon may look like text (as in a jpg button that says "Submit" or a cat photo with an overlaid caption) or text may be replaced or enhanced with an image via CSS. Text, image - who cares? It's all content. As long as everyone - humans with impairments, browsers with impairments, search engine spiders, and other machines of various kinds can understand that meaning, we've done our job.

So the fact that the writers of the spec didn't think (or choose) to clarify this shouldn't tie our hands from doing what makes sense and is consistent with the spirit of the tag. The <a> tag was originally intended to take the user somewhere else, but now it might pop up a lightbox. Big whoop, right? If someone had figured out how to pop up a lightbox on click before the spec caught up, they still should have used the <a> tag, not a <span>, even if it wasn't entirely consistent with the current definition - because it came the closest and was still consistent with the spirit of the tag ("something will happen when you click here"). Same deal with <i> - whatever type of thing you put inside it, or however creatively you use it, it expresses the general idea of an alternate or set-apart term.

2. <i>标记为图标元素添加语义。

单独携带图标类的另一个选项是<span>，这当然没有任何语义意义。当机器询问<span>它包含什么时，它会说:“我不知道。什么都有可能。”但是<i>标记表示，“我包含了一种不同于通常方式的表达方式，或者可能是一个不熟悉的术语。”这与“我包含一个图标”不同，但它比<span> got!

3.最终，习惯用法就是正确的。

In addition to the above, it's worth considering that machine readers (whether search engine, screen reader, or whatever) may at any time begin to take into account that Facebook, Twitter, and other websites use the <i> tag for icons. They don't care about the spec as much as they care about extracting meaning from code by whatever means necessary. So they might use this knowledge of common usage to simply record that "there may be an icon here" or do something more advanced like triggering a look into the CSS for a hint to meaning, or who knows what. So if you choose to use the <i> for icons on your website, you may be providing more meaning than the spec does.

Moreover, if this usage becomes widespread, it will likely be included in the spec in the future. Then you'll be going through your code, replacing <span>s with <i>'s! So it may make sense to get on board with what seems to be the direction of the spec, especially when it doesn't clearly conflict with the current spec. Common usage tends to dictate language rules more than the other way around. If you're old enough, do you remember that "Web site" was the official spelling when the word was new? Dictionaries insisted there must be a space and Web must be capitalized. There were semantic reasons for that. But common usage said, "Whatever, that's stupid. I'm using 'website' because it's more concise and looks better." And before long, dictionaries officially acknowledged that spelling as correct.

4. 所以我要继续使用它。

So, <i> provides more meaning to machines because of the spec, it provides more meaning to humans because we easily associate "i" with "icon", and it's only one letter long. Win! And if you make sure to include equivalent text either inside the <i> tag or right next to it (as Twitter does), then screen readers understand where to click to reply, the link is usable if CSS doesn't load, and human readers with good eyesight and a decent browser see a pretty icon. With all this in mind, I don't see the downside.

我还发现这是有用的，当我想把一个图标与绝对定位在一个链接< >标签。

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

此时，您正在考虑像<span>或<i>这样的标记——在这种情况下，<i>作为这种类型的图标非常有意义。

总而言之，除了直观之外，我认为它的好处是它需要最小的样式表调整才能使这个标签作为图标工作。

我认为这看起来很糟糕-因为我最近在一个Joomla模板上工作，我一直在得到模板失败的W3C，因为它使用< I >标签，这已经弃用了，因为它最初的用途是斜体的东西，现在是通过CSS而不是HTML来完成的。

这确实是一个很糟糕的做法，因为当我看到它时，我浏览了模板，并将所有< I >标签改为<span style="font-style:italic">，然后想知道为什么整个模板看起来很奇怪。

这就是为什么以这种方式使用<i>标记是一个坏主意的主要原因——你永远不知道谁会在之后看到你的工作，并“假设”你真正想做的是斜体文本而不是显示图标。我刚刚在一个网站上放了一些图标，我用下面的代码做到了

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

that way I've got all my icons in one class so any changes I make affects all the icons (say I wanted them larger or smaller, or rounded borders, etc), the alt text gives screen readers the chance to tell the person what the icon is rather than possibly getting just "text in italics, end of italics" (I don't exactly know how screen readers read screens but I guess it's something like that), and the title also gives the user a chance to mouse over the image and get a tooltip telling them what the icon is in case they can't figure it out. Much better than using <i> - and also it passes W3C standard.

Quentin的回答明确指出i标签不应该被用来定义图标。

但是，Holly认为span本身没有任何意义，并投票支持i而不是span标签。

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

我认为正确的方法是，

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

这解决了span中没有alt标签的问题，并使视力受损的用户可以访问它。它是语义的，没有滥用(黑客)任何标签。

在这里，我对其他人的回答采取了完全不同的方法。让我在解决方案的开头说明一下，有时标准和约定就是要被打破的，特别是在标准HTML词法标记定义的上下文中。

没有什么可以阻止您创建自定义元素，这些元素是自描述的。

现代浏览器甚至IE 6+ (w/ shim)都可以支持以下内容:

<icon class="plus">

or

<icon-add>

只需要确保标签规范化:

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

如果你需要支持IE9或更早版本(见下文)，请使用垫片。

看看这篇StackOverflow帖子:

有办法在HTML5中创建自己的html标签吗

为了进一步说明我的观点，谷歌的Angular指令和新的Polymer项目都利用了自定义HTML标记的概念。