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?
ベストアンサー1
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
.
The following solution works with any type of icon font. But FontAwesome apparently provides its own way to accomplish this (I was unaware of it before writing my answer). Check out Darrrrrren's answer below for more details.
It works by adding some padding to the parent ul and pulling the icon into that padding:
ul {
--icon-space: 1.3em;
list-style: none;
padding: 0;
}
li {
padding-left: var(--icon-space);
}
li:before {
content: "\f00c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: calc( var(--icon-space) * -1 );
width: var(--icon-space);
}<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.
=====
Edit:
As of now the ::marker pseudo-element already has 90% support across browsers. Below is an implementation making using of it.
ul {
--icon-size: .8em;
--gutter: .5em;
padding: 0 0 0 var(--icon-size);
}
ul li {
padding-left: var(--gutter);
}
ul li::marker {
content: "\f00a"; /* FontAwesome Unicode */
font-family: FontAwesome;
font-size: var(--icon-size);
}