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

小编典典

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

all

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

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

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

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

有小费吗？

阅读 54

2022-08-05

共1个答案

小编典典

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

2022-08-05