Answers:
的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的答案以获取更多详细信息。
font-weight: 900;
根据字体真棒文档:
<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
<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
我想提供一个特定于FontAwesome的替代解决方案。如果您使用其他图标字体,则JOPLOmacedo的答案仍然非常适合使用。
这是官方示例:
<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>
我想添加到JOPLOmacedo的答案中。他的解决方案是我的最爱,但是当li有多行时,我总是对缩进有疑问。找到带有边距等的正确缩进是很愚蠢的。但这可能只与我有关。
对我来说,:before
伪元素的绝对定位效果最好。我将padding-left
ul 设置为:before
元素的负位置,与ul相同padding-left
。为了获得内容与:before
元素之间的距离,我只是padding-left
在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 ... */
}
希望这很清楚,并且对我以外的其他人有价值。
我这样做是这样的:
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;
}
我做了两件事,受到@OscarJovanny评论的启发,并做了一些修改。
第1步:
第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>
结果