本文共 12816 字，大约阅读时间需要 42 分钟。

本文翻译自：

I've looked into the source of Facebook, they use the <i> tag to display icons. 我查看了Facebook的来源，他们使用<i>标签来显示图标。

Also, today I looked into Twitter's Bootstrap. 此外，今天我查看了Twitter的Bootstrap。 It also uses <i> tag to display icons. 它还使用<i>标签来显示图标。

But, 但，

From the : 来自 ：

The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. I元素表示一个替代语音或心情的文本范围，或以其他方式偏离正常散文，例如分类标识，技术术语，来自另一种语言的惯用短语，思想，船名或其他散文的典型排版呈现斜体。

Why are they using <i> tag to display icons? 他们为什么使用<i>标签来显示图标？

Is it not a bad practice? 这不是一个坏习惯吗？

Or am I missing something here? 或者我在这里遗漏了什么？

I am using span to display icons and it seems to be working for me till now. 我正在使用span来显示图标，它似乎对我有效，直到现在。

Update: 更新：

Bootstrap 3 now uses span for icons. Bootstrap 3现在使用span作为图标。

#1楼

参考：

#2楼

Why are they using <i> tag to display icons ? 他们为什么使用<i>标签来显示图标？

Because it is: 因为它是：

• Short 短
• i stands for icon (although not in HTML) 我代表图标（虽然不是HTML）

Is it not a bad practice ? 这不是一个坏习惯吗？

Awful practice. 可怕的做法。 It is a triumph of performance over semantics. 它是性能胜过语义的胜利。

#3楼

My guess: Because Twitter sees the need to support legacy browsers, otherwise they would be using the :before / :after pseudo-elements. 我的猜测：因为Twitter认为需要支持旧版浏览器，否则他们会使用:before / :after伪元素。

Legacy browsers don't support those pseudo-elements I mentioned, so they need to use an actual HTML element for the icons, and since icons don't have an 'exclusive' tag, they just went with the <i> tag, and all browsers support that tag. 旧版浏览器不支持我提到的那些伪元素，因此他们需要为图标使用实际的HTML元素，并且因为图标没有“独占”标记，所以它们只使用了<i>标记，并且所有浏览器都支持该标记。

They could've certainly used a <span> , just like you are (which is TOTALLY fine), but probably for the reason I mentioned above plus the ones mentioned by Quentin , is also why Bootstrap is using the <i> tag. 他们当然可以使用<span> ，就像你一样（完全没问题），但可能由于我上面提到的原因加上Quentin提到的原因，也是Bootstrap使用<i>标签的原因。

It's a bad practice when you use extra markup for styling reasons, that's why were invented, to separate content from style... but when you see the need to support legacy browsers, sometimes you're forced to do these kind of things. 当你使用额外的标记来造型时，这就是一个不好的做法，这就是被发明的原因，将内容与风格分开......但是当你看到需要支持传统的浏览器时，你有时会被迫做这些的东西。

PS. PS。 The fact that icons start with an 'i' and that there's an <i> tag, is completely coincidental. 图标以“i”开头并且有<i>标签的事实完全是巧合。

#4楼

I'm jumping in here a little late, but came across this page when pondering it myself. 我在这里跳得太晚了，但是在自己思考的时候遇到了这个页面。 Of course I don't know how Facebook or Twitter justified it, but here is my own thought process for what it's worth. 当然我不知道Facebook或Twitter如何证明它是合理的，但这是我自己的思想过程，它的价值。

In the end, I concluded that this practice is not that unsemantic (is that a word?). 最后，我得出结论，这种做法不是那么无意义（就是一个词？）。 In fact, besides shortness and the nice association of "i is for icon," I think it's actually the most semantic choice for an icon when a straightforward <img> tag is not practical. 事实上，除了简短和“我是图标”的良好关联之外，我认为当一个简单的<img>标签不实用时，它实际上是图标的最大语义选择。

1. The usage is consistent with the spec. 1.用法与规格一致。

While it may not be what the W3 mainly had in mind, it seems to me the official spec for <i> could accommodate an icon pretty easily. 虽然它可能不是W3主要考虑的内容，但在我看来， <i>的官方规范可以很容易地容纳一个图标。 After all, the reply-arrow symbol is saying "reply" in another way. 毕竟，回复箭头符号以另一种方式说“回复”。 It expresses a technical term that may be unfamiliar to the reader and would be typically italicized. 它表达了一个技术术语，读者可能不熟悉，通常用斜体字表示。 ("Here at Twitter, this is what we call a reply arrow .") And it is a term from another language: a symbolic language. （“在Twitter上，这就是我们所说的回复箭头 。”）这是一个来自另一种语言的术语：一种符号语言。

If, instead of the arrow symbol, Twitter used <i>shout out</i> or <i>[Japanese character for reply]</i> (on an English page), that would be consistent with the spec. 如果Twitter使用<i>shout out</i>或<i>[Japanese character for reply]</i> （在英文页面上），而不是箭头符号，那将与规范一致。 Then why not <i>[reply arrow]</i> ? 那为什么不<i>[reply arrow]</i> ？ (I'm talking strictly HTML semantics here, not accessibility, which I'll get to.) （我在这里严格谈论HTML语义，而不是可访问性，我将会这样做。）

As far as I can see, the only part of the spec explicitly violated by icon usage is the "span of text" phrase (when the tag doesn't contain text also). 据我所知，图标用法明确违反规范的唯一部分是“文本范围”短语（当标签也不包含文本时）。 It is clear that the <i> tag is mainly meant for text, but that's a pretty small detail compared with the overall intent of the tag. 很明显， <i>标签主要用于文本，但与标签的整体意图相比，这是一个非常小的细节。 The important question for this tag is not what format of content it contains, but what the meaning of that content is. 此标记的重要问题不是它包含的内容格式，而是该内容的含义。

This is especially true when you consider that the line between "text" and "icon" can be almost nonexistent on websites. 当您认为“text”和“icon”之间的界限在网站上几乎不存在时尤其如此。 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. 文本可能看起来更像一个图标（如在日本示例中）或图标可能看起来像文本（如在jpg按钮中显示“提交”或带有重叠标题的猫照片）或文本可能被替换或增强为通过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. <a>标签最初旨在将用户带到其他地方，但现在它可能会弹出一个灯箱。 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"). 如果有人在规格问题出现之前想出了如何在点击时弹出灯箱，他们仍然应该使用<a>标签，而不是<span> ，即使它与当前定义不完全一致 - 因为它是最接近的，并且仍然与标签的精神一致（“当你点击这里时会发生一些事情”）。 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. 同样处理<i> - 无论你放入其中的任何类型的东西，或者无论你创造性地使用它，它都表达了一个替代或分开的术语的一般概念。

2. The <i> tag adds semantic meaning to an icon element. 2. <i>标签为图标元素添加语义含义。

The alternative option to carry an icon class by itself is <span> , which of course has no semantic meaning whatsoever. 另外一个带有图标类的选项是<span> ，它当然没有任何语义含义。 When a machine asks the <span> what it contains, it says, "I dunno. Could be anything." 当一台机器询问<span>它包含的内容时，它说：“我不知道。可能是什么。” But the <i> tag says, "I contain a different way of saying something than the usual way, or maybe an unfamiliar term." 但是<i>标签说，“我包含了一种不同于通常方式的说法，或者可能是一个不熟悉的术语。” That's not the same as "I contain an icon," but it's a lot closer to it than <span> got! 这与“我包含一个图标”不一样，但它比<span>更接近它！

3. Eventually, common usage makes right. 最终，常见用法是正确的。

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. 除了上述内容之外，值得考虑的是机器阅读器（无论是搜索引擎，屏幕阅读器还是其他）可以随时开始考虑Facebook，Twitter和其他网站使用<i>标签作为图标。 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. 因此，他们可能会使用这种常用的知识来简单地记录“这里可能有一个图标”或者做一些更高级的事情，比如触发查看CSS以获得暗示意义，或者谁知道什么。 So if you choose to use the <i> for icons on your website, you may be providing more meaning than the spec does. 因此，如果您选择在网站上使用<i>图标，则可能会提供比规范更多的含义。

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! 然后你将完成你的代码，用<i>替换<span> 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. 字典坚持必须有空间，Web必须大写。 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'm going ahead and using it. 所以我要继续使用它。

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. 因此， <i>因为规范而为机器提供了更多的意义，它为人类提供了更多的意义，因为我们很容易将“i”与“icon”联系起来， 并且它只有一个字母长。 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. 如果你确保在<i>标签内或它旁边包含等效文本（就像Twitter那样），那么屏幕阅读器就会明白在哪里点击回复，如果CSS没有加载，链接就可用了，人类具有良好视力和体面浏览器的读者可以看到漂亮的图标。 With all this in mind, I don't see the downside. 考虑到这一切，我没有看到缺点。

#5楼

I also found this to be useful when i wanted to place an icon with absolute positioning inside a link <a> tag. 当我想在链接<a>标签内放置一个绝对定位的图标时，我也发现这很有用。

I thought about the <img> tag first, but default styling of those tags inside links typically have border styling and/or shadow effects. 我首先考虑了<img>标签，但链接中这些标签的默认样式通常具有边框样式和/或阴影效果。 Plus, it feels wrong to use an <img> tag without defining an "src" attribute whereas i'm using a background-image style sheet declaration so that the image doesn't ghost and drag. 另外，使用<img>标签而不定义“src”属性感觉不对，而我使用背景图像样式表声明，以便图像不会重影和拖动。

At this point you're thinking of tags like <span> or <i> - in which case <i> makes so much sense as this type of icon. 此时你正在考虑像<span>或<i>这样的标签 - 在这种情况下， <i>对这种类型的图标非常有意义。

All in all i think its benefit besides being intuitive is that it requires minimal style sheet adjustments to make this tag work as an icon. 总而言之，我认为除了直观之外，它的好处是它需要最少的样式表调整才能使这个标签作为一个图标。

#6楼

I thought this looked pretty bad - because I was working on a Joomla template recently and I kept getting the template failing W3C because it was using the <i> tag and that had deprecated, as it's original use was to italicize something, which is now done through CSS not HTML any more. 我认为这看起来非常糟糕 - 因为我最近正在使用Joomla模板而且我一直在使模板失败W3C，因为它使用的是<i>标签并且已经弃用了，因为它的原始用途是将某些东西斜体化，现在是通过CSS而不是HTML完成。

It does make really bad practice because when I saw it I went through the template and changed all the <i> tags to <span style="font-style:italic"> instead and then wondered why the entire template looked strange. 这确实是非常糟糕的做法，因为当我看到它时，我通过模板并将所有<i>标签更改为<span style="font-style:italic"> ，然后想知道为什么整个模板看起来很奇怪。

This is the main reason it is a bad idea to use the <i> tag in this way - you never know who is going to look at your work afterwards and "assume" that what you were really trying to do is italicize the text rather than display an icon. 这是以这种方式使用<i>标签是一个坏主意的主要原因 - 你永远不知道之后谁会看你的工作并且“假设”你真正想要做的是将文本斜体化而不是而不是显示一个图标。 I've just put some icons in a website and I did it with the following code 我刚刚在网站上放了一些图标，我用下面的代码做了

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. 这样我就把所有的图标放在一个类中，所以我所做的任何更改都会影响所有的图标（比方说我想要它们更大或更小，或者是圆形边框等），alt文本让屏幕阅读器有机会告诉人们什么这个图标可能不仅仅是“斜体文字，斜体结尾”（我不知道屏幕阅读器如何阅读屏幕，但我猜它就是这样），标题也让用户有机会鼠标悬停图像并得到一个工具提示，告诉他们图标是什么，以防他们无法弄明白。 Much better than using <i> - and also it passes W3C standard. 比使用<i>好多了 - 而且它也通过了W3C标准。

转载地址：http://ticnb.baihongyu.com/