我有一个图标集和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; }
答案 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
标记即可显示图标。这在语义上更有意义,因为它毕竟是嵌入式内容,并且图标将是可触及的。