How to add an icon font in WordPress Step by Step

Adding icons in WordPress has become an indispensable custom to illustrate a web page or the content of a blog. Today, almost everyone who has a website or blog uses this resource.

The emoticons began as part of the social media publications of many of the companies with an online presence.

However, this custom has been extended until it has become a fundamental part of any website. Moreover, we could say that currently, a page without icons remains as if it were unfinished.

Likewise, inserting one of them into the call-to-action buttons or even in the form of emoticons within a text are visually appealing resources, but they also transmit and invite you to take action. Do you want to learn how to do it?

All this can be achieved very easily, as we will see later in this article.

I am going to tell you what types of free icons for WordPress exist, what is the function of each one of them and how to add them in this CMS in any part of your website in a very simple way.

No matter what WordPress Hosting you use, these methods will work! However, first of all, I would like us to review their definition together.

What are the icons in WordPress?

The icons are small, simple and flashy images, which we all like to work on the Internet so much.

They serve to make your web site more visual and more practical. They have always existed and given a touch of different design and can even give a break in reading, making it more usable and scannable for the reader.

It is very likely that after seeing attractive icons, you continue reading a content that. It is a technique that works in most cases.

Icons for WordPress not only serve as part of a strategy to create a successful website and complement the web design but are also useful for sharing articles or accessing your social profiles.

You must think of your website as a set of related elements. It is very likely that, at some point, you need some of them for the web to work, attract, build loyalty and help you sell your products or services.

Some other popular icon sources are:

• FontAwesome
• Genericons
• IcoMoon
• Linearicons

For the sake of this tutorial, we are going to focus exclusively on FontAwesome. It is the best known of all available icon sources. We are going to show you two methods to add icon fonts in WordPress. In the first method, we will use a WordPress plugin, and in the second we will do it using source code.

Adding an icon source using plugins

FontAwesome and other free icon fonts are compatible with many WordPress plugins. The use of plugins allows you to easily add a source of icons for any WordPress theme without modifying any code.

The first thing you have to do is install and activate the Better Font Awesome plugin. After activating them, go to the Settings section and click on the Better Font Awesome option to configure the plugin. However, the plugin works are simple. So, most administrators won’t have to change anything.

Better Font Awesome allows you to add FontAwesome icons using shortcodes such as:

• [icon name = »rocket»]
• [icon name = »cloud»]
• [icon name = »headphones»]

You can also add icons in the WYSIWYG editor of each post and page simply by selecting it. For this, the plugin enables a new button called Insert Icon. This button shows a popup with a search engine with which we can find the icon to be inserted in the content.

When you have clicked on the desired icon, you will see that a shortcode is added to the editor similar to this:

[icon name = »arrow-circle-down» class = »» unprefixed_class = »»]

If you want to further customize the icon, you can add your own CSS class to add custom styles.

[icon name = »arrow-circle-down» class = »arrowicon» unprefixed_class = »»]

Once the class is defined, you just need to add it to the style sheet of the theme you are using:

It’s that simple. Now, we are going to see the second method. It is by adding a source of icons without plugins.

Adding an icon source manually

As we mentioned earlier, icon fonts are just fonts and as such can be added to your site as you would with any custom font. Some icon fonts such as FontAwesome, are available on CDN servers through the web and can be linked directly from your WordPress theme.

You can also upload the font directory to a folder in your WordPress theme and use that font in the style sheet. Since we are using Font Awesome for this tutorial. We will show you how to add it using both methods.

Method 1

This is a simple method. All you have to do is add this line of code in the header.php file of your theme

<link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />

just before the </ head> tag.

This method is simpler, but it can cause conflicts with other plugins. A better approach to loading style sheets or scripts in WordPress is to queue it properly. Instead of linking a style sheet in the template header of your theme, you can add the following code in the functions.php file of your theme or in the specific plugin of your site.

Method 2

The second method is more complicated. However, it allows you to have the sources within the subject.

function wpb_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’, ‘wpb_load_fa’);

You just have to download the icon fonts and unzip the file. Now, you will have to connect to your web hosting using an FTP client and go to the directory of the template that you are currently using in WordPress.

Create a folder and name it “fonts”. Then, upload the contents of the unzipped file into the fonts directory you just created on the server.

Now, you can use icon fonts in your WordPress theme. You just have to add this code to the functions.php file of the template or in the specific plugin of your site.

Congratulations, you have successfully loaded Font Awesome on your WordPress theme without sacrificing your hostingraja.in.

To insert icons using this method, check out the Font Awesome documentation to carry it out.