Custom li list-style with font-awesome icon

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);
}