如何使用fontawesome图标作为无序列表的默认项目符号？

Question

在fontawesome的示例页面上,他们显示了以下代码:

使用fa-ul和fa-li可以轻松替换无序列表中的默认项目符号.

<ul class="fa-ul">   
    <li><i class="fa-li fa fa-check-square"></i>Listicons (like these)</li>   
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>   
    <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>   
    <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> 
</ul>

这工作正常,但我的wordpress网站上有很多无序列表,我想知道是否有可能使fontawesome复选框成为整个网站的默认项目符号？我知道我的主题使用LESS,因此任何LESS代码都是可以接受的.

我在考虑在css中做类似这样的事情:

ul li i {
   class="fa-li fa fa-square";
}

但我不认为用css是可能的.我看着LESS,我认为mixins可能有用,但我无法弄清楚正确的语法.

任何帮助深表感谢.

Answer 1

只要看看他们是如何让图标显示在他们的网站上的.他们使用一个before伪元素,该伪元素具有FontAwesome font-family和使实际图标显示他们使用该content属性.

http://jsfiddle.net/kqa6B/

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

.

li {
    list-style:none;
}

li:before {
    font-family:'FontAwesome';
    content:"\f14a";
}