




How to Replace Bullet Points with Icons in WordPress Lists Using Font Awesome
Sometimes the standard bullet points just don’t cut it—especially when you’re aiming for a more custom, polished design. With a few simple steps, you can replace bullet points with icons (like a checkmark) using Font Awesome in your WordPress site.
Step 1: Load Font Awesome into Your Site
To use Font Awesome icons, you need to load the library. If you’re using the WPCode Lite plugin, add the following to your site’s footer:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous">
How to do this in WPCode Lite:
- Go to Code Snippets > Header & Footer.
- Paste the code above into the Footer section.
- Save changes.
Step 2: Add the Custom CSS
Next, create a custom class to remove the default bullet points and display an icon instead.
Add this CSS to your child theme’s style.css
file or in Customizer > Additional CSS:
ul.checklisticon {
list-style-type: none !important;
padding-left: 0;
}
ul.checklisticon li:before {
font-family: 'Font Awesome 5 Free';
content: '\f00c'; /* Font Awesome checkmark icon */
font-weight: 600 !important;
margin: 0 10px 0 -30px;
display: inline-block;
width: 20px;
}
Step 3: Use the Class in Your HTML or Block Editor
Apply the class checklisticon
to any unordered list where you want the icon to appear.
Example:
<ul class="checklisticon">
<li>Fast & Secure Hosting</li>
<li>Daily Backups</li>
<li>Expert Support</li>
</ul>
This will replace the default bullet points with a checkmark icon from Font Awesome.
Customizing the Icon
Want a different icon? Change the content
value in the CSS. Visit Font Awesome’s icon cheatsheet and copy the Unicode value of any icon you like.
Examples:
\f058
→ check-circle\f00d
→ times (X)\f005
→ star
Update this line in the CSS to use your desired icon:
content: '\f005'; /* star icon */
Wrapping Up
With just a snippet of code, you can easily elevate the visual style of your content lists using Font Awesome. It’s a small change that can make your website feel more professional and user-friendly.
If you’re managing a WordPress site and want more custom styling like this, reach out—we’re happy to help!
Prefer a Custom Image Instead of an Icon?
If you’d rather use your own branded image—like a checkmark or logo—instead of a Font Awesome icon, we’ve got you covered.
Learn how to replace bullet points with custom image icons in WordPress