自定义李列表式与字体真棒图标

我想知道是否有可能利用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>&hellip;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 ... */ } 

希望这是清楚的,对别人比我有一些价值。