English 对于这里所有其他人的答案，我采取完全不同的方法。让我为我的解决方案添加前缀，并说出有时会破坏标准和约定，尤其是在标准HTML词法标记定义的上下文中，这样来争论。
没有什么可以阻止您创建可自我描述的自定义元素的用途。
现代浏览器甚至IE 6+（带有shim）都可以支持以下功能：
<icon class="plus">
要么
<icon-add>
只需确保将标签标准化：
icon { display:block; margin:0; padding:0; border:0; ... }
并在需要支持IE9或更早版本的情况下使用填充程序（请参阅以下文章）。
查看此StackOverflow帖子：
为了进一步说明我的观点，Google的Angular Directives和新的Polymer项目都采用了自定义HTML标签的概念。
昆汀的答案明确指出，i不应使用标签来定义图标。
但是，霍莉（Holly）提出这span本身没有任何意义，因此投票赞成i代替span标签。
很少有人建议使用img它作为语义并包含alt标签。但是，我们也不应该使用，img因为即使为空也会src向服务器发送请求。在这里阅读
我认为正确的方法是
<span class="icon-fb" role="img" aria-label="facebook"></span>
这解决了没有alt标签的问题，span并使视障人士可以访问。这是语义上的，不会滥用任何标记。
他们为什么使用
<i>标签显示图标？
因为它是：
这不是一个坏习惯吗？
糟糕的做法。这是性能胜过语义的胜利。
我认为这看起来很糟糕-因为我最近正在处理Joomla模板，并且由于W3C使用的是
<i>标签并且已不推荐使用，因此我一直使该模板失败，因为W3C 最初用于斜体显示，现在通过CSS完成不再是HTML。这确实是一种不好的做法，因为当我看到它时，我浏览了模板并将所有
<i>标签更改为<span style="font-style:italic">，然后想知道为什么整个模板看起来很奇怪。这是用
<i>这种方式使用标记的一个好主意的主要原因-您永远都不知道随后谁会看您的作品，并且“假设”您真正想做的是将文本斜体而不是显示图标。我刚刚在网站上放了一些图标，并使用以下代码完成了操作这样，我将所有图标都放在一堂课中，因此我所做的任何更改都会影响所有图标（例如，我希望它们变大或变小，或使边框变圆等），替代文本使屏幕阅读器有机会告诉对方图标而不是仅仅获得“斜体文本，斜体结尾”（我不完全知道屏幕阅读器如何阅读屏幕，但我想是那样的东西），标题还为用户提供了将鼠标悬停在上面的机会。图片，并获得工具提示，告诉他们图标是什么，以防他们无法理解。比使用
<i>- 更好，它还通过了W3C标准。