Custom li list-style with font-awesome icon
css, font-awesome, html-lists
Solution
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);
}
Problem
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?