使用 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 会很棒。

241695 次浏览
小开

这里有一个关于如何在 示例页的无序列表旁边使用 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 技巧上查看异想天开的 Chris Coyier 关于图标字体的文章。

下面是他的一段视频，也是关于如何创建你自己的图标字体的。

小开

@ Tama，你可能想看看这个答案: 使用 Font Awesome 图标作为子弹

基本上，你可以通过只使用 CSS 来实现这一点，而不需要像 FontAwesome 和这里的其他答案所建议的那样额外的标记。

换句话说，你可以使用你在最初的文章中提到的相同的基本标记来完成你所需要的:

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

谢谢。

小开
最佳答案

解决方案:

Http://jsfiddle.net/vr2hp/

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

这里有一个 博客文章，它深入解释了这种技术。

小开

新的 fontawome (版本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

小开

我想建立在上面的一些答案和其他地方给出，并建议使用 绝对定位连同 : 在伪类之前。上面的许多例子(以及类似的问题)都使用了定制的 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;
}

基本上就是这样。您可以在 字体超赞的小抄上获得用于 CSS 内容的 ISO 值。只需使用最后4个字母数字，前面加上一个反斜杠。所以 [&#xf058;]变成了 \f058

小开

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

enter image description here

这里是示范

小开

在 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


提交答案