List Bullets - Icon Font

by Keith Jeter

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css">
<ul class="steps">
  <li class="activate">Lorem</li>
  <li class="activate">Ipsum</li>
  <li>Lorem</li>
  <li>Ipsum</li>
</ul>

CSS

ul.steps {
  padding-left: 20px;
  list-style: none;
}

ul.steps li {
  margin-bottom: 10px;
}

ul.steps li:before {
  color: #ccc;
  font-family: 'FontAwesome';
  content: '\f00c';
  margin: 0 5px 0 -15px;
}

ul.steps li.activate:before {
  color: #4c7b31;
  font-family: 'FontAwesome';
  content: '\f00c';
  margin: 0 5px 0 -15px;
}
ul.steps li.activate { color: #4c7b31; }