Html 我应该为图标使用 <i> 标签而不是 <span> 吗？

Should I use <i> tag for icons instead of <span>?

提问by Jashwant

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. It also uses <i>tag to display icons.

另外，今天我研究了 Twitter 的 Bootstrap。它还使用<i>标签来显示图标。

But,

但，

From the HTML5 spec:

从HTML5 规范：

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 spanto display icons and it seems to be working for me till now.

我正在使用span显示图标，直到现在它似乎对我有用。

Update:

更新：

Bootstrap 3 now uses spanfor icons. Official Doc

Bootstrap 3 现在span用于图标。官方文件

回答by Quentin

Why are they using <i>tag to display icons ?

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

Because it is:

因为它是：

• Short
• i stands for icon (although not in HTML)

• 短的
• i 代表图标（虽然不是在 HTML 中）

Is it not a bad practice ?

这不是一个坏习惯吗？

Awful practice. It is a triumph of performance over semantics.

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

回答by Holly

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.

最后，我得出的结论是，这种做法并不是那么没有语义（这是一个词吗？）。事实上，除了简短和“i is for icon”的良好关联之外，我认为当一个简单的<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. 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.

虽然这可能不是 W3 主要考虑的，但在我看来，官方规范<i>可以很容易地容纳一个图标。毕竟，回复箭头符号以另一种方式表示“回复”。它表达了一个读者可能不熟悉的技术术语，通常会用斜体表示。（“在 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. Then why not <i>[reply arrow]</i>? (I'm talking strictly HTML semantics here, not accessibility, which I'll get to.)

如果 Twitter 使用<i>shout out</i>或<i>[Japanese character for reply]</i>（在英文页面上）而不是箭头符号，那将与规范一致。那为什么不<i>[reply arrow]</i>呢？（我在这里说的是严格的 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. The important question for this tag is not what format of content it contains, but what the meaning of that content is.

据我所知，图标使用明确违反规范的唯一部分是“文本范围”短语（当标签也不包含文本时）。很明显，该<i>标签主要用于文本，但与标签的整体意图相比，这是一个很小的细节。这个标签的重要问题不是它包含什么格式的内容，而是该内容的含义是什么。

This is especially true when you consider that the line between "text" and "icon" can be almost nonexistent on websites. 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. 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.

当您考虑到网站上几乎不存在“文本”和“图标”之间的界限时，尤其如此。文本可能看起来更像一个图标（如日本示例）或图标可能看起来像文本（如显示“提交”的 jpg 按钮或带有重叠标题的猫照片）或文本可能被替换或增强通过 CSS 的图像。文字、图像——谁在乎？都是内容。只要每个人——有障碍的人类、有障碍的浏览器、搜索引擎蜘蛛和其他各种机器都能理解这个意思，我们就完成了我们的工作。

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. 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"). 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.

因此，规范的作者没有考虑（或选择）澄清这一点的事实不应该束缚我们做有意义的事情并且与标签的精神一致。该<a>标签最初旨在将用户带到其他地方，但现在它可能会弹出一个灯箱。大呼，对吧？如果有人在规范赶上之前想出了如何在点击时弹出灯箱，他们仍然应该使用<a>标签，而不是 a <span>，即使它与当前定义不完全一致 - 因为它最接近并且是仍然符合标签的精神（“当你点击这里就会发生一些事情”）。同样的处理<i>- 无论你放入什么类型的东西，或者你如何创造性地使用它，

2. The <i>tag addssemantic 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. When a machine asks the <span>what it contains, it says, "I dunno. Could be anything." But the <i>tag says, "I contain a different way of saying something than the usual way, or maybe an unfamiliar term." That's not the same as "I contain an icon," but it's a lot closer to it than <span>got!

单独携带图标类的另一种选择是<span>，当然它没有任何语义意义。当机器询问<span>它包含什么时，它会说：“我不知道。可能是任何东西。” 但是<i>标签上写着，“我包含了一种不同于通常的表达方式，或者可能是一个不熟悉的术语。” 这与“我包含一个图标”不同，但它比<span>得到的更接近它！

3. Eventually, common usage makes right.

3. 最终，常见用法是正确的。

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. 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. So if you choose to use the <i>for icons on your website, you may be providing more meaning than the spec does.

除了上述内容之外，值得考虑的是机器阅读器（无论是搜索引擎、屏幕阅读器还是其他任何东西）可能随时开始考虑到 Facebook、Twitter 和其他网站使用该<i>标签作为图标。他们并不关心规范，因为他们关心通过任何必要的方式从代码中提取含义。所以他们可能会使用这些常见用法的知识来简单地记录“这里可能有一个图标”，或者做一些更高级的事情，比如触发查看 CSS 以获取含义的提示，或者谁知道是什么。因此，如果您选择<i>在您的网站上使用for 图标，您可能会提供比规范更多的含义。

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! 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. 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.

此外，如果这种用法变得广泛，将来很可能会包含在规范中。然后你将检查你的代码，用<span>s替换<i>s！因此，了解规范的方向可能是有意义的，尤其是当它与当前规范没有明显冲突时。常见用法往往比其他方式更倾向于规定语言规则。如果你够大了，你还记得“Web site”这个词刚出现时的官方拼写吗？字典坚持必须有一个空间，Web 必须大写。这有语义上的原因。但常见的用法是，“无论如何，那很愚蠢。我使用'网站'，因为它更简洁，看起来更好。” 而不久之后，

4. So I'm going ahead and using it.

4. 所以我继续使用它。

So, <i>provides more meaning to machines because of the spec, it provides more meaning to humans because we easily associate "i" with "icon", andit's only one letter long. 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. With all this in mind, I don't see the downside.

因此，<i>由于规范为机器提供了更多意义，它为人类提供了更多意义，因为我们很容易将“i”与“图标”联系起来，而且它只有一个字母长。赢！并且如果您确保在<i>标签内或标签旁边包含等效文本（如 Twitter 所做的那样），那么屏幕阅读器就会知道点击何处进行回复，如果 CSS 未加载，则链接可用，并且人类阅读器具有良好的视力和不错的浏览器会看到一个漂亮的图标。考虑到所有这些，我没有看到缺点。

回答by Jashwant

Quentin's answer clearly states that itag should not be used to define icons.

Quentin 的回答明确指出i不应使用标签来定义图标。

But, Holly suggested that spanhas no meaning in itself and voted in favor of iinstead of spantag.

但是，霍莉认为这span本身没有意义，并投票支持i而不是span标记。

Few suggested to use imgas it's semantic and contains alttag. But, we should not also use imgbecause even empty srcsends a request to server. Read here

很少有人建议使用img它，因为它是语义的并且包含alt标签。但是，我们也不应该使用，img因为即使是空的也会src向服务器发送请求。在这里阅读

I think, the correct way would be,

我认为，正确的方法是，

<span class="icon-fb" role="img" aria-label="facebook"></span>

<span class="icon-fb" role="img" aria-label="facebook"></span>

This solves the issue of no alttag in spanand makes it accessible to vision-impaired users. It's semantic and not misusing ( hacking ) any tag.

这解决了没有alt标签的问题，span并使视力受损的用户可以访问。它是语义的，而不是滥用（黑客）任何标签。

回答by Timothy Perez

I take a totally different approach to everyone else's answers here altogether. Let me prefix my solution and argue by stating that sometimes standards and conventions are meant to be broken, especially in the context of the standard HTML lexical tag definitions.

我对这里其他人的答案采取完全不同的方法。让我为我的解决方案加上前缀，并指出有时标准和约定是要被打破的，尤其是在标准 HTML 词汇标签定义的上下文中。

There's nothing to stop you from creating custom elements that are self-descriptive to it's very purpose.

没有什么可以阻止您创建自描述其目的的自定义元素。

Both modern browsers and even IE 6+ (w/ shim) can support things like:

现代浏览器甚至 IE 6+（带垫片）都可以支持以下内容：

<icon class="plus">

or

或者

<icon-add>

Just make sure to normalize the tag:

只要确保规范化标签：

 icon { display:block; margin:0; padding:0; border:0; ... }

and use a shim if you need to support IE9 or earlier (see post below).

如果您需要支持 IE9 或更早版本，请使用垫片（请参阅下面的帖子）。

Check out this StackOverflow Post:

看看这个 StackOverflow 帖子：

Is there a way to create your own html tag in HTML5

有没有办法在 HTML5 中创建自己的 html 标签

To further my argument, both Google's Angular Directives and the new Polymer projects utilize the concept of custom HTML tags.

为了进一步说明我的观点，Google 的 Angular Directives 和新的 Polymer 项目都使用了自定义 HTML 标签的概念。

回答by Ricardo Zea

My guess: Because Twitter sees the need to support legacy browsers, otherwise they would be using the :before/ :afterpseudo-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.

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

It's a bad practice when you use extra markup for styling reasons, that's why pseudo-elementswere 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. The fact that icons start with an 'i'and that there's an <i>tag, is completely coincidental.

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

回答by TheKLF99

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've just put some icons in a website and I did it with the following code

这是以<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.

这样我的所有图标都在一个班级中，所以我所做的任何更改都会影响所有图标（比如我希望它们更大或更小，或圆形边框等），替代文本让屏幕阅读器有机会告诉人们什么图标可能不仅仅是“斜体文本，斜体结尾”（我不完全知道屏幕阅读器是如何阅读屏幕的，但我猜是这样的），并且标题也让用户有机会将鼠标悬停图像并获得一个工具提示，告诉他们图标是什么，以防他们无法弄清楚。比使用好多了<i>- 而且它通过了 W3C 标准。

回答by Emery King

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. 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>标签，但链接内这些标签的默认样式通常具有边框样式和/或阴影效果。另外，在<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.

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