自定义li列表样式,带有超棒的字体图标


156

我想知道是否有可能利用超赞字体(或任何其他标志性字体)类来创建自定义<li>列表样式类型?

我目前正在使用jQuery来做到这一点,即:

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

但是,当<li>文本在页面上换行时,这不能正确设置样式,因为它认为图标是文本的一部分,而不是实际的项目符号。

有小费吗?

Answers:


333

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的答案以获取更多详细信息。


12
我在此处做了一个与每个Font Awesome图标相对应的CSS内容代码的参考页:astronautweb.co/snippet/font-awesome
Astrotim

1
该解决方案甚至适用于多列元素。(使用立场的其他人:绝对不要)
sbaechler

2
@Astrotim您可以直接从官方FontAwesome速查表中获取以下代码:fortawesome.github.io/Font-Awesome/cheatsheet
rybo111

1
该解决方案需要稍作修改才能与FontAwesome 5一起使用。您需要font-family:“ Font Awesome 5 Free”;以及明确的字体粗细才能正常工作。参见stackoverflow.com/questions/47894414/…–
kloddant

1
我需要添加一个特定的权重才能使其正常工作:font-weight: 900;
mayersdesign

62

根据字体真棒文档

<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" /> ...
有用-justin.m.chase

50

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

18
对于最后一个Font-Awesome,必须将“ icons-ul”替换为“ fa-ul”,将“ icon-li”替换为“ fa-li”:[code] <ul class =“ fa-ul”> <li class =“ fa-li fa fa-check“> ... </ li> </ ul> [/ code]
Thomas

4

我想添加到JOPLOmacedo的答案中。他的解决方案是我的最爱,但是当li有多行时,我总是对缩进有疑问。找到带有边距等的正确缩进是很愚蠢的。但这可能只与我有关。

对我来说,:before伪元素的绝对定位效果最好。我将padding-leftul 设置为: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 ... */
}

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


3
对所有初学者来说,这都是用称为SASS的CSS预处理语言格式化的。纯CSS不能以这种方式嵌套。
JoshWillik 2014年

1

我这样做是这样的:

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

0

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

第1步:

  • 这里将图标文件下载为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>

结果

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.