Once easily accessible, icons were difficult to use effectively in WordPress. Thanks to sprites, some difficulties could be solved without having a major impact. The advent of retina screens has not helped. To cope with this, there is the use of icon fonts. This is an advantage since the icons can be kept in large numbers in a single file. This has the impact of seriously lowering the number of your requests and using almost all the icons you dream of while improving the visual content of your site.
In this article, you will get a real idea of everything you need to know about royalty-free icons for your WordPress site, which platform to find them on and how to best leverage them for your purposes.
Where to 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 get there, just type "icon font" into Google to get great performance suggestions.
Among the most appreciated results, there is the Font Awesome. Here you can find over 1400 free icons. If you are not really satisfied with this number, this icon bank allows you to have more than 4500 icons and images if you decide to pay for a professional version. With the icons available in both the free and paid versions, you can do almost anything.
You also have the possibility to adopt another popular service. This is IcoMoon , which gives you free access to more than 5,500 vector pictograms of various colors for free. When you need more icons, there is also a paid version. The latter gives you access to more than 4,000 icons.
Another application that could be very useful is Fontello. It offers you the possibility of seeing and creating icon fonts according to your needs. So, depending on your objectives, you will be able to start designing icon fonts or have some very valuable ones.
Lovers of really light icon games can try their hand at Bytesize. The possibilities you have when choosing it are not small. For those who want to use SVG icons manually, the best solution is the iconmonstr library. The icons in this library are free and easily accessible.
How to use WordPress font icons easily and efficiently?
By using an icon font extension or a link to an external icon font library, you have access to all of its resources. It will then be more beneficial and much more manageable to use only 20 or so icons on your entire WordPress site.
It is therefore advisable to load the scripts from a CDN. This allows you to gain in speed. To achieve this, you will have to make sure that your main CDN is the right one. In order to gain in performance, it is important to host locally the different icon fonts you need.
It is equally important to use only those that are useful to you. To do this, make sure you upload the icon fonts from your WordPress host's server. You can also upload them from your own CDN.
By taking only the icon fonts you want to use, it is possible to reduce the file size from 100 KB to a few KB. As you can see, this is a very interesting solution. Even better, you can arrange icons from multiple font sets to match them. So the possibilities are endless and you can take action to find the best royalty-free icons for your WordPress site.
See also: How to add a WordPress favicon to your site?
How to select the font icon you need?
Using a font icon requires going through a few important steps. First, you need to host the font file on your server. Next, you need to use a CSS style sheet to load the font. Finally, you need to create tags to add these two-dimensional graphics where they belong.
Even if your website only loads one file, you have several file formats for each font. In fact, some browsers use different formats. For example, when you use Font Awesome, six different file formats are available.
These areEOT, SVG, TTF, WOFF, WOFF 2 and finally OTF. However, depending on how the browser is set up, you will actually only need two formats. WOFF, for example, is supported by more than 93% of all modern browsers.
As far as WOFF 2 is concerned, it is supported by more than 83% of all modern browsers even if it is more compressed. It would then be interesting to choose either one or the other. You can also choose both for the sake of efficiency. Depending on your code, the browser will then select which one to deliver to the client.
The tasks given to the user of the WordPress site to choose the font icon
At first, your role will be to use a tool to select only the icons you need. After that, you will be able to add these files to your project directory, mostly in a font directory.
Then, in your project, you can add the Font Awesome CSS file. After that you can add it to your site. Also the CSS file can be queued. When it is small, you can use it online in the easiest way.
What about the accessibility of icon fonts?
One of the main difficulties with icon fonts is that they are not easily accessible. Some screen readers may decide to skip them. Even worse, others may choose to read the unicode or the character itself.
So you should take into account the reactions when the fonts do not load. In the best case, decorative icons could just disappear when they are not loaded. So critical icons would be changed to text in case of problems.
In order to have a more global implementation, it is also possible to ask Modernizr to test the support of fonts. To achieve this, it will be necessary to modify the CSS somewhat. So that's all the important information about the accessibility of icon fonts.
Where to find royalty-free icons for your WordPress site: summary
You now know the essential steps to take to save time and performance when it comes to using free, freely licensed icons for your WordPress site. So you have the elements to easily find icon fonts for 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 have the impact of making your theme very clean.
