自定义li列表风格与字体真棒图标 [英] Custom li list-style with font-awesome icon

问题描述

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

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

  $ （li.myClass）。prepend（< i class = \icon-chevron-right \>< / i>）; 
  

但是，当< li> / code>文本在页面中换行，因为它认为图标是文本的一部分，而不是实际的项目符号。

p>

解决方案

CSS列表和计数器模块级别3 引入了 :: marker 伪元素。从我的理解，它会允许这样的事情。遗憾的是没有浏览器支持它。 browsersupport.net甚至没有列出。

你可以做的是添加一些填充到父 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; / *与在li上的填充左边集合* / width：1.3em; / *和在li上的padding-left设置一样* /}  

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>< ul> < li>第一项< / li> < li>第二项< / li>< / ul>  

根据你的喜好调整padding / font-size / etc，就是这样。这是平常的小提琴： http://jsfiddle.net/joplomacedo/a8GxZ/

I am wondering if it's possible to utilize font-awesome (or any other iconic font) classes to create a custom <li> list-style-type?

I am currently using jQuery to do this, ie:

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

However, this doesn't style properly when the <li> text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator.

Any tips?

解决方案

The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo element. From what I've understood it would allow such a thing. Unfortunately no browser seems to support it. browsersupport.net doesn't even have it listed.

What you can do is add some padding to the parent ul and pull the icon into that padding:

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>

Adjust the padding/font-size/etc to your liking, and that's it. Here's the usual fiddle: http://jsfiddle.net/joplomacedo/a8GxZ/

这篇关于自定义li列表风格与字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！