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.
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.
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.
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.”
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.
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:
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.
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.
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:
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:
In the end, here is what site visitors will see when they click on your site:
#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.
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 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 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.
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 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.
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.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.