We'd like to be able to use a Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) icon as a bullet point for unordered lists in a CMS.

我们希望能够使用字体令人敬畏(http://fortawesome.github.com/Font-Awesome/)图标作为CMS中无序列表的项目符号。

The text editor on the CMS only outputs raw HTML so additional elements/ classes cannot be added.

CMS上的文本编辑器只输出原始的HTML，因此不能添加额外的元素/类。

This means displaying the icons when the mark up looks like this:

这意味着当标记看起来像这样时显示图标：

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

The first problem I can see if Font Awesome requires a different font-family attribute, which would require a separate element.

我可以看到的第一个问题是，Font Awesom是否需要不同的字体系列属性，这将需要一个单独的元素。

Is this possible using pure CSS? Or would I have to append the element to the beginning of each list item using something like jQuery?

使用纯CSS是否可能做到这一点？或者，我是否必须使用类似jQuery的命令将元素附加到每个列表项的开头？

I realise we can use a fall back of a background image, but it would be great to use Font Awesome if possible.

我意识到我们可以使用背景图像的后退，但如果可能的话，使用Font Awesom将是很好的。

优秀答案推荐

Solution:

解决方案：

http://jsfiddle.net/VR2hP/

Http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Here's a blog post which explains this technique in-depth.

这里有一篇博客文章，深入解释了这项技术。

The new fontawesome (version 4.0.3) makes this really easy to do. We simply use the following classes:

新的Fontawous(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>

As per this (new) url: http://fontawesome.io/examples/#list

根据此(新)URL：http://fontawesome.io/examples/#list

I'd like to build upon some of the answers above and given elsewhere and suggest using absolute positioning along with the :before pseudo class. A lot of the examples above (and in similar questions) are utilizing custom HTML markup, including Font Awesome's method of handling. This goes against the original question, and isn't strictly necessary.

我想在上面和其他地方给出的一些答案的基础上，建议使用绝对定位和：BEFORE伪类。上面的许多例子(以及类似的问题中的例子)都使用了定制的HTML标记，包括Font Awesom的处理方法。这与最初的问题背道而驰，也没有严格的必要。

DEMO HERE

演示请点击此处

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;
}

That's basically it. You can get the ISO value for use in CSS content on the Font Awesome cheatsheet. Simply use the last 4 alphanumerics prefixed with a backslash. So [] becomes \f058

基本上就是这样。您可以在Font Awese小抄上获取用于css内容的ISO值。只需在最后4个字母数字前面加上一个反斜杠即可。因此[；]变成了\f058

There's an example of how to use Font Awesome alongside an unordered list on their examples page.

在他们的示例页面上，有一个如何在无序列表旁边使用Font Awesom的示例。

<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>

If you can't find it working after trying this code then you're not including the library correctly. According to their website, you should include the libraries as such:

如果您在尝试此代码后仍未发现它可以工作，则说明您没有正确包含该库。根据他们的网站，您应该包括这样的图书馆：

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Also check out the whimsical Chris Coyier's post on icon fonts on his website CSS Tricks.

还可以看看Chris Coyier在他的网站css Tricks上关于图标字体的帖子。

Here's a screencast by him as well talking about how to create your own icon font-face.

下面是他关于如何创建自己的图标字体的截屏视频。

In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.

在Font Awese5中，可以使用纯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;
}

Without the correct font-weight, it will only show a blank square.

如果没有正确的字体粗细，它将只显示一个空白正方形。

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

@Tama, you may want to check this answer: Using Font Awesome icons as bullets

@Tama，你可能想检查这个答案：使用字体令人敬畏的图标作为项目符号

Basically you can accomplish this by using only CSS without the need for the extra markup as suggested by FontAwesome and the other answers here.

基本上，您只需使用CSS即可完成此任务，不需要额外的标记，如FontAwesom和这里的其他答案所建议的那样。

In other words, you can accomplish what you need using the same basic markup you mentioned in your initial post:

换句话说，你可以使用你在最初的帖子中提到的相同的基本标记来完成你需要的东西：

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Thanks.

谢谢。

My solution using standard <ul> and <i> inside <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>

DEMO HERE

这里演示

I like the icon with a background colour.

我喜欢背景色的图标。

ul.mylist {
  list-style-type: none;
}

ul.mylist li {
  margin: 0.5rem;
}

ul.mylist li:before {
  font-family: 'Font Awesome 5 free';
  content: "\f00c";
  font-weight: 900;
  color: white;
  border: 1px solid #00a550;
  padding: 0.2rem;
  margin-right: 0.3rem;
  background: #00a550;
}