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

发布于11月13日

我想知道是否有可能利用令人敬畏的字体(或任何其他图标字体)类来创建自定义的<li>列表样式类型？

我目前正在使用jQuery来做这件事，即:

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

但是，当<li>个文本在页面上换行时，因为它认为图标是文本的一部分，而不是实际的项目符号指示器，所以样式不正确.

有什么建议吗？

推荐答案

CSS Lists and Counters Module Level 3引入了::marker伪元素.据我所知，这样的事情是允许的.Unfortunately, no browser seems to support it

您可以做的是向父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>

根据您的喜好调整填充/font-size/等，仅此而已.

您可以也应该将间隔单位放在CSS变量中，而不是在整个代码中重复它.

=====

这适用于任何类型的图标字体.然而，FontAwesom提供了他们自己的方法来处理这个"问题".有关更多细节，请查看下面Darrrrren的答案.