What to do when using WordPress Icon Fonts The Right Way (Better Efficiency)
Back in the early days the availability of icons was easy, but implementing them efficiently in WordPress was somewhat more difficult. You could get around some issues with sprites, but they weren't necessarily the best option And as retina-based screens started coming out, the problem was magnified (quite practically).
One of the most common options for solving this issue is using an icon font. Icons are fonts that can be downloaded from the internet or vectors. You are able to scale them indefinitely. many icons could be stored in one document, which can reduce your requests by a significant amount. This allows you to use nearly any type of icon you could think of. With this however, there are some considerations for performance.
We'll show you in this article several different ways to use WordPress icon fonts, where you can get them and what method could be most suitable for your website.
- Where to Find Icon Fonts
- Quick and Easy ways to use Icon Fonts
- Performance Issues to Be Considered in conjunction with Icon Fonts
- Host Icon Fonts Locally (Only the Ones You Need)
- Icon Fonts Accessibility Problems
Where to Find Icon Fonts
There are a lot of excellent places where you can now locate icon fonts to use on your WordPress website. Just type "icon font" into Google and you will get amazing results. One of the most popular and widely used ones can be found in Font Awesome. At the time of this writing there are 1,400+ icons for free, as well as 4,500+ icons for their premium version. It includes icons for every aspect, from interface and social to arrows, arrows and many other types of icons.
Below are some other ideas to take a look at:
- IcoMoon is another popular website featuring 5,500+ vector icons as well as 4,000+ premium icons. We'll actually use their tool for creating icon fonts in the next section.
- Fontello Fontello is a great service that helps you discover and built icon fonts.
- If you're in search of an icon set that is extremely light be sure to check out Bytesize. All 84 icons measure in at 9KB minified (2 2 KB when using SVGZ as well as Gzipped).
- If you're looking to make use of SVG icons by hand there's no better free library than iconmonstr or a better premium library as Iconfinder.
Quick and Easy ways to use WordPress Font Icons
We'll start by looking at some quick and simple ways you can use WordPress Font icons. A word of caution: none of them are top-quality for performance. For that, we recommend moving to the section on the optimal technique.
Option 1 - Use the WordPress Plugin
The most efficient way to get started using WordPress icons for fonts is to use a third-party plugin. The no-cost Font Awesome Integration plugin contains the latest Font Awesome 5 icon library. Once you have installed and activated the plugin, all it requires is a shortcode to add an icon. The site even has the WordPress icon now! This is pretty awesome.
[fawesome iclass="fab fa-wordpress fa-3x"]
Here is what it looks at the front of the device. It's not difficult, is it? We had a Font Awesome icon up and working on our website within a matter of minutes.
If you're looking for a large number of simple to use shortcodes You might want to also check out Shortcodes Ultimate. Shortcodes Ultimate plugin. It comes with premium icons plugin that can be used.
This is an excellent solution for you if you're looking to allow your customers to create icons for posts or pages, but when you're planning to utilize these features in your plugin or theme, it's best to enqueue the icons by yourself (will go into more detail later).
Alternative 2 - Make use of the Built-in Dashicons
Dashicons is a set of font icons included by default as WordPress uses it on the backend. The user must enable it in the front-end and all you'll need is the URL of the script and it's already accessible to WordPress.
It is possible to add these into your functions.php file, or use the free plug-in like Code Snippets. It reduces the chance of breaking your theme and it will be permanent throughout updates to your theme.
function my_theme_styles()
wp_enqueue_style( 'dashicons' );
Then, go on the Dashicons site, select an icon and click the "copy HTML" link which will give you the code required to show the icon. The website doesn't offer a wide range of options, but they work great and are very light.
This is how it appears at the front of the car.
My cool HeadlineOption 3: Manually link to Externally Hosted Icon Fonts
The third alternative is to manually connect to icon fonts hosted externally. This is basically what the plugin described in choice 1 above is doing behind the scenes.
Step 1.
Step 2.
It is then possible to add icons in the HTML's . Find the right icon and discover how you can add it onto your page.
The issue of performance to be considered when Using Icon Fonts
There is no problem with one of these methods to add icon fonts to your site, they're not technically the ideal method. Why? All it boils down to performance issues.
It's likely that you don't need all These Icons
A CDN to load CDN usually speeds up loading times.
Host Icon Fonts Locally (Only the Ones You Need)
In light of the issues with performance that we have mentioned earlier, we are going to show you how to host your icon fonts locally, in addition to only using the ones you need. By locally we mean either uploading them to your WordPress hosting server, or from your own CDN.
Selecting only the icons fonts you need it is possible to reduce the files size by a factor of 100KB to a couple of kilobytes very convenient! You can even combine and mix icons from various font sets.
The Basics - What it does
While your site will load a single file, you'll actually have a variety of formats used by each font because different browsers use different formats. Font Awesome has 6 different file formats included such as EOT, SVG WOFF, TTF, 2, and OTF. However, based on browser support you really only need WOFF or WOFF 2.
Tip The WOFF browser is supported by 93%+ of all modern browsers. However, WOFF 2 is less compressed, however it is available by more than 83% of modern browsers. We recommend choosing one or either of them or both. The browser decides the coding you provide the best option to send to the client.
Your first task is to use a tool to choose only the icons you want. Then, you can include these files in the project directory usually within a fonts directory.
Then, you can then add the Font Awesome CSS file into your project and add it to your site using the standard link element.
It is also possible to enqueue the CSS file or if it's not large, apply it as an as an inline.
When you examine the CSS file you can see what's going on in the background. Font files get loaded. and the fundamental element, that has the name of .fa is defined (along with some other) in the end, each name icon is specified (eg: .fa-book).
The one thing be aware of is your path to font files. As a default, they're loaded by navigating to ../fonts which will be in the fonts directory one folder up from the currently loaded CSS file. It is possible to alter the file to suit your specific directory structure.
Once you've got an understanding of how it works We will guide you on how to do it step by step. In this example it is the production version of an online store.
Step 1.
The first step is to determine the font icon library that you want to use. We shared a few we like at the beginning of this post. For this instance we'll be using Font Awesome as well as Font Awesome and the IcoMoon font generator. If you're interested in the WOFF 2 fonts from IcoMoon however, you will need pay one time fee of $9.00 to access their premium library.
You are able to obtain the Font Awesome icons you want manually for free, but it is necessary to utilize a program such as FontForge to modify their WOFF or WOFF2 file. It's all about simplicity and so we're using a generator.
Step 2
Visit the IcoMoon Generator. We click "Add" on the Font Awesome library.
Step 3
Next, you'll want select the icons that you want to use on your WordPress website. If you're already using Font Awesome and just moving to locally hosted versions, go through the fonts and create a brief list and then choose them from the font library.
In this instance the user is picking icons to use on perfmatters.io, a WordPress ecommerce site which runs Easy Digital Downloads.
Step 4
Once you've picked out the icons you want to use, click "Generate Font" at the bottom. On this website We ended up requiring 20 icons.
There will be files that look like the following. One of the most important files you'll require include the style.css file and the font files (WOFF 2, WOFF).
Step 5
Next, it's recommended you do a search and replace on the style.css before you copy it onto your website. Here is what the original version appears to be.
For those of you already using Font Awesome, this simply allows you to switch the classes over to Font Awesome ones, this means that if you had something built into your WordPress website using Font Awesome, it will automatically start using the icons.
This is replacing [class^="icon -"], [class*=" icon-"] by [class^="fa -"], [class*=" Fa"[class*=" fa-"]. Also, it fixes every icon. Instead beginning with .iconor.fa-, they now start with .fa(for example)..
It is also possible to alter the URL of your source in accordance with where you have uploaded the fonts in step 7. We recommend changing the URL to your CDN.
Step 6
Next, you need to include the CSS on your website. There are many methods to do this.
Option 1.
The amount of CSS is small, you could duplicate all the CSS and paste it in WordPress Customizer. WordPress Customizer. Never do this for large documents, but this is an extremely tiny quantity of CSS. The CSS will therefore load within the page.
Option 2
You could link to your stylesheet in a manual way by placing it in the header of your WordPress website. Tip: Link to your own CDN to get better performance.
Option 3.
There is also the option of enqueuing the CSS file in WordPress. It's a similar process to the method used in manual mode. Incorporate the following into the themes functions.php file, or install the Code Snippets plugin. It is possible to alter your directory according to where you've uploaded the file.
function my_theme_styles()
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Step 7
After you've had your CSS added to your site It's time to add the font files. The fonts can be placed anyplace, but a folder named "fonts" within your /public direct directory is acceptable. Be aware that the source folder within the style.css file needs to match.
Step 8
Your WordPress website should have your CSS and font files available. So next, you can incorporate some markups into your website. This is just an example of adding a gif icon.
It is possible to see an live demo of this functionality on perfmatters.io. Keep in mind that you are able to utilize any element and not only the i. There are a variety of regular span elements too, in addition to adding CSS to your custom classes.
The most significant difference comes the moment you look at the differences in size. Remember, when we linked to the Font Awesome external library, the size of the Font Awesome font was 108 KB. After we used an online font maker and picked only the Font Awesome icons we needed for our website this brought the font size down to 2.6 1 KB. The font file we used was reduced in size by 97.59 percent!
In addition, it's now loaded directly from our CDN, which means there are no DNS queries for fontawesome.com.
You can also use this same approach with SVG icons. The only difference is that it's a little different.
Icon Fonts Accessibility Concerns
The downside to icon fonts is their poor access. Screen readers may not be able to read them, or better yet, read the unicode or the characters themselves. The result could be visually impaired users hearing "yellow stars favourites" while looking through your favorite menu item. This is which is not the best option. You should also be aware of what can happen if the fonts don't load.
Ideally, you'd like the decorative icons to disappear when not loaded and critical icons to be replaced by texts if you have any issue.
The accessibility issue is quite simple to address by using the aria-hidden="true" parameter and set the value to inform users of screen readers to remove our content.
My FavouritesIn a more complete version, you could utilize Modernizr to check for the support for font faces. It is necessary to alter the CSS to a degree, refer to the excellent Bulletproof Font Icons article for more in-depth information.
For information about creating crucial icons using text fallback, we'd suggest reading the article above, the authors have detailed and resolved the problem as well as possible, but implementing it is a bit out of the scope of this article.
Summary
This is all there is to icons fonts. You now know a few options to install icon fonts on your WordPress site, along the most efficient method to use the fonts for efficiency.
Brian Jackson
Brian has a great love for WordPress is a frequent user of it for over a decade and has even developed two premium plugins. Brian loves to write, watch movies and hikes. Connect with Brian on Twitter.