How To Use WordPress Icon Fonts Properly and Get the Best Performance

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

Screenshot of Font Awesome's website

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.

Try Font Awesome

Fontello

Screenshot of Fontello's website

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.

Try Fontello

Icomoon

Screenshot of Icomoon's website

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.

Try Icomoon

Bytesize

Screenshot of Bytesize website

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.

Try Bytesize

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:

GIF showing the icon block in Elementor being dragged and dropped in WordPress

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:

Screenshot of the WordPress admin panel showing the location of the icon block in Gutenberg

However, it is possible to add lots more, and you will see what is available to install underneath the search result:

Screenshot showing the icon blocks that can be added to Gutenberg in WordPress

Clicking on any of those will install a new block(s) from which you will be able to access lots of icon fonts:

GIF showing how to add icons to WordPress in Gutenberg

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:

Screenshot showing a camera icon embedded into a WordPress post using Gutenberg, with the location of the customization options

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:

Screenshot of icon shortcodes in an example WordPress post using the WP Font Awesome plugin

And the three finished icons look like this:

Screenshot showing the finished icons that were embedded in a WordPress post using shortcodes and the WP Font Awesome plugin

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.



86 thoughts on “How To Use WordPress Icon Fonts Properly and Get the Best Performance

  • ontorlefe

    As the detection limit of hscTnT was 5 ng L, in the analysis all values below this how long for propecia to work Some research suggests that taking riboflavin, vitamin E, selenium, and N acetyl cysteine by mouth does not reduce fluid, increase height or weight, or decrease infections in children at risk for kwashiorkor

  • Diannog

    Initial reports of BRCA1 linked cases confirmed an excess of cancers with medullary features, lymphocytic infiltration, 31 and syncytial growth patterns 10mg orodispersible levitra mg comprime There was limited data on treatment outcomes including hospital stay, glycemic control during hospitalization and in hospital mortality related to DKA in north Ethiopia

  • Tundere

    Likewise, Cre recombinase under the control of cis regulatory elements controlling expression of Osr2 Osr2 IRES Cre mark the median and distal segments of SSB and the marked cells develop into proximal tubules and glomeruli 34 buy stromectol australia

  • evevews

    In a large n 6560 placebo controlled trial MERLIN TIMI 36 in patients with acute coronary syndrome, there was no benefit shown on outcome measures buying cialis online safe Over 60 of eligible patients disease free at unblinding opted to switch to Letrozole Mylan

  • peloDrype

    clomid 50mg In fact, Rogge s ears were pricked up and he was paying attention meds to reduce systolic blood pressure how much does water pill lower blood pressure to the movement outside the tavern

  • praitly

    Rapid footsteps sounded in the what should blood pressure be on medication hypertension meds have dropped my blood pressure low corridor, Rogge smiled slightly, and he slowly fell into the dirty water nolvadex xt The staff was always fast too, for normal monitoring I never waited more than 20 minutes includes getting blood drawn and ultra sound preformed

  • Spoitte

    Ehlers Danlos syndrome Type 4 involves a defect in Type III precollagen due to COL 3A 1 gene mutation cheap generic cialis Schiz Res 2003 Aug; 62 3 195 204 Clayton et al Reduced mania and depression in juvenile bipolar disorder associated with long chain omega 3 polyunsaturated fatty acid supplementation

  • Mogloulge

    rheumatrex betnovate n cream uses in bangladesh The cancelation of this trip is another consequence of the House Republicans forcing a shutdown of the government, Press Secretary Jay Carney said in an email to reporters Thursday night buy cialis online

  • Как продавать онлайн - Бизнес-секреты

    Равно как и печаль, меланхолия
    может выступать реакцией
    на потерю любимого человека.
    Во всех же прочих случаях за маской меланхолии может скрываться более
    идеалистическая по своей сущности потеря (например, случай покинутой невесты).
    Как продавать онлайн – Бизнес-секреты

  • http://ivistroy.ru/

    Great post. I was checking constantly this blog and I’m
    impressed! Very helpful info specially the last part 🙂 I care for such
    info a lot. I was looking for this particular information for a
    very long time. Thank you and best of luck.

  • http://vopros-remonta-info.ru/

    This is really interesting, You are a very skilled blogger.
    I’ve joined your rss feed and look forward to seeking more of your magnificent post.
    Also, I have shared your site in my social networks!

  • http://smartremstr.ru/

    Thanks a bunch for sharing this with all folks you really understand what you’re speaking approximately!
    Bookmarked. Kindly additionally seek advice from my web site =).
    We will have a link trade agreement between us

  • http://otremontirowal.ru/

    Hello there! Would you mind if I share your blog with
    my facebook group? There’s a lot of folks that
    I think would really enjoy your content. Please let me
    know. Thank you

  • yes-dacha.ru

    Spot on with this write-up, I absolutely think this website needs much more attention. I’ll probably be back again to read more, thanks for the info!

  • Anonymous

    Appreciating the dedication you put into your website and in depth information you present. It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed material. Excellent read! I’ve saved your site and I’m including your RSS feeds to my Google account.

  • rem-dom-stroy.ru

    Hey there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Internet explorer. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the problem solved soon. Kudos

  • remont-master-info.ru

    What’s up everyone, it’s my first pay a visit at this website, and piece of writing is actually fruitful for me, keep up posting these posts.

  • Anonymous

    Hello there, You have done a fantastic job. I will definitely digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  • smartremstroy.ru

    Heya just wanted to give you a quick heads up and let you know a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.

  • delaremontnika.ru

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  • nemasterok.ru

    Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say great blog!

  • remstrdom.ru

    Hey there would you mind stating which blog platform you’re working with? I’m looking to start my own blog in the near future but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S Apologies for getting off-topic but I had to ask!

  • nastroyke-info.ru

    Can I just say what a relief to discover a person that actually knows what they’re talking about online. You certainly know how to bring an issue to light and make it important. More and more people must look at this and understand this side of the story. I was surprised that you aren’t more popular since you surely have the gift.

  • glavdachnik.ru

    I blog quite often and I really appreciate your content. This article has really peaked my interest. I will book mark your website and keep checking for new information about once a week. I subscribed to your RSS feed as well.

  • glavdachnik.ru

    Can I simply say what a relief to find an individual who actually knows what they’re talking about online. You certainly know how to bring an issue to light and make it important. More people should read this and understand this side of the story. I was surprised that you aren’t more popular because you definitely have the gift.

  • удаление пигментных пятен лазером

    A person necessarily help to make significantly articles I would state. This is the first time I frequented your web page and so far? I amazed with the research you made to create this actual post incredible. Fantastic task!

  • infoda4nik.ru

    Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but other than that, this is magnificent blog. An excellent read. I’ll definitely be back.

  • ogorodkino.ru

    Hello there, You have done a great job. I will definitely digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  • sadovoe-tut.ru

    Wow, that’s what I was seeking for, what a data! present here at this weblog, thanks admin of this web site.

  • hay day скачать на компьютер

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  • hay day скачать на компьютер

    Hi there, this weekend is nice in favor of me, since this point in time i am reading this impressive informative post here at my house.

  • delaremontnika.ru

    Howdy! I know this is somewhat off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be awesome if you could point me in the direction of a good platform.

  • хранение вещей

    It’s an awesome piece of writing designed for all the internet people; they will get benefit from it I am sure.

  • Хранение бытовой техники на складе

    I have read so many articles or reviews regarding the blogger lovers except this piece of writing is in fact a nice post, keep it up.

  • хранение вещей минск

    Hi, I think your blog might be having browser compatibility issues. When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, wonderful blog!

  • хранение вещей

    I wanted to thank you for this wonderful read!! I certainly enjoyed every little bit of it. I’ve got you book-marked to check out new stuff you post

  • просмотры в яппи

    A fascinating discussion is worth comment. I do think that you should write more on this issue, it might not be a taboo subject but usually people do not discuss such subjects. To the next! All the best!!

  • накрутка просмотров яппи

    Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup. Do you have any solutions to prevent hackers?

  • Карта мира из дерева на стену купить в Минске

    Hi to every body, it’s my first pay a visit of this blog; this website includes awesome and actually fine information for readers.

  • Карта мира из дерева на стену купить в Минске

    I was recommended this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are amazing! Thanks!

  • Карта мира из дерева на стену

    It’s remarkable designed for me to have a web site, which is helpful in favor of my knowledge. thanks admin

  • Карта мира с подсветкой

    I read this post fully concerning the resemblance of latest and previous technologies, it’s remarkable article.

  • Карта мира из дерева на стену купить в Минске

    Excellent post. I was checking continuously this blog and I am impressed! Very useful information specially the last part 🙂 I care for such info a lot. I was seeking this particular info for a long time. Thank you and good luck.

  • agrosadovnik.ru

    I have been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  • bob tape

    When I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I recieve four emails with the same comment. Perhaps there is a way you can remove me from that service? Cheers!

  • body tape for stomach

    Hello there, just became aware of your blog through Google, and found that it is really informative. I’m gonna watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!

  • купить пуговицы

    Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently rapidly.

  • Прогон сайта хрумером

    Nice blog here! Also your website loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol

  • Прогон сайта хрумером

    First off I want to say awesome blog! I had a quick question that I’d like to ask if you don’t mind. I was curious to know how you center yourself and clear your thoughts before writing. I have had trouble clearing my mind in getting my thoughts out. I do enjoy writing but it just seems like the first 10 to 15 minutes are generally wasted just trying to figure out how to begin. Any ideas or tips? Cheers!

  • Прогон сайта хрумером

    Hi to all, how is everything, I think every one is getting more from this web site, and your views are pleasant in favor of new viewers.

  • купить пуговицы

    Spot on with this write-up, I absolutely feel this web site needs a lot more attention. I’ll probably be back again to read more, thanks for the information!

  • угловая тахта с матрасом

    Hi there! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!

  • тахта угловая

    Hmm is anyone else experiencing problems with the images on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog. Any responses would be greatly appreciated.

  • Unifetets

    Dr Sabyasachi Bhaumik, Consultant Psychiatrist, Leicestershire Partnership NHS Trust viagra online prescription Although it is often suggested that cassava promotes ovulation even increasing the likelihood of twins the evidence is anecdotal at best

  • Трансфер в Шерегеш

    Fantastic blog! Do you have any helpful hints for aspiring writers? I’m planning to start my own website soon but I’m a little lost on everything. Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally confused .. Any suggestions? Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *