css – 使用Font Awesome图标作为项目符号

前端之家收集整理的这篇文章主要介绍了css – 使用Font Awesome图标作为项目符号前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
字体真棒的示例用例就是这样(从 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使用网络字体,而不是大的背景图像!

应该注意的是,你可以简单地把类放在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将仍然能够读取你的列表,而不是图标!

希望这可以帮助.

原文链接:https://www.f2er.com/css/216564.html

猜你在找的CSS相关文章