如何使用带有图标的<i>标签?</i>

时间:2013-07-04 13:20:42

标签: html css icons

我有一个图标集和CSS代码将图标绑定到一个元素,但是我无法使用“i”标记来处理图标集,而不是用内容填充它。我是否必须为标签添加自定义代码?

我见过Twitter Bootstrap使用“i”标签作为图标。 此外,我已经尝试了span标记,但这也不起作用。当我使用“li”或“div”标签时,它可以工作。

我错过了什么?提前谢谢!

工作

<i class="icon icon-accessibility"></i>

有效

<i class="icon icon-accessibility">BLAH</i>

我的CSS示例

.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; } 

4 个答案:

答案 0 :(得分:8)

<i>标记用于表示其中的文本应为斜体。在这种情况下使用它是没有意义的。

如果您仍想保留它而不使用div之类的其他内容,则问题是<i>标记是内联元素,而不是像div这样的块元素。将display: inline-block;添加到您的CSS中即可。

答案 1 :(得分:2)

Brthr,只需在'。''中添加'display:inline-block'即可,

答案 2 :(得分:1)

除了语义之外,您没有看到任何内容,因为<i/>元素默认为inline。您可能希望将display: inline-block;添加到.icon规则集,以匹配Bootstrap呈现其图标的方式。

如果您关心语义,请改用<div/><span/>

答案 3 :(得分:0)

您只需使用img标记即可显示图标。这在语义上更有意义,因为它毕竟是嵌入式内容,并且图标将是可触及的。