How to Replace Bullet Points with Icons in WordPress Lists Using Font Awesome

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:

  1. Go to Code Snippets > Header & Footer.
  2. Paste the code above into the Footer section.
  3. 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