How To Use WordPress Icon Fonts Properly and Get the Best Performance
These days, web sites are all about visible affect, and WordPress icons are an exquisite option to obtain that.
Within the early days of net design, Windings and Webdings have been the closest issues we needed to icon fonts. These have been fonts that changed common letters and numbers with fundamental symbols corresponding to arrows, stars, and so forth. Whereas they have been considerably clunky and never at all times visually interesting, they have been completely ample on the time.
When you can nonetheless discover Wingdings and Webdings (merely scroll via the fonts obtainable in Microsoft Phrase or Google Pages, and you can find them), most individuals now choose to make use of the extra up-to-date icons which can be presently obtainable. 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 seek out them, and the way to add them to your website content material shortly 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 selected method, corresponding to Calibri, Arial, New Occasions Roman, Helvetica, and so forth.
Equally, icon fonts are recordsdata that comprise teams of graphical symbols (icons) somewhat than characters like letters or numbers. Icons usually embrace issues referring to modern-day life, for instance, social media logos, buying cart symbols, e mail ‘envelopes,’ telephones, and so forth. Oh, and let’s not overlook the common-or-garden emojis!
The benefit of WordPress icons over photos is that they’re vector graphics. Which means they’re infinitely scalable with no lack of high quality – you may make them as giant as you need with no pixelation points. Moreover, it’s straightforward to vary their coloration, and in comparison with different picture sorts, 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 method as common textual content.
Icons are typically used instead of textual content as they:
- Take up much less house than textual content, which is essential with cell gadgets.
- Are sometimes self-explanatory and may be understood by non-native audio system.
- Present higher visible affect than textual content
- Make websites simpler on the attention, as text-heavy websites should not solely uninteresting, however they’re fairly difficult to learn.
For instance, eCommerce websites typically use the buying cart image as it’s immediately recognizable. Equally, the envelope icon is usually understood to imply ’e mail us,’ whereas the phone image can also be self-explanatory. And in case you have a look at the highest right-hand facet of the WPLift web site, you’ll discover the magnifying glass icon – clicking that calls up the search bar.
Article Continues Beneath
The place Can I Discover Icons and Icon Fonts?
There are many sources of WordPress icon fonts obtainable, each free and premium. Right here is only a small collection of them:
Font Superior
Font Superior might be the best-known supply of icons. That’s not by coincidence, as they presently 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 equipment and entry to all of the free icons within the free plan. For $99 per yr, you may improve to ‘Professional,’ which incorporates 20 kits and entry to the free and premium icons.
Discovering all of the icons you’ll ever want needs to be straightforward with Font Superior. Certainly, even the free library could also be enough for a lot of purposes. In addition they have a really detailed help section that will help you get probably the most out of their icons.
Fontello
Fontello not solely means that you can construct icon fonts utilizing a library of readymade open-source icons, however it additionally helps you to add your individual customized SVG icons or photos. Moreover, Fontello additionally has an in depth help section to information you on creating icon fonts.
The most effective factor about Fontello is it’s fully free.
Icomoon
Icomoon offers you entry to over 5,500 free and over 4,000 premium icons, plus you may import your individual. From these, you may create your individual icon fonts to make use of in your WordPress website.
Whereas Icomoon has a free plan, it shops every part domestically in your browser. The draw back of that’s you lose every part each time you clear your browser’s cache. You may keep away from that downside by buying a paid plan which shops every part in ‘tasks’ in your account. Moreover, the paid plans – which price from $9 per thirty days – embrace entry to the premium icons, supplying you with higher flexibility when creating your icon fonts.
Bytesize
Bytesize might 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 attainable to regulate every icon’s weight, coloration, and dimension, plus you may 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 trendy on a regular basis purposes. Better of all, it’s free.
3 Methods To Use WordPress Icon Fonts
I’ll now let you know some methods of including icon fonts to your WordPress content material shortly 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 achieved incorrectly, can wreak havoc along with your website.
Choice 1 – Utilizing the Font Superior Icons Included in Elementor
For those who use Elementor, you’re in for an actual deal with, as that web page builder already integrates Font Superior icons. Which means you will have entry to round fifteen hundred icons without cost. Moreover, in case you have a Font Superior Professional subscription, you may entry these from inside Elementor, too.
To entry the icon fonts, all it’s essential 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:
By adjusting the settings within the ‘Superior’ and ‘Model’ tabs within the Icon Editor, you may customise the icons to your liking. What’s extra, it’s also possible to add your individual SVG icons.
Choice 2 – Utilizing the Icon Fonts Obtainable in Gutenberg
By default, Gutenberg solely features a few social icons, which you’ll entry by typing ‘Icon’ within the ‘Blocks’ search bar:
Nevertheless, it’s attainable so as to add heaps extra, and you will note what is accessible to put in beneath the search outcome:
Clicking on any of these will set up a brand new block(s) from which it is possible for you to to entry numerous icon fonts:
It’s attainable to customise the icons. Start by clicking the gear icon on the prime proper of the display. Subsequent, click on the ‘Block’ tab, after which regulate the assorted settings that seem to your liking:
Choice 3 – Utilizing a WordPress Icon Font Plugin
There are a number of WordPress plugins particularly that will help you add icon fonts to your content material.
One of the crucial in style is Font Awesome, produced by the identical individuals who deliver us Font Superior icons. Nevertheless, 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 obtainable on the web.
As a substitute, I’m going to speak about WP Font Awesome. This free plugin means that you can 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 sorts 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 may change the icon kind, dimension, 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, dimension 10x, and orange in coloration
- An deal with card icon, dimension 5x and pink in coloration
- A FedEx brand, dimension 3x and purple in coloration, however this time utilizing the hex coloration code.
Beneath is a screenshot displaying the shortcodes inserted right into a submit utilizing the shortcode block in Gutenberg:
And the three completed icons seem like this:
To get a hex code for a coloration, you should utilize a website corresponding to htmlcolorcodes.com. For those who 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 Awesome website, though you may typically simply guess a lot of them.
WP Font Superior helps you to place icons just about wherever in your website, together with menus, widgets, posts, pages, and titles.
Icon Fonts and Website Velocity
There may be one draw back to utilizing icon fonts in your website: the additional bloat they convey might affect pace.
The explanation for that is if you’re linking to an exterior library or are utilizing a plugin, all the icon font library typically will get downloaded. That’s not a really environment friendly utilization of assets, notably in case you solely use a number of icons out of a font of a number of hundred.
An extra cause why icon fonts can affect your website’s efficiency is that loading from a number of CDNs is clearly going to be slower than loading from only one. It is because a number of HTTP/2 connections and quite a few DNS lookups are required, all of which might gradual issues down significantly.
If you’re tremendous frightened about icon fonts slowing your website down, putting in them domestically both by yourself CDN or your WordPress host server would in all probability be the most suitable choice. That can permit you to choose solely the icons you want, thereby lowering the general file dimension significantly. Moreover, it is possible for you to to select and select icons from a number of totally different icon libraries.
Go to the WPLift article “How to Host Google Fonts Locally on WordPress (Or Other Fonts, Too!)” for a step-by-step tutorial on how to try this.
Conclusion
There are actually many hundreds of WordPress icons obtainable protecting so many genres and purposes. They are perfect for including visible affect to your web site whereas minimizing textual content litter, making them important on cell 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? If that’s the case, what technique do you utilize, and have you ever tried another strategies beforehand? As at all times, I’d love to listen to your suggestions.
