Easy FontAwesome bullets in CSS

Looking to add stylish and eye-catching bullet points to your website? Look no further! In this post, we’ll guide you through the process of creating easy FontAwesome bullets in CSS. By leveraging the power of FontAwesome icons, you can enhance the visual appeal of your lists and give them a modern touch. Follow our step-by-step instructions and bring a touch of creativity to your website’s bullet points effortlessly.

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>

That’s it! Happy coding.