我们希望能够使用 Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) 图标作为 CMS 中无序列表的要点。
CMS 上的文本编辑器仅输出原始 HTML，因此无法添加其他元素/类。
这意味着当标记看起来像这样时显示图标：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
我可以看到的第一个问题是 Font Awesome 是否需要不同的 font-family 属性，这需要单独的元素。
这可能使用纯CSS吗？或者我是否必须使用 jQuery 之类的东西将元素附加到每个列表项的开头？
我意识到我们可以使用背景图像的后备，但如果可能的话，使用 Font Awesome 会很棒。
解决方案：
ul li:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
这是一篇博文，深入解释了这种技术。
新的 fontawesome（4.0.3 版）让这很容易做到。我们只需使用以下类：
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons (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>
根据这个（新）网址： http: //fontawesome.io/examples/#list
我想建立在上面和其他地方给出的一些答案的基础上，并建议使用绝对定位以及:before 伪类。上面的许多示例（以及类似问题中）都使用了自定义 HTML 标记，包括 Font Awesome 的处理方法。这与最初的问题背道而驰，并不是绝对必要的。
ul {
list-style-type: none;
padding-left: 20px;
}
li {
position: relative;
padding-left: 20px;
margin-bottom: 10px
}
li:before {
position: absolute;
top: 0;
left: 0;
font-family: FontAwesome;
content: "\f058";
color: green;
}
基本上就是这样。您可以在Font Awesome 备忘单上获取用于 CSS 内容的 ISO 值。只需使用带有反斜杠前缀的最后 4 个字母数字。所以[]变成\f058
在他们的示例页面上有一个如何在无序列表旁边使用 Font Awesome 的示例。
<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>
如果您在尝试此代码后找不到它工作，那么您没有正确包含该库。根据他们的网站，您应该包括以下库：
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
还可以在他的网站CSS Tricks上查看异想天开的Chris Coyier 关于图标字体的帖子。
这是他的截屏视频，还讨论了如何创建自己的图标字体。
@Tama，你可能想检查这个答案：Using Font Awesome icons as bullets
基本上，您可以通过仅使用 CSS 来完成此操作，而无需 FontAwesome 和此处的其他答案所建议的额外标记。
换句话说，您可以使用您在初始帖子中提到的相同基本标记来完成您需要的事情：
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
谢谢。
在 Font Awesome 5 中，可以使用纯 CSS 来完成，如上述一些答案中的一些修改。
ul {
list-style-type: none;
}
li:before {
position: absolute;
font-family: 'Font Awesome 5 free';
/* Use the Name of the Font Awesome free font, e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Brand' for Brands symbols.
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
*/
content: "\f1fc"; /* Unicode value of the icon to use: */
font-weight: 900; /* This is important, change the value according to the font family name
used above. See the link below */
color: red;
}
如果没有正确的字体粗细，它只会显示一个空白方块。
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
我使用标准<ul>和<i>内部的解决方案<li>
<ul>
<li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
<li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
<li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
<li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
</ul>
