People are naturally drawn to the visual appearance of a Website of WordPress, as much as they are attracted to the written content you share. In fact, according to Jeff Bullas ", Articles with images have 94% more views than articles without images.

That's a huge increase in pageviews if you ask me.

And what exactly is the reason?

Just add a few high quality, article-relevant images throughout your content.

But what about the pictures on your Website that go beyond screenshots and photographs? What about images that not only grab attention, but also serve a useful function?

Yes, I am talking about icons. You know, those tiny pictures that are found on websites to encourage sharing on social media, to illustrate contact pages of business owners, to name a few of the cases of use.

As the idea was taken from this site, the visiteurs were not only attracted to images on websites but were inclined to interact with them, people started adding them to their websites.

Yet as technology advances, as always, traditional image icons have started to falter as an image solution for websites. This is because they make the pages much heavier and therefore slower, but above all this solution was not always suitable for mobiles.

But there is a solution: icon fonts.

Today I'm going to tell you what icon fonts are and the benefits of using them on your WordPress site. Additionally, I will show you how to add icon fonts to your WordPress site using the popular plugin " Better Font Awesome ».

So, let's start.

What are icon fonts and why should you use them?

Icon fonts are exactly what they say: fonts built entirely into icons. In fact, icon fonts or " make-icon "Can be described as a font that only displays characters or symbols, not the letters and numbers that traditional fonts and text are associated with.

Icon fonts are used to display commonly used symbols on your site. For example, social media buttons, your cart, download buttons, and navigation buttons are examples of icons that display tiny, interactive images on your site.

Why use icon fonts?

Image icons have worked well in the past for many site owners. However, as navigation rules, usability and design have evolved, icon fonts have become the best solution for displaying interactive images on a website.

Here's a look at some compelling reasons why icon fonts are the best choice:

• Expandable easily without losing quality
• Customizable in terms of color and shade
• 100% responsive
• Works like CSS image sprites, but behaves like text
• User-friendly
• Compatible browsers
• Customize opacity, rotation, and more
• Smaller File Size
• Do not sacrifice the speed or performance of your website

As you can see, there are several reasons why you might want to use an icon font on your website as opposed to an image icon.

Installing font icons on your site using a plugin

Better Font Awesome is a WordPress Plugin freeware that allows you to automatically integrate the latest version of Font Awesome into your WordPress project. Moreover, it comes with CSS, shortcodes and TinyMCE shortcode generator.

This plugin has a variety of useful features for site owners:

• Routine update of the latest version
• Ability to switch between versions of Font Awesome without changing short codes
• Support for other popular font plugins including their shortcodes
• Issued by jsDelivr CDN

1 Step: Installing and Activating Better Font Awesome

To get started, install and activate the “Better Font Awesome” plugin through your WordPress dashboard just like you would with any other plugin.

First, navigate to " Plugins> Add new And search for " Better Font Awesome ».

Then select " install now »And click on« Enable ».

Once activated, the plugin adds a linkBetter Font AwesomeUnder the Settings menu of your WordPress dashboard.

Step 2: Configure Plugin Settings

To configure the plugin « Better Font Awesome ", Start by clicking on the menu item" Better Font Awesome Under Settings. Once you do that, you will see a screen similar to this:

Here you can do the following:

• Version: Select the version of “Better Font Awesome” you want to use.
• Use Minified CSS: Check this box if you want to use the minified version of CSS.
• Delete the existing printing font: select this box to try to remove coded snippets and shortcodes added by other plugins and themes.
• Hide admin reviews: Hide the default admin warnings that appear when API and CDN errors occur.

In addition to the minimum amount of Better Font Awesome options, there is a small "Usage" section explaining how to add icons to your site.

Step 3: Adding Icons to Your Website

There are three easy ways to add icons to your website using “Better Font Awesome” - via shortcode, HTML, or TinyMCE.

# 1. Adding icons using shortcode

To add icons to your website using a shortcode, first visit the " Font Awesome To see a complete list of available icons that can be used.

Here you can search for the icon you want. For example, if you want an "email" icon, just search for that keyword and select the icon you want to use by clicking on it.

After clicking on the icon you want to add, you will see a screen showing the image of the icon with its different sizes and a small block of code:

Just copy the block of code and paste it anywhere on your website using the "Text Editor" tab. This is what the editor will look like on your website:

In the end, here is what the visiteurs will see when they access your site:

# 2. Adding icons using HTML code

As we saw in the section " Use Case You have the option of using HTML code to insert icons on your website. However, plugin developers take into account that using HTML requires version specific prefixes.

That's why they recommend you to use shortcodes instead. However, if you want to use HTML code, Font Awesome has Useful information here.

# 3. Adding icons using TinyMCE

This is probably the easiest way to add icons to your site. In the "Visual Editor" mode, just click on Insert icon. From there, scroll through the available icon options or narrow down your results using the search feature.

Once you find the icon you want, just click on it. The shortcode generator automatically enters the required information into your post or page.

If you want to learn how to customize the icons on your site, refer to the examples of " Font Awesome ».