Blog

News, articles, hints and tips about software, process, products, freelancing, entrepreneurship and more.

Easy FontAwesome bullets in CSS

Here's a really simple recipe to get nice FontAwesome bullets in CSS. In the code snippet below I've used a circle but you can swap out the FontAwesome circle for any other icon you prefer.

/* bullets */
ul.bullet li {
    list-style: none;
}

ul.bullet li:before {
    font-family: 'FontAwesome';
    font-size: 6px;
    content: '\f111';
    margin: 0 5px 0 -10px;
    vertical-align: 2px;
}

Then your html would simply include the bullet class in the ul element.

<ul class="bullet">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Horses</li>
</ul>