Site icon League WP

How to Use FeatherIcons in Genesis: A Quick Guide

Feather icons are a collection of beautiful open source icons, each designed on a 24 by 24 grid with an emphasis on simplicity, consistency and readability.

The feathericons is a bundle of 282 icons which can be customized in terms of size, stroke width and color, which helps you customize the icons as per your design requirements.

There are several ways to install and use these feather icons. However, if you’re looking for a simple way to get started, I’d recommend using the CDN method.

Here’s how to do it:

Step #1: Add the CDN scripts to your footer scripts section

Copy the following scripts and go to Customizer > Theme Settings > Header/Footer Scripts > Footer Scripts and paste the code inside the box.

Hit publish to save your settings.

Step #2: Add the Icons to Your Webpages

Once you’re done with adding the scripts, you can start adding the icons to your webpages by pasting the following code.

There are 282 icons to choose from. Here’s the list of icons.

Step #3: Customize the Icons

You can use the default icons or customize them ( more likely) as per your design requirements. If you want to customize them, you want to repurpose the following css snippet as per your need.

You can increase or decrease the stroke-width depending on how thin or thick you want the icons to appear on your design. Similarly, tweak the height property to increase the size of the icons.

There are many other ways to install the Feather icons on your website. Check out this resource to learn more about those methods.

Lastly, Some More Resources Just in case You’re Interested:

SVG Icons Implementation Options
Use WordPress Icon Fonts the Right Way

Exit mobile version