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”标签来处理这个图标集w/o填充它的内容。我需要为标签添加自定义代码吗?
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.
我已经看到推特的引导使用“我”标签的图标。而且，我已经尝试了span标签，这也不起作用。当我使用“li”或“div”标签时，它是有效的。
What am I missing? Thanks in advance!
我缺少什么?提前谢谢!
This does not work
这并不工作
<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; }
4 个解决方案
#1
8
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.
标记用于表示其中的文本应该是斜体。在这种情况下使用它是没有意义的。
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.
如果您仍然想保留它，而不使用div之类的其他东西，那么问题是标记是一个内联元素，而不是div之类的块元素。对于你的CSS，它会起作用。
#2
2
Brthr, just add a 'display: inline-block' to your '.icon', it might work
Brthr，只要在你的“显示”中添加一个“display: inline-block”就可以了。图标”,它可能会奏效
#3
1
Semantics aside, you're not seeing anything because the <i/> element is inline by default. You likely want to add display: inline-block; to the .icon ruleset to match how Bootstrap renders their icons.
除了语义之外，您看不到任何内容，因为元素默认是内联的。您可能需要添加display: inline-block;到.icon规则集，以匹配引导程序如何显示它们的图标。
If you care about semantics, use a <div/> or <span/> instead.
如果您关心语义，可以使用
或 。#4
0
You can just use an img tag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.
您可以使用img标签来显示图标。这在语义上更有意义，因为它毕竟是嵌入的内容，图标将是明显的。
#1
8
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.
标记用于表示其中的文本应该是斜体。在这种情况下使用它是没有意义的。
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.
如果您仍然想保留它，而不使用div之类的其他东西，那么问题是标记是一个内联元素，而不是div之类的块元素。对于你的CSS，它会起作用。
#2
2
Brthr, just add a 'display: inline-block' to your '.icon', it might work
Brthr，只要在你的“显示”中添加一个“display: inline-block”就可以了。图标”,它可能会奏效
#3
1
Semantics aside, you're not seeing anything because the <i/> element is inline by default. You likely want to add display: inline-block; to the .icon ruleset to match how Bootstrap renders their icons.
除了语义之外，您看不到任何内容，因为元素默认是内联的。您可能需要添加display: inline-block;到.icon规则集，以匹配引导程序如何显示它们的图标。
If you care about semantics, use a <div/> or <span/> instead.
如果您关心语义，可以使用
或 。#4
0
You can just use an img tag to display the icon. This makes more sense semantically since it is embedded content after all, and the icon will be palpable.
您可以使用img标签来显示图标。这在语义上更有意义，因为它毕竟是嵌入的内容，图标将是明显的。