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

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

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

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

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

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

因为它是:

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

这不是不好的做法吗?

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

在这里，我对其他人的回答采取了完全不同的方法。让我在解决方案的开头说明一下，有时标准和约定就是要被打破的，特别是在标准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标记的概念。

我认为这看起来很糟糕-因为我最近在一个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.

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

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

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

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

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

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

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

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

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