Nowadays, websites are all about visual impact, and WordPress icons are a wonderful way to achieve that.
In the early days of web design, Windings and Webdings were the closest things we had to icon fonts. Those were fonts that replaced regular letters and numbers with basic symbols such as arrows, stars, etc. While they were somewhat clunky and not always visually appealing, they were perfectly adequate at the time.
While you can still find Wingdings and Webdings (simply scroll through the fonts available in Microsoft Word or Google Pages, and you will find them), most people now prefer to use the more up-to-date icons that are currently available. These are far more advanced, and there are literally thousands to choose from, with new ones appearing all the time.
This article explains what WordPress icons and fonts are, where to find them, and how to add them to your site content quickly and easily.
What Are WordPress Icons and How Are They Used?
We all know what text fonts are: files containing letters and numbers all styled in a particular way, such as Calibri, Arial, New Times Roman, Helvetica, etc.
Similarly, icon fonts are files that contain groups of graphical symbols (icons) rather than characters like letters or numbers. Icons typically include things relating to modern-day life, for example, social media logos, shopping cart symbols, email ‘envelopes,’ telephones, etc. Oh, and let’s not forget the humble emojis!
The advantage of WordPress icons over images is that they are vector graphics. That means they are infinitely scalable with no loss of quality – you can make them as large as you want with no pixelation issues. Furthermore, it is easy to change their color, and compared to other image types, they are lightweight code-wise.
Website designers particularly favor icon fonts because they can style them with CSS in the same way as regular text.
Icons are generally used in place of text as they:
- Take up less space than text, which is very important with mobile devices.
- Are often self-explanatory and can be understood by non-native speakers.
- Provide greater visual impact than text
- Make sites easier on the eye, as text-heavy sites are not only dull, but they are pretty tricky to read.
For example, eCommerce sites often use the shopping cart symbol as it is instantly recognizable. Similarly, the envelope icon is generally understood to mean ’email us,’ while the telephone symbol is also self-explanatory. And if you look at the top right-hand side of the WPLift website, you will notice the magnifying glass icon – clicking that calls up the search bar.
Article Continues Below
Where Can I Find Icons and Icon Fonts?
There are plenty of sources of WordPress icon fonts available, both free and premium. Here is just a small selection of them:
Font Awesome
Font Awesome is probably the best-known source of icons. That’s not by coincidence, as they currently offer over 2,000 free and 16,000+ pro ones across 68 categories – they even have animated ones, too! What’s more, they are continually adding new ones.
Font Awesome calls their icon fonts ‘kits.’ You get one kit and access to all the free icons in the free plan. For $99 per year, you can upgrade to ‘Pro,’ which includes 20 kits and access to the free and premium icons.
Finding all the icons you will ever need should be easy with Font Awesome. Indeed, even the free library may be sufficient for many applications. They also have a very detailed help section to help you get the most out of their icons.
Fontello
Fontello not only allows you to build icon fonts using a library of readymade open-source icons, but it also lets you add your own custom SVG icons or images. Furthermore, Fontello also has a detailed help section to guide you on creating icon fonts.
The best thing about Fontello is it is entirely free.
Icomoon
Icomoon gives you access to over 5,500 free and over 4,000 premium icons, plus you can import your own. From those, you can create your own icon fonts to use in your WordPress site.
While Icomoon has a free plan, it stores everything locally in your browser. The downside of that is you lose everything every time you clear your browser’s cache. You can avoid that problem by purchasing a paid plan which stores everything in ‘projects’ in your account. Furthermore, the paid plans – which cost from $9 per month – include access to the premium icons, giving you greater flexibility when creating your icon fonts.
Bytesize
Bytesize may only contain 101 icons, but that makes it super-lightweight, weighing in at a mere 11.7KB minified or 3.2KB as SVGZ. Furthermore, it is possible to adjust each icon’s weight, color, and size, plus you can choose between round or square edges.
Despite not having the thousands of icons offered by Font Awesome, etc., the Bytesize ones cover many modern everyday applications. Best of all, it’s free.
3 Ways To Use WordPress Icon Fonts
I’ll now tell you some ways of adding icon fonts to your WordPress content quickly and easily.
To keep things beginner-friendly, I have tried to avoid methods that require you to mess around with things like code, CSS, or your functions.php file, the latter of which, if done incorrectly, can wreak havoc with your site.
Option 1 – Using the Font Awesome Icons Included in Elementor
If you use Elementor, you are in for a real treat, as that page builder already integrates Font Awesome icons. That means you have access to around fifteen hundred icons for free. Furthermore, if you have a Font Awesome Pro subscription, you can access those from within Elementor, too.
To access the icon fonts, all you need to do is type ‘Icon’ in the elements search bar. Next, drag the icon block to wherever you need it in your content. Then, call up the icon library by clicking on the icon in the ‘Edit Icon’ panel:
By adjusting the settings in the ‘Advanced’ and ‘Style’ tabs in the Icon Editor, you can customize the icons to your liking. What’s more, you can also upload your own SVG icons.
Option 2 – Using the Icon Fonts Available in Gutenberg
By default, Gutenberg only includes a few social icons, which you can access by typing ‘Icon’ in the ‘Blocks’ search bar:
However, it is possible to add lots more, and you will see what is available to install underneath the search result:
Clicking on any of those will install a new block(s) from which you will be able to access lots of icon fonts:
It is possible to customize the icons. Begin by clicking the gear icon at the top right of the screen. Next, click the ‘Block’ tab, and then adjust the various settings that appear to your liking:
Option 3 – Using a WordPress Icon Font Plugin
There are several WordPress plugins specifically to help you add icon fonts to your content.
One of the most popular is Font Awesome, produced by the same people who bring us Font Awesome icons. However, I’m not going to discuss that one here because I found it a pain to set up and use. Besides, there are plenty of Font Awesome plugin tutorials available on the internet.
Instead, I am going to talk about WP Font Awesome. This free plugin allows you to add and customize Font Awesome icons using simple shortcodes. Once installed and activated, it requires no configuration. Furthermore, unlike Font Awesome’s plugin, you don’t even need to register on the Font Awesome website to use it.
There are three shortcode types in WP Font Awesome:
- Solid style: [wpfa5s icon=”home” size=”3x” color”#336699″]
- Regular style (only supported by limited icons) [wpfa5r icon=”user” color=”red”]
- Brands: [wpfa5b icon=”wordpress” size=”5x” color=”#3B5998″].
You can change the icon type, size, and color by replacing the contents within each set of quotation marks. For example, I will create three icons as follows:
- A solid style car icon, size 10x, and orange in color
- An address card icon, size 5x and red in color
- A FedEx logo, size 3x and purple in color, but this time using the hex color code.
Below is a screenshot showing the shortcodes inserted into a post using the shortcode block in Gutenberg:
And the three finished icons look like this:
To get a hex code for a color, you can use a site such as htmlcolorcodes.com. If you wish to pick a color from an image, use something like imagecolorpicker.com to get the corresponding hex code. You can find the names of each icon on the Font Awesome website, although you can often just guess many of them.
WP Font Awesome lets you place icons virtually anywhere on your site, including menus, widgets, posts, pages, and titles.
Icon Fonts and Site Speed
There is one downside to using icon fonts on your site: the extra bloat they bring may impact speed.
The reason for this is if you are linking to an external library or are using a plugin, the entire icon font library often gets downloaded. That is not a very efficient utilization of resources, particularly if you only use a few icons out of a font of several hundred.
A further reason why icon fonts can impact your site’s performance is that loading from multiple CDNs is obviously going to be slower than loading from just one. This is because several HTTP/2 connections and numerous DNS lookups are required, all of which can slow things down considerably.
If you are super worried about icon fonts slowing your site down, installing them locally either on your own CDN or your WordPress host server would probably be the best option. That will allow you to select only the icons you need, thereby reducing the overall file size considerably. Furthermore, you will be able to pick and choose icons from several different icon libraries.
Visit the WPLift article “How to Host Google Fonts Locally on WordPress (Or Other Fonts, Too!)” for a step-by-step tutorial on how to do that.
Conclusion
There are literally many thousands of WordPress icons available covering so many genres and applications. They are ideal for adding visual impact to your website while minimizing text clutter, making them essential on mobile devices. Furthermore, they can help speakers of other languages understand and navigate the site more easily.
Do you use icon fonts in your WordPress site content? If so, what method do you use, and have you tried any other methods previously? As always, I’d love to hear your feedback.
