Adding Icon Fonts to WordPress With Better Font Awesome

Adding Icon Fonts to WordPress With Better Font Awesome

People are naturally drawn to the visual aspects of a WordPress website, just as much as they are drawn to the written content you share. In fact, according to internet marketer Jeff Bullas, articles with images get 94% more views than articles without images.

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

And for doing what exactly?

Simply adding a few high quality, article-appropriate images throughout your content.

But what about images on your website that go a step beyond that of screenshots and stock photography? What about images that not only attract attention but also serve a useful function?

Yes, I am talking about icons. You know, those tiny little images that are found scattered throughout websites for the purpose of social sharing, contacting business owners, and downloading information, to name a few.

As the idea caught on that site visitors were not only attracted to image icons on websites, but were inclined to interact with them as well, people all over started adding them to their websites.

Yet, as technology has advanced, as it always does, traditional image icons have begun to falter as an image solution for websites. This is because they add too much file weight, require too many http requests, don’t scale well, and worst of all – they are not mobile-friendly.

But there is a solution: icon fonts.

Today, I am going to discuss what icon fonts are and the advantages that come with using them on your WordPress website. In addition, I am going to show you how to add icon fonts to your WordPress website using the popular Better Font Awesome plugin. Lastly, as an added bonus, I am going to offer up some alternatives to Better Font Awesome so that you have plenty of options for adding high resolution, scalable, and mobile-friendly icons to your website.

So, let’s get started.

What Are Icon Fonts and Why Use Them?

Icon fonts are exactly what they sound like – fonts that are made up entirely of icons. In fact, icon fonts can be described as a font that only displays characters or symbols, leaving out the letters and numbers that traditional text fonts come with.

Image-Icons-Example-Download-Button
Icon fonts are images that often encourage action – only they are not actually images.

Icons fonts are used to display commonly used symbols on your website. For example, social media buttons, your shopping cart, download buttons, and navigation buttons are all examples of icons that display as tiny, interactive images on your website.

Image-Icons-Icon-Set-Example
Icon fonts can be used to represent many different ideas.

Why Use Icon Fonts?

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

Here is a look at some compelling reasons why icon fonts are the better choice:

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 Better Font Awesome

Better Font Awesome is a free WordPress plugin that allows you to automatically integrate the latest version of Font Awesome into your WordPress project. In addition, is comes with accompanying CSS, shortcodes, and a TinyMCE icon shortcode generator.

This plugin boasts a variety of useful features for website owners:

  • Routine updates of the latest version
  • Ability to switch between Font Awesome versions without modifying shortcodes
  • Support for other popular font plugins including their shortcodes
  • Pulls from the super-fast jsDelivr CDN

Step 1: Installation and Activation of Better Font Awesome

To get started, install and activate the Better Font Awesome plugin via your WordPress dashboard as you would any other plugin.

First, navigate to Plugins > Add New and search for “Better Font Awesome.”

Better-Font-Awesome-Plugin-Install-and-Activate
Search for Better Font Awesome to install on your website.

Next, select Install Now and then click on Activate.

Once activated, the plugin adds a “Better Font Awesome” link under the Settings menu in your WordPress dashboard.

Better-Font-Awesome-Plugin-New-Menu-Item
Notice the new menu item labeled Better Font Awesome.

Step 2: Configure Plugin Settings

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

Better-Font-Awesome-Plugin-Configuration-Settings
Configure the plugin’s settings.

Here you can do the following:

  • Version: Select which version of Better Font Awesome you want to use.
  • Use minified CSS: Check this box if you want to use the minified version of the CSS.
  • Remove existing Font Awesome: Select this box to attempt to remove Font Awesome CSS and shortcodes added by other plugins and themes.
  • Hide admin notices: Hide any default admin warnings that show when API and CDN errors occur.

In addition to Better Font Awesome’s minimal amount of setting options, there is a small Usage section outlining how you can add icons to your website.

Better-Font-Awesome-Plugin-Usage-Examples
Learn how to add icon fonts directly to your website.

Step 3: Adding Icons to Your Website

There are three easy ways you can add icons to your website using Better Font Awesome – via shortcode, HTML, or TinyMCE.

#1. Adding Icons Using Shortcodes

To add icons to your website using a shortcode, first go to the Font Awesome website to see an entire list of available icons that can be used.

Here you can search for any icon you want. For instance, if you want an “email” icon, simply search using that keyword and select the icon you wish to use by clicking on it.

Better-Font-Awesome-Plugin-Icon-Search
Search for your desired icon on the Font Awesome website.

After clicking on the icon you want to add, you’ll see a screen showing the icon image, its various sizes, and a small block of code:

Better-Font-Awesome-Plugin-Icon-Shortcode
Notice the icon’s name, various sizes, and shortcode.

Simply copy the block of code and paste it anywhere on your website using the Text Editor tab. Here is what this will look like on the backend of your website:

Better-Font-Awesome-Add-Shortcodes
Insert your shortcode into the Text Editor.

In the end, here is what site visitors will see when they click on your site:

Better-Font-Awesome-Plugin-Add-Shortcode-Result
The front-end of your website will display the icon.

#2. Adding Icons Using HTML

As seen in the Usage section, you have the option to use HTML to insert icons onto your website. However, the plugin developers warn that using HTML requires specific prefixes that are version specific.

This is why they recommend you use shortcodes instead. However, if you want to use HTML, Font Awesome has some helpful information here.

#3. Adding Icons Using TinyMCE

This is probably the easiest way to add icons to your website. While in the Visual Editor mode, simply click Insert Icon. From there, either scroll through the available icon options or narrow your results using the filter function.

Better-Font-Awesome-Plugin-TinyMCE-Shortcode-Generator
Use the TinyMCE shortcode generator to insert icons directly into your post or page.

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

If you want to learn how to customize your site’s icons, refer to Font Awesome’s examples.

Additional Font Icon Options

Using Better Font Awesome is not the only way to add icon fonts to your website. And, as promised, I am going to share with you some of the best alternatives out there.

To start, let’s look at some of the best places to find both free and premium icon font sets. With these resources, you can generate custom font icons, take advantage of exclusive and unique icon images, and even access tools to help you import icons directly into your website.

  • Fontello. Convert free custom vector images into webfonts for use on your website that are clear, scalable, and cross-browser friendly. In addition, customize using CSS to change colors, sizes, shadows, and more.
  • Modern Pictograms. Use any number of their 260+ drawings of objects and icons for multiple interfaces such as your WordPress website. This premium service allows for individual SVG purchases.
  • Icomoon. This online service lets you create crisp, pixel-perfect icon fonts. In addition, you can use the exclusive icon font builder to change image icons into icon fonts. With 5000 free and open source icons, and over 4000 premium icons placed in special icon packs, there is no shortage of images to pick from here.

Next, let’s look at some additional font plugins that can be used on your WordPress website.

  • WP SVG Icons

    Icon-Plugin-WP-SVG-Icons

    WP SVG Icons is a WordPress icon plugin that comes with over 490 included icons. Additionally, you can create and upload up to 10 of your own custom icons with the exclusive Icomoon Icon Pack Font Importer.

    With this plugin, you can easily insert icons into your posts, pages, and sidebars without writing a single line of code using the newest shortcode feature.

  • Genericon’d

    Icon-Plugin-Genericon'd

    Genericon’d includes 3 icon sets – Genericons Neue, Social Logos, and Genericons – that can be placed in your website’s themes or functions using basic HTML or your posts and widgets using shortcodes.

    In addition, you can adjust the size of each icon via CSS, shortcodes, or the size attribute. Perfect for adding generic looking icons to your blog or website, social logos for encouraging a like or follow, or icons displayed as fonts, Genericon’d is a great icon solution.

    Interested in Genericon’d?

  • Icon List

    Icon-Plugin-Icon-List

    Icon List a powerful, yet simple, plugin providing website owners with a widget to be used in standard lists on your website. Display your company’s contact information and social media platforms, complete with appropriate icons, so site visitors can stay informed about your business.

  • Smart Icons for WordPress

    Icon-Plugin-Smart-Icons

    Smart Icons for WordPress brings you 519 Font Awesome icons to be used in posts, pages, and custom post types with a simple click of a button. It comes with an easy to use interface, custom or default shortcodes, and even the option to load fonts from CDN.

    In addition, Smart Icons is 4K display friendly, works with any editor API, and even supports CSS effects like radius changes and shadows for added customization.

    Interested in Smart Icons for WordPress?

Final Thoughts

Using icon fonts on your WordPress website not only adds beautiful imagery without sacrificing speed or performance, but adds a level of functionality to your site that encourages greater user interaction.

Icon fonts are easy to scale, customize, and best of all, they provide your site visitors, regardless of where they are accessing your website from, the ultimate viewing experience.

Using a plugin solution, such as Better Font Awesome, is one of the easiest ways to add icons fonts to your website. That’s because with a font plugin there is little to no configuration required, and it usually does most of the work for you so you don’t have to deal with extensive HTML code.

If you are looking to increase your website’s pageviews, boost content interaction, and provide site visitors with an appealing website that clearly communicates what you want them to do, consider adding icon fonts on your website using Better Font Awesome or any of the other options I shared with you.

Lindsay Liedke
Have you ever used icon fonts on your website? Better yet, have you ever used Better Font Awesome or some alternative font plugin? I would love to hear all about it in the comments below!