自李列表样式与字体真棒图标(Custom li list-style with font-aweso

我想知道是否有可能利用字体真棒（或任何其他标志性的字体）类来创建一个自定义的<li>列表样式类型？

我目前使用jQuery做到这一点，即：

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

然而，这并不正确，当风格<li>文本在页面包装，因为它认为该图标是文本，而不是实际的子弹指标的一部分。

有小费吗？

Answer 1:

的CSS解释和计数器模块级别3介绍了::marker伪元素。从我的理解是会允许这样的事情。不幸的是，没有浏览器似乎支持它。

你可以做的就是添加一些填充到父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>

调整填充/字体大小/等根据自己的喜好，这就是它。下面是通常的小提琴： http://jsfiddle.net/joplomacedo/a8GxZ/

=====

这适用于任何类型的标志性字体。 FontAwesome，然而，提供了他们自己的方式来处理这个“问题”。退房Darrrrrren的回答下面的更多细节。

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>

或者，使用玉：

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:

我想提供替代，简单的解决方案是特定于FontAwesome。如果您使用的是不同的标志性字体，JOPLOmacedo的回答仍然是使用完全没有问题。

FontAwesome现在处理列表样式内部与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 4:

我想添加到JOPLOmacedo的答案。他的解决方案是我最喜欢的，但我一直有问题，压痕当李有一个以上的线。这是繁琐找到与利润率等正确的缩进但只有这可能与我无关。

对的我绝对定位：伪元素效果最好了。我设置填充左上UL，负位置上留下：元素之前，同UL的填充左。从获得的内容的距离：元素之前对的，我只是设置填充左上栗。当然，李必须有相对位置。例如

ul {
    margin: 0 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}

li {
    position: relative;
    padding-left: 0.4em; /* text distance to icon */

}

li:before {
        font-family: 'my-icon-font';
        content: 'character-code-here';
        position: absolute;
        left: -1em; /* same as ul padding-left */
        top: 0.65em; /* depends on character, maybe use padding-top instead */
        /*  .... more styling, maybe set width etc ... */
}

但愿这是明确的，有一个人比我其他的一些价值。

Answer 5:

我这样做是这样的：

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

或者，如果你想改变颜色，你可以试试这个：

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}