Icon fonts is a term that is probably familiar to anyone dabbling around in WordPress. If you are a relative novice to this blogging platform, you may be wondering what these things everyone’s raving about are. Are they fonts? Are they icons? Should I use them? In this article, we’re going to answer all your icon fonts-related questions, and more.

So, What Are Icon Fonts?

Icon fonts are essentially fonts or typefaces, but with one difference that sets them apart from your regular fonts. Instead of numbers and letters, they contain symbols and pictograms or glyphs.  One of the cool things about them is that you can style them or customize them via CSS, just like you would do with any text.

Icon fonts are already built-in in every WordPress site. The pack is called Dashicons and, in addition to font icons you normally see around your Dashboard, it also contains a number of other useful icons, such as shopping cart, download button, etc. In fact, these are some of the most common uses of font icons.

So, we established that fonts and icon fonts are very similar but not the same thing. Another thing that may cause some confusion is the difference between icons and icon fonts. Technically speaking, icons are image files, like any other image file that you use on your website. What’s more important, they are non-vector graphics. They are quite popular among WordPress users, with tons of places to download free icons in a myriad of styles.  However, being non-vector files, they lose quality when scaled up (enlarged), and they can be difficult to manipulate. Icon fonts, on the other hand, are basically fonts, but instead of numbers and letters they contain image symbols. Their quality doesn’t depend on the size of the screen and they can be scaled up without becoming fuzzy. Unlike icons, you can’t insert icon fonts into your WordPress website like you would insert images. Instead, you use a special shortcode or perhaps a plugin.  

Why Should I Use Icon Fonts?

As we mentioned earlier, icon fonts are all the rage among WordPress designers, developers and users alike. And here’s a couple of reasons why:

• Icon fonts are vectors. What this means is that you can scale them up or down without fearing any quality loss. This is essential in an era of retina design, and it is crucial for responsiveness too.
  
• Icon fonts are basically a bunch of symbols packed in a single file. This is very helpful since it reduces HTTP requests compared to when we load several images.
  
• They are very lightweight, especially if we don’t overdo it and only use packs with the symbols we actually need and use. 
  
• As we already mentioned, icon fonts can be styled and manipulated like regular fonts.
  
• And, let’s not forget – icon fonts look pretty cool and add a professional, classy touch to any site.
  

Where Can I Find Icon Fonts?

Like we said earlier, there is an icon font pack already installed with WordPress. Dashicons is a neat little collection of font icons that, however great, still might not suffice for your needs. On the other hand, there are tons of free and premium icon font collections you can download from the Internet and use on your website. Simply Google “icon fonts” and you’ll see.

Of course, not all icon fonts are equal. Some are simply better, like the massively popular Font Awesome that offers 1400+ free icons and three times as many premium ones. Or, Fontello, IcoMoon or Genericons.

It should also be said that more and more theme developers are including one or more icon font packs in their themes for free. This is a logical step for any theme that aspires to the “premium” status, as having a selection of icon fonts represents a valuable asset. A quick look at the top selling themes will reveal that the themes that truly count as the best offer the best icon font packs available, namely Font Awesome, Ion icons, Linea Icons and such.

How to Add Font Icons?

As with most things regarding WordPress, the simplest way to add font icons to your website is to use a plugin. There are tons of these you can use, but we recommend Better Font Awesome and WP SVG Icons. Plugins are quite easy to install and activate, so you shouldn’t have any difficulties in that department.

Using a plugin to add font icons is definitely easier and more suitable for inexperienced WordPress users, as the process is very straightforward. However, there are situations in which it is wiser to add icon fonts manually, not with the use of a plugin.

For instance, if you’re creating a theme, you definitely don’t want to go with a plugin for adding the icon fonts. By adding them manually, you minimize the chance that the users will later inadvertently change or delete something.

If you opt for manual adding of icon fonts, there are a few things to keep in mind. One of the popular methods of adding them manually is to simply link to externally hosted icon fonts. This is a quick and easy solution and it probably does the same thing the plugin does, except you do it yourself and have more control.

However, the problem with this method is that it might lead to some performance issues. Linking to an externally hosted icon font library is going to load all the fonts in said library, automatically. Most likely, you don’t really need all those icons that just end up weighing your site down.

To avoid this, you can host the icon fonts locally – on your own WordPress host’s server, or on your CDN.  That way, you can only use the icon fonts you really need. The file size will be significantly reduced and your performance won’t suffer. In addition, this method allows you to mix and match icons from different sets, again using only those that you really need.

Therefore, if you have the know-how or know someone who does, we would definitely recommend going with the third method – hosting icon fonts locally.

The Bottom Line

Whether you’re a theme developer or an administrator of a WordPress website, there is no doubt that you can benefit from icon fonts. It’s a great way to add a little flair to your site without causing damage in terms of performance.

They can be particularly effective when combined with custom typography. You can easily find, download and add custom fonts to your website that are bound to fit your site design perfectly. In fact, there are so many of them around, often for free, it can sometimes be hard to choose the best font for your site or blog. The combination of custom fonts and icon fonts can do wonders for you in terms of visual representation and can help solidify your brand.

As we said, icon fonts carry both the typographic and the symbolic value. As symbols, icons are essential, that’s for sure. They convey so much meaning without taking up much space. Icon fonts give you all that, but don’t take almost anything from you. Unlike regular images, they are tiny and basically weightless. They are easily customizable and highly manageable. They combine the best of both worlds – icons/images and fonts/typefaces. On top of all that, icon fonts are widely available and either free or highly affordable.

Still, you should always exercise prudence and common sense with icon fonts. The general rule of thumb is “less is more,” meaning you should be careful not to stuff your theme with too many icon fonts.

As for the method you’re going to use, we made sure to highlight the pros and cons of said methods, but you have to figure out which one works for you.

Whichever icon font pack you decide to use, and whichever method you opt for, we’re sure you’ll make this terrific resource work in your favor.