Feather Icons with WordPress

I’m working on a project right now and wanted to try a new icon set. In the past, I’ve exclusively used Dashicons for basic icons and Font Awesome for more robust icon needs.

Our team member Andrew shared a link to Feather Icons because we’re thinking about using it for Paid Memberships Pro (if the licenses allow it).

So here’s a basic gist to enqueue a local copy of feather.min.js code and a hook for wp_footer to call the method that replaces and inserts the icons.

The Code Recipe

Adding This Recipe to Your Site

  1. Download and save a copy of feather.min.js to the root folder of a custom plugin. If you aren’t using a custom plugin, you can save this to a child theme folder but you’ll need to just the enqueued file location.
    • Or, load the latest feather.min.js file from a CDN provider. Going this route, you won’t need to keep the file up to date to get the latest icon sets.
  2. Add the code in the recipe to the main custom plugin file. Or, update your child theme’s functions.php file with the snippet.
  3. Then, use the icons anywhere you want like the example below.
<i data-feather="circle"></i>

Browse the full list of available icons at the Feather Icons website.

Kim Coleman

Kim Coleman

Hi! I'm Kim Coleman, an internet entrepreneur from Reading, Pennsylvania. I've been working with WordPress for over 15 years. In 2011, I founded Paid Memberships Pro, a complete plugin for Recurring Subscriptions and Content Restriction with 100k active sites. I'm currently working on our new product, Sitewide Sales.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.