Mar 10, 2016 LANCE LARSEN

A Little CSS Love for FontAwesome <UL> Bullets

Some days CSS needs a little love thrown it’s way… My OCD and I have an agreement – I do what it wants and it makes me a better maker. 🙂 Needed an elegant solution for customizing the standard <UL><LI>…

Code

Some days CSS needs a little love thrown it’s way… My OCD and I have an agreement – I do what it wants and it makes me a better maker. 🙂

Needed an elegant solution for customizing the standard <UL><LI> html bullets, and strongly dislike having to create a graphic for this – so after some non-trivial searching though not-so-good solutions came across some nice CSS to make this happen with FontAwesome – and always good to share nice solutions. Enjoy.

Here’s the jsFiddle ( http://jsfiddle.net/lancelarsen/e08tp2ga/ )

Here’s the CSS:


/* ------------------------------------------------------------ */
/* Style our &lt;li&gt; bullets with FontAwesome */
/* ------------------------------------------------------------ */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1.2em;
  text-indent: -1.1em;
}

li:before {
  content: &quot;\f111&quot;; /* FontAwesome fa-circle */
  font-family: FontAwesome;
  font-size: 10px;
  color: #97C664;
  margin-right: 10px;
}
/* ------------------------------------------------------------ */