How To Use WordPress Icon Fonts Correctly and Get the Greatest Efficiency

0
31
Advertisement


These days, web sites are all about visible impression, and WordPress icons are a beautiful approach to obtain that.

Within the early days of net design, Windings and Webdings had been the closest issues we needed to icon fonts. These had been fonts that changed common letters and numbers with primary symbols reminiscent of arrows, stars, and so forth. Whereas they had been considerably clunky and never all the time visually interesting, they had been completely satisfactory on the time.

Whilst you can nonetheless discover Wingdings and Webdings (merely scroll via the fonts accessible in Microsoft Phrase or Google Pages, and you will see that them), most individuals now want to make use of the extra up-to-date icons which might be at the moment accessible. These are much more superior, and there are actually hundreds to select from, with new ones showing on a regular basis.

This text explains what WordPress icons and fonts are, the place to search out them, and the way to add them to your website content material rapidly and simply.

What Are WordPress Icons and How Are They Used?

Everyone knows what textual content fonts are: recordsdata containing letters and numbers all styled in a specific means, reminiscent of Calibri, Arial, New Occasions Roman, Helvetica, and so forth.

Equally, icon fonts are recordsdata that comprise teams of graphical symbols (icons) moderately than characters like letters or numbers. Icons sometimes embody issues regarding modern-day life, for instance, social media logos, purchasing cart symbols, electronic mail ‘envelopes,’ telephones, and so forth. Oh, and let’s not overlook the standard emojis!

The benefit of WordPress icons over photos is that they're vector graphics. Meaning they're infinitely scalable with no lack of high quality – you can also make them as massive as you need with no pixelation points. Moreover, it's simple to vary their coloration, and in comparison with different picture varieties, they're light-weight code-wise.

Web site designers notably favor icon fonts as a result of they will fashion them with CSS in the identical means as common textual content.

Icons are typically used rather than textual content as they:

  • Take up much less house than textual content, which is essential with cellular gadgets.
  • Are sometimes self-explanatory and may be understood by non-native audio system.
  • Present larger visible impression than textual content
  • Make websites simpler on the attention, as text-heavy websites will not be solely boring, however they're fairly tough to learn.

For instance, eCommerce websites typically use the purchasing cart image as it's immediately recognizable. Equally, the envelope icon is mostly understood to imply ’electronic mail us,’ whereas the phone image can also be self-explanatory. And if you happen to have a look at the highest right-hand aspect of the WPLift web site, you'll discover the magnifying glass icon – clicking that calls up the search bar.

Article Continues Under

The place Can I Discover Icons and Icon Fonts?

There are many sources of WordPress icon fonts accessible, each free and premium. Right here is only a small collection of them:

Font Superior

Screenshot of Font Awesome's websiteScreenshot of Font Awesome's website

Font Superior might be the best-known supply of icons. That’s not by coincidence, as they at the moment supply over 2,000 free and 16,000+ professional ones throughout 68 classes – they even have animated ones, too! What’s extra, they're frequently including new ones.

Font Superior calls their icon fonts ‘kits.’ You get one package and entry to all of the free icons within the free plan. For $99 per 12 months, you possibly can improve to ‘Professional,’ which incorporates 20 kits and entry to the free and premium icons.

Discovering all of the icons you'll ever want must be simple with Font Superior. Certainly, even the free library could also be enough for a lot of functions. Additionally they have a really detailed assist part that can assist you get probably the most out of their icons.

Attempt Font Superior

Fontello

Screenshot of Fontello's websiteScreenshot of Fontello's website

Fontello not solely lets you construct icon fonts utilizing a library of readymade open-source icons, nevertheless it additionally enables you to add your personal customized SVG icons or photos. Moreover, Fontello additionally has an in depth assist part to information you on creating icon fonts.

The very best factor about Fontello is it's fully free.

Attempt Fontello

Icomoon

Screenshot of Icomoon's websiteScreenshot of Icomoon's website

Icomoon provides you entry to over 5,500 free and over 4,000 premium icons, plus you possibly can import your personal. From these, you possibly can create your personal icon fonts to make use of in your WordPress website.

Whereas Icomoon has a free plan, it shops every thing domestically in your browser. The draw back of that's you lose every thing each time you clear your browser’s cache. You'll be able to keep away from that drawback by buying a paid plan which shops every thing in ‘initiatives’ in your account. Moreover, the paid plans – which value from $9 monthly ­– embody entry to the premium icons, providing you with larger flexibility when creating your icon fonts.

Attempt Icomoon

Bytesize

Screenshot of Bytesize websiteScreenshot of Bytesize website

Bytesize could solely comprise 101 icons, however that makes it super-lightweight, weighing in at a mere 11.7KB minified or 3.2KB as SVGZ. Moreover, it's doable to regulate every icon’s weight, coloration, and measurement, plus you possibly can select between spherical or sq. edges.

Regardless of not having the hundreds of icons supplied by Font Superior, and so forth., the Bytesize ones cowl many fashionable on a regular basis functions. Better of all, it’s free.

Attempt Bytesize

3 Methods To Use WordPress Icon Fonts

I’ll now let you know some methods of including icon fonts to your WordPress content material rapidly and simply.

To maintain issues beginner-friendly, I've tried to keep away from strategies that require you to fiddle with issues like code, CSS, or your features.php file, the latter of which, if completed incorrectly, can wreak havoc along with your website.

Possibility 1 – Utilizing the Font Superior Icons Included in Elementor

In case you use Elementor, you might be in for an actual deal with, as that web page builder already integrates Font Superior icons. Meaning you've entry to round fifteen hundred icons at no cost. Moreover, if in case you have a Font Superior Professional subscription, you possibly can entry these from inside Elementor, too.

To entry the icon fonts, all you might want to do is kind ‘Icon’ within the parts search bar. Subsequent, drag the icon block to wherever you want it in your content material. Then, name up the icon library by clicking on the icon within the ‘Edit Icon’ panel:

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

By adjusting the settings within the ‘Superior’ and ‘Fashion’ tabs within the Icon Editor, you possibly can customise the icons to your liking. What’s extra, you can too add your personal SVG icons.

Possibility 2 – Utilizing the Icon Fonts Accessible in Gutenberg

By default, Gutenberg solely features a few social icons, which you'll entry by typing ‘Icon’ within the ‘Blocks’ search bar:

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

Nonetheless, it's doable so as to add tons extra, and you will note what is accessible to put in beneath the search end result:

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

Clicking on any of these will set up a brand new block(s) from which it is possible for you to to entry a lot of icon fonts:

GIF showing how to add icons to WordPress in GutenbergGIF showing how to add icons to WordPress in Gutenberg

It's doable to customise the icons. Start by clicking the gear icon on the prime proper of the display screen. Subsequent, click on the ‘Block’ tab, after which regulate the assorted settings that seem to your liking:

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

Possibility 3 – Utilizing a WordPress Icon Font Plugin

There are a number of WordPress plugins particularly that can assist you add icon fonts to your content material.

Probably the most common is Font Superior, produced by the identical individuals who carry us Font Superior icons. Nonetheless, I’m not going to debate that one right here as a result of I discovered it a ache to arrange and use. In addition to, there are many Font Superior plugin tutorials accessible on the web.

As an alternative, I'm going to speak about WP Font Superior. This free plugin lets you add and customise Font Superior icons utilizing easy shortcodes. As soon as put in and activated, it requires no configuration. Moreover, not like Font Superior’s plugin, you don’t even have to register on the Font Superior web site to make use of it.

There are three shortcode varieties in WP Font Superior:

  • Strong fashion: [wpfa5s icon=”home” size=”3x” color”#336699″]
  • Common fashion (solely supported by restricted icons) [wpfa5r icon=”user” color=”red”]
  • Manufacturers: [wpfa5b icon=”wordpress” size=”5x” color=”#3B5998″].

You'll be able to change the icon kind, measurement, and coloration by changing the contents inside every set of citation marks. For instance, I'll create three icons as follows:

  • A strong fashion automotive icon, measurement 10x, and orange in coloration
  • An deal with card icon, measurement 5x and pink in coloration
  • A FedEx brand, measurement 3x and purple in coloration, however this time utilizing the hex coloration code.

Under is a screenshot displaying the shortcodes inserted right into a publish utilizing the shortcode block in Gutenberg:

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

And the three completed icons appear like this:

Screenshot showing the finished icons that were embedded in a WordPress post using shortcodes and the WP Font Awesome pluginScreenshot 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 coloration, you should use a website reminiscent of htmlcolorcodes.com. In case you want to choose a coloration from a picture, use one thing like imagecolorpicker.com to get the corresponding hex code. You will discover the names of every icon on the Font Superior web site, though you possibly can typically simply guess a lot of them.

WP Font Superior enables you to place icons just about anyplace in your website, together with menus, widgets, posts, pages, and titles.

Icon Fonts and Website Velocity

There's one draw back to utilizing icon fonts in your website: the additional bloat they convey could impression velocity.

The rationale for that is in case you are linking to an exterior library or are utilizing a plugin, your entire icon font library typically will get downloaded. That's not a really environment friendly utilization of assets, notably if you happen to solely use just a few icons out of a font of a number of hundred.

An additional cause why icon fonts can impression your website’s efficiency is that loading from a number of CDNs is clearly going to be slower than loading from only one. It's because a number of HTTP/2 connections and quite a few DNS lookups are required, all of which may sluggish issues down significantly.

In case you are tremendous nervous about icon fonts slowing your website down, putting in them domestically both by yourself CDN or your WordPress host server would most likely be the best choice. That may permit you to choose solely the icons you want, thereby lowering the general file measurement significantly. Moreover, it is possible for you to to choose and select icons from a number of completely different icon libraries.

Go to the WPLift article “ Host Google Fonts Regionally on WordPress (Or Different Fonts, Too!)” for a step-by-step tutorial on how to do this.

Conclusion

There are actually many hundreds of WordPress icons accessible protecting so many genres and functions. They are perfect for including visible impression to your web site whereas minimizing textual content muddle, making them important on cellular gadgets. Moreover, they may also help audio system of different languages perceive and navigate the positioning extra simply.

Do you utilize icon fonts in your WordPress website content material? In that case, what methodology do you utilize, and have you ever tried every other strategies beforehand? As all the time, I’d love to listen to your suggestions.



How To Use WordPress Icon Fonts Properly: Get the Best Performance (2022)How To Use WordPress Icon Fonts Properly: Get the Best Performance (2022)



Supply hyperlink

Ad

Leave a Reply