字体真棒的示例用例就是这样(从
their examples开始):
<ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>
只要列表项为1行,此列表对我的目的是很好的.但如果列表项是多行,那么第二行,并且进一步不会正确缩进(默认情况下).
如果这些图标可以用作标准的css项目符号,那将是很好的,因为这样多行项目会自动缩进.
有没有一个简单和优雅的方式来实现这一点?如果我可以使用这样的标记,这将是非常棒的:
<ul class="icon-bullets"> <li class="icon-ok">Lists</li> <li class="icon-ok">Buttons</li> <li class="icon-ok">Button groups</li> <li class="icon-ok">Navigation</li> <li class="icon-ok">Prepended form inputs</li> </ul>
即重用特定的图标类,但使它们成为li元素的一部分.
解决方法
Johan的答案是不正确的.
Font Awesome使用网络字体,而不是大的背景图像!
Font Awesome使用网络字体,而不是大的背景图像!
应该注意的是,你可以简单地把类放在li标签上,就像这样:
<ul> <li class="icon-ok">Lists</li> <li class="icon-ok">Buttons</li> <li class="icon-ok">Button groups</li> <li class="icon-ok">Navigation</li> <li class="icon-ok">Prepended form inputs</li> </ul>
然而,有一个警告,即使使用条件的ie7样式表,它也不会在ie7中运行.
列表项目消失,只是离开图标!
如果你不支持ie7,那就简单地省略条件样式表,那么至少那些不幸使用ie7将仍然能够读取你的列表,而不是图标!
希望这可以帮助.