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

【问题标题】：How can I use fontawesome icons as the default bullet for unordered lists?如何使用 fontawesome 图标作为无序列表的默认项目符号？
【发布时间】：2014-01-16 14:26:49
【问题描述】：

在 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 可能很有用，但我无法弄清楚正确的语法。

非常感谢任何帮助。

【问题讨论】：

我不明白为什么人们会投反对票，甚至不评论为什么。我不知道是不是只有我，但我认为它应该被强迫。
顺便说一句。 +1，因为我有同样的问题，并且因为没有明显原因的 -1（对我来说）。

标签： css wordpress html-lists less font-awesome

【解决方案1】：

看看他们实际上是如何让图标出现在他们的网站上的。他们使用具有FontAwesome font-family 的before 伪元素，并使用content 属性来显示实际图标。

http://jsfiddle.net/kqa6B/

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

li {
    list-style:none;
}

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

【讨论】：