CSS 自定义 li 列表样式，带有字体很棒的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13354578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom li list-style with font-awesome icon
提问by Darrrrrren
I am wondering if it's possible to utilize font-awesome (or any other iconic font) classes to create a custom <li>list-style-type?
我想知道是否可以利用 font-awesome（或任何其他标志性字体）类来创建自定义<li>列表样式类型？
I am currently using jQuery to do this, ie:
我目前正在使用 jQuery 来做到这一点，即：
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
However, this doesn't style properly when the <li>text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator.
但是，当<li>文本环绕整个页面时，这不会正确设置样式，因为它认为图标是文本的一部分，而不是实际的项目符号指示器。
Any tips?
有小费吗？
回答by banzomaikaka
The CSS Lists and Counters Module Level 3introduces the ::markerpseudo-element. From what I've understood it would allow such a thing. Unfortunately, no browser seems to support it.
的CSS解释和计数器模块级别3介绍了::marker伪元素。据我所知，它会允许这样的事情。不幸的是，似乎没有浏览器支持它。
What you can do is add some padding to the parent uland pull the icon into that padding:
您可以做的是向父级添加一些填充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>Adjust the padding/font-size/etc to your liking, and that's it. Here's the usual fiddle: http://jsfiddle.net/joplomacedo/a8GxZ/
根据您的喜好调整填充/字体大小/等，就是这样。这是通常的小提琴：http: //jsfiddle.net/joplomacedo/a8GxZ/
=====
======
This works with any type of iconic font. FontAwesome, however, provides their own way to deal with this 'problem'. Check out Darrrrrren's answer below for more details.
这适用于任何类型的标志性字体。然而，FontAwesome 提供了自己的方法来处理这个“问题”。查看下面 Darrrrrren 的回答以了解更多详细信息。
回答by cutemachine
As per the 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>
Or, using Jade:
或者，使用 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
回答by Darrrrrren
I'd like to provide an alternate, easier solution that is specific to FontAwesome. If you're using a different iconic font, JOPLOmacedo's answer is still perfectly fine for use.
我想提供一个特定于 FontAwesome 的替代的、更简单的解决方案。如果您使用不同的标志性字体，JOPLOmacedo 的答案仍然非常适合使用。
FontAwesome now handles list styles internally with CSS classes.
FontAwesome 现在使用 CSS 类在内部处理列表样式。
Here's the official example:
这是官方的例子：
<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>
回答by habsi
I wanted to add to JOPLOmacedo's answer. His solution is my favourite, but I always had problem with indentation when the li had more than one line. It was fiddly to find the correct indentation with margins etc. But this might concern only me.
我想添加到 JOPLOmacedo 的答案中。他的解决方案是我最喜欢的，但是当 li 有多于一行时，我总是遇到缩进问题。找到带有边距等的正确缩进很麻烦。但这可能只与我有关。
For me absolute positioning of the :beforepseudo-element works best. I set padding-lefton ul, negative position left on the :beforeelement, same as ul's padding-left. To get the distance of the content from the :beforeelement right I just set the padding-lefton the li. Of course the li has to have position relative. For example
对我来说，: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 ... */
}
Hopefully this is clear and has some value for someone else than me.
希望这很清楚，并且对我以外的其他人也有一些价值。
回答by Oscar Jovanny
I did it like this:
我是这样做的：
li {
list-style: none;
background-image: url("./assets/img/control.svg");
background-repeat: no-repeat;
background-position: left center;
}
Or you can try this if you want to change the color:
或者如果你想改变颜色，你可以试试这个：
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;
}
