回到版本 2，Twitter Bootstrap使用<i>元素来分配图标字体，如下所示：
<a href='/foo'><i class='icon-heart></i> I love you foo</a>
最近建议使用多个类名而不是通配符选择器：[class^="icon-"]:before, [class*=" icon-"]:before所以现在我们有这样的东西：
<a class='icon icon-heart' href='/foo'> I love you foo</a>
我的问题是，由于以下原因，第二个 html 片段是否比第一个更高效？：
请注意，它不一定<i>是用于图标的元素，但问题的关键在于是否使用了单独的元素（无论是它<span>还是<i>其他），正如 OP 的评论所述“但我的问题更多是关于简化一个人的代码库可以少用一个元素。”
首先，您链接到的引导页面给出了以下警告（比这里大得多）：
不要与其他成分混合
图标类不能与其他元素组合。它们被设计成独立的元素。
这可能是因为它使用伪元素进行显示，这很容易与引导框架（或自己设计的）常规组件上的:before其他伪元素冲突。:before
其次，图标通常旨在作为用户操作或用户反馈的交互式内容元素，而不仅仅是为了视觉吸引力。如果它是对用户界面很重要的意义上的“内容”，那么它应该由一个真正的 html 元素表示为内容。
第三，正如Sirikon在已删除的答案中指出的那样（因为它并不是真正的完整答案，只是一个评论），该元素允许在文本中的任何位置放置一个图标，而不仅仅是“在”文本内容之前（或“之后”，如果伪元素被切换）。因此，可以在文本中间放置一个图标。
第四，使用选择的双重类方法（即使在单独的元素上），您的#2 点没有实际意义。通配符选择器不使用任何一种方式，我们没有单独的元素。
好的，对于极端情况（正如您在评论中指出的那样），您可能有足够的 html 元素要消除以查看页面加载时的性能变化（页面功能可能没有性能变化），但在大多数情况下，可能不是这样。
即使是这种情况，仍然需要评估上述第一到第三点的问题是否保证不删除这些元素。