带有font-awesome图标的自定义li列表样式

Question

我想知道是否可以利用font-awesome(或任何其他标志性字体)类来创建自定义<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>

根据自己的喜好调整padding/font-size/etc,就是这样.这是通常的小提琴:http://jsfiddle.net/joplomacedo/a8GxZ/

=====

这适用于任何类型的标志性字体.然而,FontAwesome提供了自己的方法来处理这个"问题".有关详细信息,请查看下面的Darrrrrren的答案.

Answer 2

根据Font Awesome文档:

<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

我想提供一个特定于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

受@OscarJovanny 评论的启发，我做了两件事，并进行了一些技巧。

步骤1：

• 从这里下载 svg 图标文件，因为我只需要 font Awesome 中的这个图标

第2步：

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

结果

Answer 5

我想添加到 JOPLOmacedo 的答案中。他的解决方案是我最喜欢的，但是当 li 有多于一行时，我总是遇到缩进问题。找到带有边距等的正确缩进很麻烦。但这可能只与我有关。

对我来说，:before伪元素的绝对定位效果最好。我padding-left在 ul 上设置，:before元素左侧的负位置，与 ul's 相同padding-left。为了使内容与:before元素的距离正确，我只需padding-left在 li 上设置。当然 li 必须有相对位置。例如

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 ... */
}

希望这很清楚，并且对我以外的其他人也有一些价值。