Unlimited Font Icons in WordPress


This Post is in response to a post from a lady on a Facebook group I recently joined. She is using a plugin named WP SVG Icons which lets you use shortcode to place an icon like the gift you see at the start of this post. The trouble is that even though they have 400+ icons she is not finding the icon she wants.

I can relate! I just purchased a set of 2000 icons, and when I got further into the project I found that it didn’t have some of the basic ones I needed.

This will show you how to use unlimited, or at least limited to the number of font icons sets in the known universe, on your wordpress pages.

The truth is you don’t need to use a plugin just to put fonts or font icons on your website. You will need a custom css plugin though.

I am using Simple Custom CSS on this site, but there are many that will do the job.

Although there are many font sets on the web, for this example I will focus on just two icon sets.

Step 1 Import the fonts
First we need to open your custom css editor. If you are using the Simple Custom CSS you can find this on your dashboard’s Appearance menu
customCssMenu

In the css window place these two lines of code at the top.

Step 2 Add the icon to your page

Click on one of the links above to open the pages for the icons for either Font-Awesome or Google Material Icons

Click on the font you want, and the website will give you the code you need to place the font on your page.

It will look something like this:

Step 3 Size and Color
In your custom css editor paste the following code:


.boxIcon
{
font-size:100px;
color:#ff0000;
}

You can change the font-size and color to suit your needs.

Now change the html a bit by placing boxIcon after the font code.

Your code should now look like this:

That’s it! Just place the code where you want your icon to be1 Save and publish your page!

Thanks for reading, and I hope this has been helpful for you!