Once easily accessible, icons were difficult to use effectively in WordPress. Thanks to sprites, some of these challenges could be resolved without causing any major issues. The advent of Retina displays didn’t help matters. To address this, icon fonts are now used. This is an advantage because a large number of icons can be stored in a single file. As a result, this significantly reduces the number of requests and allows you to use virtually any icon you want while enhancing your site’s visual content.
In this article, you'll get a real sense of everything you need to know about royalty-free icons for your WordPress site, where to find them, and how to make the most of them to achieve your goals.
Where can you find royalty-free icon fonts for your WordPress site?
There are many places where you can search for icon fonts for a WordPress site. To do so, simply type “icon font” into Google to get top-performing results.
Among the most popular results is the Font Awesome. There, you can find over 1,400 free icons. If that number isn’t quite enough for you, this icon library gives you access to over 4,500 icons and images if you decide to pay for the professional version. With the icons available in both the free and paid versions, you’ll be able to do just about anything.
You also have the option of using another popular service: IcoMoon, which gives you free access to more than 5,500 vector icons in a variety of colors. If you need more icons, there’s also a paid version available. This version gives you access to more than 4,000 additional icons.
Another app that could prove very useful is Fontello. It lets you view and create icon fonts tailored to your needs. Depending on your goals, this allows you to either design your own icon fonts or access some excellent ones.
Fans of truly lightweight icon sets can give Bytesize a try. The options available to you when you choose it are quite extensive. For those who want to use SVG icons manually, the best solution is still the iconmonstr library. The icons in this library are free and easily accessible.
How can you use WordPress font icons easily and effectively?
By using an icon font plugin or linking to an external icon font library, you’ll have access to all the resources in that library. It will then be more beneficial and much easier to manage if you use only about twenty icons throughout your WordPress site.
Therefore, it is recommended that you load scripts from a CDN. This will improve loading speed. To do this, you’ll need to make sure you’re using the correct primary CDN. To improve performance, it’s important to host the various icon fonts you need locally.
It’s just as important to use only the ones that are useful to you. To do this, make sure to load the icon fonts from your WordPress hosting provider’s server. You can also load them from your own CDN.
By selecting only the icon fonts you want to use, you can reduce the file size from 100 KB to just a few KB. As you can see, this is a very attractive solution. Better yet, you can combine icons from multiple font sets to make them match. The possibilities are endless, and you can work toward finding the best royalty-free icons for your WordPress site.
See also: How to Add a WordPress Favicon to Your Site?
How do you select the font icon you need?
Using a font icon requires a few important steps. First, you need to host the font file on your server. Next, you need to use aCSS stylesheet to load the font. Finally, you need to create tags to add these two-dimensional graphics where they’re needed.
Even if your website loads only one file, there are several file formats available for each font. This is because some browsers use different formats. For example, when you use Font Awesome, six different file formats are available.
These include EOT, SVG, TTF, WOFF, WOFF 2, and finally OTF. However, depending on browser support, you’ll actually only need two formats: WOFF and WOFF 2. WOFF, for example, is supported by more than 93% of all modern browsers.
As for WOFF 2, it is supported by more than 83% of all modern browsers, even though it is more highly compressed. It would therefore be a good idea to choose one or the other. However, for the sake of efficiency, you can choose both. Depending on your code, the browser will then select the appropriate one to deliver to the user.
Tasks for WordPress site users when selecting a font icon
Initially, your task will be to use a tool to select only the icons you need. After that, you can add these files to your project directory—usually in a fonts folder.
Next, in your project, you have the flexibility to add the Font Awesome CSS file. You can then add it to your website. The CSS file can also be queued. If it’s small, you can easily use it inline.
What about the accessibility of icon fonts?
One of the main challenges with icon fonts is that they are difficult to access. Some screen readers may choose to skip them. Even more seriously, others may choose to read the Unicode or the character itself.
Therefore, it is advisable to account for situations where fonts fail to load. Ideally, decorative icons would simply disappear when they fail to load. This way, critical icons would be replaced with text in the event of a problem.
To ensure a more comprehensive implementation, you can also use Modernizr to test font support. To do this, you’ll need to make a few changes to the CSS. That covers the key points regarding the accessibility of icon fonts.
Where to Find Royalty-Free Icons for Your WordPress Site: A Summary
You now know the key steps to save time and improve performance when using free icons with an open-source license on your WordPress site. You also have the tools you need to easily find icon fonts on your WordPress site. As a tip, however, it would be beneficial to use a font generator to create an icon font pack that includes only the icons you want to use. This will help keep your theme very clean and uncluttered.
