How to Use Font Awesome Icons as Bullet Points in Elementor Using Only CSS
Want to replace your boring bullet points in Elementor with awesome-looking icons? In this tutorial, you’ll learn how to use Font Awesome icons (like a circle) as custom list bullet points using only CSS—no plugins, no JavaScript, and no extra libraries.
This is perfect for developers or designers who want cleaner, more engaging list styles inside Elementor.
What You’ll Need
-
An Elementor section (Free or Pro)
-
Font Awesome enabled (included in Elementor by default)
-
A little bit of CSS magic ✨
Step 1: Add a Custom Class to Your List
In your Elementor editor, add a new Text Editor or HTML widget, and include your list like this:
<ul class="fa-list-icon"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
We’ve added the class fa-list-icon to the <ul> element. This will help us target the list in our CSS.
Step 2: Add the CSS to Style the List
Go to:
Elementor → Site Settings → Custom CSS
or
Elementor → Advanced → Custom CSS (on the widget/section)
or
Your theme’s Customizer > Additional CSS
Then paste the following CSS:
.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"; /* Unicode for Font Awesome circle icon */
font-family: "Font Awesome 5 Free"; /* For Elementor's FA5 */
font-weight: 900; /* Important for solid icons */
position: absolute;
left: 0;
top: 0.2em;
color: #333; /* Customize icon color */
font-size: 0.6em;
}
Explanation
-
list-style: none: Removes the default browser bullets. -
::before: Adds custom content before each<li>item. -
\f111: Unicode for the solid circle Font Awesome icon. -
font-familyandfont-weight: Required to show the icon properly.
⚠️ Important: Elementor loads Font Awesome 5 by default. If you’re using Font Awesome 6, change the font-family to "Font Awesome 6 Free".
Step 3: Clear Cache and Regenerate CSS
If the icon shows in the editor but not on the front-end:
-
Go to Elementor → Tools → Regenerate CSS & Data
-
Clear your browser and plugin cache (if any)
-
Reload the page
Bonus Tips
-
Want a different icon? Visit Font Awesome icons and search for a new one. Replace
\f111with the corresponding Unicode. -
You can use this method to create icon-based checklists, feature sections, or even steps indicators.
Final Result
You now have a beautifully styled list using Font Awesome icons instead of standard bullets, all with clean, maintainable, and plugin-free CSS.
Need More Help?
If you’re building a WordPress site using Elementor and want to take your design to the next level with clean CSS tricks like this, subscribe or follow for more tutorials!
