Facebook的HTML和Twitter的Bootstrap HTML (v3之前)都使用<i>标记来显示图标。
然而，从HTML5规范来看:
元素I表示一段文本的交替语音或语气， 或者以其他方式偏离正常的散文，比如分类学 名称，一个技术术语，来自另一个人的惯用短语 语言，一种思想，一艘船的名字，或其他一些散文的典型 字体显示是斜体的。
为什么他们使用<i>标签来显示图标?这不是不好的做法吗?还是我漏了什么?
我使用span来显示图标，它似乎为我工作到现在为止。
更新:
Bootstrap 3为图标使用span。官方文档。
引导5回到i正式文档
当前回答
我还发现这是有用的，当我想把一个图标与绝对定位在一个链接< >标签。
我首先考虑的是<img>标签，但是链接内这些标签的默认样式通常具有边框样式和/或阴影效果。另外，使用<img>标签而不定义“src”属性感觉是错误的，而我使用了背景图像样式表声明，这样图像就不会鬼影和拖动。
此时，您正在考虑像<span>或<i>这样的标记——在这种情况下，<i>作为这种类型的图标非常有意义。
总而言之，除了直观之外，我认为它的好处是它需要最小的样式表调整才能使这个标签作为图标工作。
其他回答
在这里，我对其他人的回答采取了完全不同的方法。让我在解决方案的开头说明一下，有时标准和约定就是要被打破的，特别是在标准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标记的概念。
我还发现这是有用的，当我想把一个图标与绝对定位在一个链接< >标签。
我首先考虑的是<img>标签，但是链接内这些标签的默认样式通常具有边框样式和/或阴影效果。另外，使用<img>标签而不定义“src”属性感觉是错误的，而我使用了背景图像样式表声明，这样图像就不会鬼影和拖动。
此时，您正在考虑像<span>或<i>这样的标记——在这种情况下，<i>作为这种类型的图标非常有意义。
总而言之，除了直观之外，我认为它的好处是它需要最小的样式表调整才能使这个标签作为图标工作。
我的猜测:因为Twitter看到了支持旧浏览器的需要，否则他们将使用:before /:after伪元素。
传统浏览器不支持我提到的那些伪元素，所以它们需要为图标使用一个真正的HTML元素，由于图标没有“exclusive”标记，它们只是使用了< I >标记，而且所有浏览器都支持该标记。
他们当然可以使用<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">
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标签的问题，并使视力受损的用户可以访问它。它是语义的，没有滥用(黑客)任何标签。
