176

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

我目前正在使用 jQuery 来执行此操作,即:

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

<li>但是,当文本环绕页面时,这不会正确设置样式,因为它认为图标是文本的一部分,而不是实际的项目符号指示符。

有小费吗?

4

9 回答 9

366

CSS Lists and Counters Module Level 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>

根据您的喜好调整填充/字体大小/等,就是这样。

您可以也应该将间距单位放在 css 变量中,而不是在整个代码中重复它。

=====

这适用于任何类型的标志性字体。然而,FontAwesome 提供了他们自己的方式来处理这个“问题”。查看下面 Darrrrrren 的答案以获取更多详细信息。

于 2012-11-13T02:12:43.423 回答
74

根据字体真棒文档

<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
于 2015-06-09T20:14:26.200 回答
52

我想提供一个替代的、更简单的特定于 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>
于 2013-06-21T15:41:48.003 回答
5

我想补充一下 JOPLOmacedo 的答案。他的解决方案是我最喜欢的,但是当 li 有不止一行时,我总是遇到缩进问题。找到带有边距等的正确缩进是很繁琐的。但这可能只与我有关。

对我来说,:before伪元素的绝对定位效果最好。我在 ul 上设置,元素padding-left左侧的负位置,与 ul 的相同。为了获得内容与元素的距离,我只需将li 设置为。当然, li 必须具有相对位置。例如:beforepadding-left:beforepadding-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 ... */
}

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

于 2013-12-19T19:12:49.450 回答
4

我做了两件受@OscarJovanny 评论启发的事情,还有一些技巧。

步骤1:

  • 从Here下载图标文件为 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>

结果

在此处输入图像描述

于 2020-07-15T20:55:18.613 回答
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;
}
于 2018-11-27T22:48:55.400 回答
0

请参阅参考:https ://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

<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>
于 2021-09-30T06:14:07.340 回答
0

这是我的版本:FontAwesome 5 ul

ul {
  list-style-position: inside;
  padding-left: 0;
}
ul li {
  list-style: none;
  position: relative;
  padding-left: 20px;
}
ul li::before {
  position: absolute;
  top: calc(50% - 4px); /* half font-size */
  left: 0px;
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-size: 8px;
  font-weight: 900;
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
</ul>

于 2021-08-31T08:43:14.310 回答
0

现在该::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>

于 2020-11-05T18:54:59.810 回答