我想知道是否可以使用字体awesome(或任何其他标志性字体)类创建自定义< li> list-style-type?
我目前使用jQuery做到这一点,即:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
但是,当< li>文本在页面中换行,因为它认为图标是文本的一部分,而不是实际的项目符号。
任何提示?
解决方法
CSS Lists and Counters Module Level 3引入:: marker伪元素。从我的理解,它会允许这样的事情。遗憾的是没有浏览器支持它。 browsersupport.net甚至没有它
listed。
你可以做的是向父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>
根据你的喜好调整padding / font-size / etc,就是这样。这是通常的小提琴:http://jsfiddle.net/joplomacedo/a8GxZ/