自定义li list-样式与字体-真棒图标

Question

我想知道是否可以利用font awesome（或任何其他标志性字体）类来创建自定义

我目前使用jQuery来做这件事，即：

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

但是，当

有什么建议吗？




Answer 1

我想提供一个替代的，更简单的解决方案，这是针对FontAwesome的。如果你使用的是不同的标志性字体，JOPLOmacedo的答案仍然可以使用。

FontAwSeries现在使用CSS类在内部处理列表样式。

下面是官方的例子：

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Answer 2

根据字体真棒文档：

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

或者，使用Jade：

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Answer 3

CSS列表和计数器模块第3级引入了::标记伪元素。据我所知，它会允许这样的事情。不幸的是，似乎没有浏览器支持它。

您可以做的是在父级ul中添加一些填充，并将图标拉入该填充：

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>