Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

Would you like to add font icons to your WordPress blog? During this holiday season, everyone wants to personalize their blog more to offer a better image of it. Iconic fonts are part of the arrangements that are regularly made.

In this tutorial, I will show you how to add fonts-icons to your WordPress blog.

iconfontswp-1

Small precision on fonts-icons

Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily resized via CSS code without significantly affecting the size of your pages.

icomoon

Icon fonts can be used to display fairly common symbols. On a typical website, you can use them to display cart icon, download buttons, sliders, on social media buttons, and even in WordPress navigation menus.

There are several fonts-icons available with different options. In fact, every WordPress installation uses Dashiconswhich is a set of font set. These icons are used on the dashboard user bar.

Here are some fonts-icons projects:

For this tutorial, I'll be using Font Awesome, which by the way is one of the most used and free icon fonts.

We will explore adding icon fonts to your WordPress theme. The first method is done using a plugin and we will also show you how to do it without a plugin.

How to add fonts icons with a WordPress plugin

FontAwesome is supported by several plugins. Using a plugin allows you to easily add a font icon to your theme without modifying the source code.

The first thing you have to do is install and activate the plugin Better Font Awesome, available at WordPress.org. After activating the plugin, you must navigate to the following location: " Settings> Better Font Awesome“, To configure the plugin. However, this plugin can work without configuration, so users don't actually need to change anything.

betterfontawesome

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

This plugin allows you to add icon fonts as follows:

[icon name = "rocket"]

[icon name = "cloud"]

[icon name = "headphones"]

You can add the icons on the article editing interface by choosing from the available icons. Just create a new article and you will notice the icon " Insert Icon Button On the visual editor toolbar.

Clicking on it will bring up a new window where you can locate an icon and insert it.

fa-posteditor

You will notice that the plugin will add a button similar to this one:

[icon name = "university" class = "" unprefixed_class = ""]

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

If you want to add more customization options, you can add your own class for custom styling.

[icon name = "university" class = "maclasse" unprefixed_class = ""]. Here's how you'll customize the class of your icon:

.fa-maclasse {font-size: 100px; color: #FF6600; } 

It really is that simple. You notice that the class is preceded by "fa-". Don't forget to add it in the CSS code.

How to add an icon font on WordPress manually

As mentioned earlier in this tutorial, I will show you how to add an icon font to your blog manually.

Some fonts icons like Font Awesome, are available via CDN servers around the world and can be linked to your blog directly.

You can also send the files of this icon font directly to your WordPress theme folder. I will show you how to add the Font Awesome icon-font to your blog.

First method: 

This is the easiest method. You just need to add this line in the " »Of your theme (usually it's in the header.php file).


This method is simple, but it can cause a lot of conflict with other plugins. The best approach is to load the scripts from WordPress in order to add them to the queue.

Function wp_load_fa () {wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } Add_action ('wp_enqueue_scripts', 'wp_load_fa');

Second method: 

The second method is not the easiest, but it allows you to have icon fonts on your theme. All you need to do is download and unzip your font-icon package (compressed file) in the file "Fonts" of your theme.

Then you just have to download the font icon and rename it. What you need to do next is load the icon font from your server.

ftpupload

Now that you are ready to load the icons-fonts on your WordPress theme, you just need to add the following code in the file " functions.php Of your WordPress theme or in your WordPress Plugin.

Function wp_load_fa () {wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css'); } Add_action ('wp_enqueue_scripts', 'wp_load_fa');

That's all there is to it.

How to manually display font icons on your blog

Go to the Font Awesome blog and see the list of available fonts. Click on any image, and you will see the code for that image.

fa-optinmonster

Simply copy and paste the following code:

<i class="fa-optin-monster"></i>

In text editor mode. You can use the class to make a change to the font icon.

If you need to know more about CSS, I invite you to Read this tutorial. That's it for this tutorial. Feel free to share it with your friends on your favorite social networks.

4 shares
Share2
tweet
Save2