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.
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/
=====
This works with any type of iconic font. FontAwesome, however, provides their own way to deal with this 'problem'. Check out Darrrrrren's answer below for more details.