自定义李列表式与字体真棒图标
我想知道是否有可能利用font-awesome（或任何其他标志性的字体）类来创build一个自定义的<li>列表样式types？
我目前正在使用jQuery来做到这一点，即：
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
但是，当<li>文字在整个页面上换行时，这样做的样式不正确，因为它认为图标是文字的一部分，而不是实际的子弹指示符。
有小费吗？
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>
我想提供一个特别针对FontAwesome的备用，更简单的解决scheme。 如果您使用不同的图标字体，JOPLOmacedo的答案仍然可以使用。
FontAwesome现在用CSS类内部处理列表样式 。
这是一个例子：
<ul class="icons-ul"> <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> <li><i class="icon-li icon-ok"></i>Buttons</li> <li><i class="icon-li icon-ok"></i>Button groups</li> <li><i class="icon-li icon-ok"></i>Navigation</li> <li><i class="icon-li icon-ok"></i>Prepended form inputs</li> <li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li> </ul>
根据Font Awesome文档 ：
<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
我想添加JOPLOmacedo的答案。 他的解决scheme是我最喜欢的，但是当我有不止一行的时候，我总是有缩进的问题。 用边距等find正确的缩进是很困难的。但这可能只涉及到我。
对于我来说绝对定位：之前伪元素效果最好。 我在ul上设置了padding-left，在before元素上的负位置与ul的padding-left相同。 为了得到来自：before元素右边的内容的距离，我只在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 ... */ }
希望这是清楚的，对别人比我有一些价值。
