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 page views if you ask me.

And for doing what exactly?

Simply add 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. So, let’s get started.

Continue reading, or jump ahead using these links:

What Are Icon Fonts and Why Use Them?
Font Icon Options

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.

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.

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:

Scale easily and do not lose quality
Customizable in terms of color and shadow
100% responsive
Work like CSS image sprites but can style like a text
Easy to use
Transparent knockout support
Cross-browser friendly
Customize opacity, rotation, and more
Smaller file sizes
Don’t 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.

Font Icon Options

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 web fonts for use on your website that is clear, scalable, and cross-browser friendly. In addition, customize using CSS to change colors, sizes, shadows, and more.
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 a font plugin that can be used on your WordPress website.

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.

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 WP SVG Icons, 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 page views, 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.