Question

我们希望能够使用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会很棒。

Answer 1

解决方案：

http://jsfiddle.net/VR2hP/

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

这是一个blog post，它深入地解释了这项技术。

Answer 2

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

Answer 3

我想基于上面的一些答案并在其他地方给出并建议使用绝对定位以及：在伪类之前。上面的很多例子（以及类似的问题）都在使用自定义HTML标记，包括Font Awesome的处理方法。这违背了原来的问题，并不是绝对必要的。

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

基本上就是这样。您可以在Font Awesome cheatsheet上获取用于CSS内容的ISO值。只需使用前缀为反斜杠的最后4个字母数字。因此[]变为\f058

Answer 4

有一个例子，说明如何在examples page上使用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">

另请查看其网站Chris Coyier's post on icon fonts上的异想天开的CSS Tricks。

Here's a screencast由他来谈论如何创建自己的图标font-face。

Answer 5

@Tama，您可能需要查看以下答案：Using Font Awesome icons as bullets

基本上你可以通过只使用CSS来完成这个，而不需要FontAwesome建议的额外标记和其他答案。

换句话说，您可以使用您在初始帖子中提到的相同基本标记来完成所需的操作：

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

感谢。

Answer 6

我的解决方案使用<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>

DEMO HERE

Answer 7

在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

使用Font Awesome图标作为项目符号点，具有单个列表项元素

7 个答案: