How do I add bullet points in Elementor using Additional CSS?

Want to swap out those plain bullet points in Elementor for stylish, eye-catching icons? In this guide, you’ll discover how to use Font Awesome icons (like a solid circle) as custom list bullets—using only CSS. No plugins, JavaScript, or extra libraries needed.

This technique is perfect for designers and developers who want cleaner, more visually appealing lists inside Elementor.

🧰 What You’ll Need

An Elementor plugin (Free or Pro)
Font Awesome enabled (it’s built into Elementor by default)
A touch of CSS creativity ✨

🔹 Step 1: Add a Custom Class to Your List

In the Elementor editor, insert a Text Editor or HTML widget, then add this markup:

<ul class="fa-list-icon">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here, we’re assigning the class fa-list-icon to the <ul> element so we can target it with our CSS.

🔹 Step 2: Add CSS to Style Your List

You can add the CSS in one of these locations:

Elementor → Site Settings → Custom CSS
Elementor → Advanced → Custom CSS (for the widget/section)
Customizer → Additional CSS in your theme

Then paste this code:

.fa-list-icon {
  list-style: none;
  padding-left: 1.5em;
}

.fa-list-icon li {
  position: relative;
  padding-left: 1.2em;
}

.fa-list-icon li::before {
  content: "\f111"; /* Font Awesome circle icon */
  font-family: "Font Awesome 5 Free"; /* Elementor uses FA5 */
  font-weight: 900; /* Needed for solid icons */
  position: absolute;
  left: 0;
  top: 0.2em;
  color: #333; /* Customize color */
  font-size: 0.6em;
}

💡 How It Works

list-style: none removes the browser’s default bullets.
::before inserts the icon before each list item.
\f111 represents the Font Awesome solid circle icon.
font-family + font-weight ensure the correct icon style appears.

⚠️ Note: Elementor includes Font Awesome 5 by default.
If you’re using Font Awesome 6, update the font-family to "Font Awesome 6 Free".

🔹 Step 3: Clear Cache and Regenerate CSS

If icons appear in the editor but not on your live site:

Go to Elementor → Tools → Regenerate CSS & Data
Clear browser and plugin caches
Reload your page

✨ Bonus Tips

Browse Font Awesome Icons to find different icons.
Replace \f111 with the Unicode of your chosen icon.
You can use this same method for feature lists, checklists, or step indicators.

✅ Final Result

You now have a beautifully customized list that uses Font Awesome icons instead of plain bullets—completely plugin-free and easy to maintain.

💬 Need More Help?

If you’re designing WordPress sites with Elementor and want more clean CSS tricks like this, follow or subscribe for more tutorials.

Tags: #BeginnerTutorial #FontAwesome #ListStyle #PureCSS

Write a comment