Html 如何使用带有图标的 <i> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17471390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use <i> tag with icons?
提问by Fredrik Westerlund
I have an icon set and CSS code to bind the icons to an element, but I can't get the "i" tag to work with the icon set w/o filling it with content. Do I have to add custom code for the tag?
我有一个图标集和 CSS 代码来将图标绑定到一个元素，但我无法让“i”标签与没有填充内容的图标集一起使用。我是否必须为标签添加自定义代码？
I've seen Twitter Bootstrap use the "i" tag for icons. Also, I've tried the span tag, and that doesn't work either. It works when I use "li" or "div" tags, tho.
我见过 Twitter Bootstrap 使用“i”标签作为图标。另外，我试过 span 标签，但也不管用。当我使用“li”或“div”标签时，它会起作用。
What am I missing? Thanks in advance!
我错过了什么？提前致谢！
This does notwork
这确实不工作
<i class="icon icon-accessibility"></i>
This works
这有效
<i class="icon icon-accessibility">BLAH</i>
example of my CSS
我的 CSS 示例
.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }
回答by Fiona - myaccessible.website
The <i>tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.
该<i>标签用于表示其中的文本应为斜体。在这种情况下使用它没有意义。
If you still want to keep it and not use something else like a div, the problem is that the <i>tag is an inline element, not a block element like a div. Add display: inline-block;to your CSS and it will work.
如果你仍然想保留它而不使用像 a 这样的其他东西div，问题是<i>标签是一个内联元素，而不是像 a 那样的块元素div。添加display: inline-block;到您的 CSS 中，它将起作用。
回答by Explosion Pills
You can just use an imgtag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.
您可以只使用img标签来显示图标。这在语义上更有意义，因为它毕竟是嵌入的内容，并且图标将是可触知的。
回答by André Dion
Semantics aside, you're not seeing anything because the <i/>element is inlineby default. You likely want to add display: inline-block;to the .iconruleset to match how Bootstrap renders their icons.
除了语义，您什么也看不到，因为该<i/>元素是inline默认的。您可能希望添加display: inline-block;到.icon规则集以匹配 Bootstrap 呈现其图标的方式。
If you care about semantics, use a <div/>or <span/>instead.
如果您关心语义，请改用 a<div/>或<span/>。
回答by Salih K
Brthr, just add a 'display: inline-block' to your '.icon', it might work
brthr，只需在您的“.icon”中添加一个“display: inline-block”，它可能会起作用
