Question

我想知道是否可以使用font-awesome（或任何其他标志性字体）类来创建自定义<li>列表样式类型？

我目前正在使用jQuery来执行此操作，即：

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

但是，当<li>文本在页面中换行时，这样做不正确，因为它认为图标是文本的一部分，而不是实际的子弹指示器。

任何提示？

Answer 1

CSS Lists and Counters Module Level 3引入了::marker伪元素。从我的理解，它将允许这样的事情。 Unfortunately, no browser seems to support it

您可以做的是向父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 Documentation：

<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 now handles list styles internally with CSS classes

这是官方的例子：

<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的答案。他的解决方案是我最喜欢的，但是当li有多行时，我总是遇到缩进问题。找到带边距等的正确缩进是很繁琐的。但这可能只涉及我。

对我来说绝对定位：在伪元素之前效果最好。我在ul上设置了padding-left，在：before元素上设置了负位置，与ul的padding-left相同。要获取内容距离：before元素右边，我只需在li上设置padding-left。当然，李必须有相对的位置。例如

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

Answer 6

如果要上传图像作为ul {list-style-image: url("")}图标，则可以使用li。

Answer 7

我做了两件事，受到@OscarJovanny评论的启发，并做了一些修改。

第1步：

从Here以svg格式下载图标文件，因为我只需要很棒的字体中的该图标即可

第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>

结果

enter image description here

Answer 8

现在evergreen browsers中提供了::marker元素，这就是使用它的方式，包括使用:hover来更改标记。如您所见，现在您可以将所需的任何Unicode字符用作列表项标记，甚至可以使用自定义计数器。

@charset "UTF-8";
@counter-style fancy {
  system: fixed;
  symbols: ? ? ?;
  suffix: " ";
}

p {
  margin-left: 8em;
}

p.note {
  display: list-item;
  counter-increment: note-counter;
}

p.note::marker {
  content: "Note " counter(note-counter) ":";
}

ol {
  margin-left: 8em;
  padding-left: 0;
}

ol li {
  list-style-type: lower-roman;
}

ol li::marker {
  color: blue;
  font-weight: bold;
}

ul {
  margin-left: 8em;
  padding-left: 0;
}

ul.happy li::marker {
  content: "?";
}

ul.happy li:hover {
  color: blue;
}

ul.happy li:hover::marker {
  content: "?";
}

ul.fancy {
  list-style: fancy;
}

<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<ol>
  <li>This is the first item.
    <li>This is the second item.
      <li>This is the third item.
</ol>
<p>This is the end.</p>

<ul class="happy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="fancy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

8 个答案: