Icon Fonts in WordPress – What They Are and Tips on how to Use Them (Manually/Plugin)

Icon fonts could be a very great tool for WordPress websites. They let you upload symbols and photographs on your web page with out slowing it down. That and different causes are why icon fonts have transform standard in recent times.

Should you aren’t positive about this subject, this weblog publish is right here that can assist you out. In it, you’re going to be told what icon fonts are and why it’s a good suggestion to make use of them. After that, you’re going to get step by step directions on how you can upload icon fonts on your WordPress web page, each manually and by means of plugins.

Sounds just right? Then let’s get cracking.

What are Icon Fonts and Why Use Them?

Ahead of we speak about how you can use icon fonts in WordPress, let’s first identify what they even are.

They Comprise Symbols As a substitute of Letters

Because the title suggests, icon fonts are typefaces identical to different custom fonts. Then again, as a substitute of letters and numbers, they include symbols and pictograms. As a question of reality, each WordPress web page is provided with an icon font through default. It is known as Dashicons and gives the symbols within the WordPress major menu.

Then again, there are much more choices in the market. Maximum of them come with recurrently used internet icons like buying groceries carts, obtain buttons, social media trademarks and much more. Libraries steadily include loads of various choices, a lot of them unfastened. Listed here are numerous examples:

• Font Awesome — A library with greater than 1,300 unfastened symbols. They span quite a lot of subjects from arrows to well being, training, manufacturers and extra.
• Genericons — A number of generic icons made through Automattic. You’ll be able to to find the information on Github.
• Fontello — This provider combines a number of icon fonts in a single position and lets you create libraries containing handiest the ones symbols you want, saving house within the procedure.

You’ll be able to to find further icon fonts here and in this article. You’re going to learn to use them in a 2d.

Advantages of The use of Icon Fonts

That handiest leaves the query, why would you employ icon fonts? Why no longer move with photographs as a substitute? Seems, against this to conventional visuals, icon fonts be offering a number of advantages:

• As vector photographs, they scale to any length with out lack of high quality. A super characteristic for responsive design.
• Like different internet textual content, you’ll be able to simply manipulate icon fonts by means of CSS. For instance, you’ll be able to exchange their length and hues, upload drop-shadows, rotate them and much more.
• They let you retailer many symbols inside of a unmarried record. This reduces HTTP requests compared to loading a number of photographs.
• Icon fonts don’t considerably build up web page weight, particularly if you happen to use a library with handiest the icons you want. Nice information on your page loading time!

Alright, now that you already know why this can be a just right thought to make use of icon fonts in WordPress, let’s move over how you’ll be able to upload them on your web page.

Tips on how to Upload Icon Fonts in WordPress Manually

We will be able to first quilt how you can come with icon fonts in WordPress manually. That is the most efficient answer when you’re making a theme the place you need to make use of icon fonts. It means that you can paintings with out a plugin {that a} consumer or shopper may inadvertently exchange or delete. There also are two alternative ways to reach this.

For all of the instructional, we will be able to use the aforementioned Font Awesome. It’s the preferred library and has a large number of symbols unfastened to make use of. Then again, the rules of what you might be about to learn how to practice to different icon fonts as neatly.

Manner 1: Enqueue the Font Remotely

Icon fonts will also be added on your web page like another customized font: through loading them from a far flung server. All you want for that’s the cope with the place they’re hosted. Font Superior gives their very own CDN for that, which you’ll be able to to find and configure here.

After you have the cope with, merely upload the font on your web page with the next piece of code for your theme’s purposes.php record:

serve as ns_add_font_awesome() {
 	wp_enqueue_style( 'ns-font-awesome', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' );
}
 
add_action( 'wp_enqueue_scripts', 'ns_add_font_awesome' );

WordPress will then load Font Superior from the far flung location onto your web page.

Manner 2: Host the Fonts Your self

However, you’ll be able to additionally host the font information by yourself server. This is a just right thought to scale back HTTP requests or on account of GDPR related concerns.

Step one for this system is to obtain the font and unzip it. For Font Superior, you to find the obtain hyperlink within the same place as the CDN address, handiest additional down the web page. As soon as in your onerous force, unzip the record and stir up your FTP shopper (for instance, FileZilla). Move on your energetic theme’s folder below wp-content > subject matters. There, create a brand new listing and provides it a definite title like fonts, then add the whole lot you simply downloaded into it. After that, load the font into your web page with this piece of code inside of purposes.php:

serve as ns_add_font_awesome() {
	wp_enqueue_style( 'ns-font-awesome', get_stylesheet_directory_uri() . '/fonts/css/all.min.css' );
}
 
add_action( 'wp_enqueue_scripts', 'ns_add_font_awesome' );

Exhibiting Icon Fonts Manually

As soon as the fonts are provide, you handiest want to work out how you can show symbols in your web page. For that, you want to visit the Font Awesome list of symbols. Click on on any icon you need to make use of. This provides you with its title and the essential piece of code to position it in your web page.

For the instance above, it looks as if this.

While you now take it and enter it someplace in your web page (for instance, the footer), you get this:

You’ll be able to additionally exchange the styling of the icon through including some CSS on your taste sheet.

.fa-twitter { 
	font-size: 38px; 
	colour: #222; 
}

.fa-twitter:hover{ 
	colour: #767676; 
}

To make issues more uncomplicated, it’s additionally imaginable to organization a number of icons inside of some other HTML component like so:

That manner, you’ll be able to exchange the styling of all icons immediately. For the above instance, that might glance a little bit one thing like this:

.social-icon-group i { 
	font-size: 38px; 
	colour: #222; 
}

.social-icon-group i:hover{ 
	colour: #767676; 
}

But even so that, you even have extra complicated styling alternatives like sizing, using fixed width, rotating, and more.

Then again, for essentially the most section, this is it. You are actually able to make use of icon fonts for your WordPress theme.

Including Icon Fonts by means of a WordPress Plugin

Naturally, WordPress additionally allows you to use icon fonts by means of plugin. That is the most efficient answer if need to use them for your posts and pages or give purchasers the chance to take action. There are a variety of WordPress plugins that lend a hand with that, equivalent to:

• Wow Icons
• WP SVG Icons
• Genericon’d
• Icon List

Then again, for this instructional, we will be able to use Better Font Awesome. It’s not handiest the preferred answer but in addition simple to make use of and up to the moment.

1. Set up the Plugin

Naturally, the very first thing you must do is set up the plugin in query. For that, move to Plugins > Upload New and kind its title into the quest bar. If you have discovered it within the record, click on on Set up Now. Turn on the plugin whilst you it’s performed downloading.

2. Configure Plugin Settings

As soon as activated, you to find the configuration settings for the plugin below Settings > Higher Font Superior.

The to be had choices are beautiful self explanatory and generally, you’ll be able to go away the whole lot as is. On the backside, you already to find directions on how you can upload symbols on your web page. Extra on that now.

3. Upload Icons to Your Web page

With the plugin put in, you’ll be able to upload icon fonts on your WordPress web page by means of at hand shortcodes equivalent to this one:

[icon name="twitter" class="fa-2x"]

Simply enter the code anywhere you need the icon to seem.

Along with that, theoretically, you’ll be able to additionally use the similar code as earlier than. Then again, in my check that didn’t paintings.

In both case, similar as earlier than, you want to grasp the title of the icon you need so as to add on your WordPress web page so as to take action.

Along with that, the plugin additionally provides a brand new possibility for including icons to the WordPress editor. Merely click on the button and seek for the emblem you need so as to add through title.

Any other click on then inserts it into the publish or web page with a shortcode like this:

[icon name="twitter" class="" unprefixed_class=""]

You’ll be able to use unprefixed_class="" so as to add your individual CSS magnificence so as to taste the icons. You’ll be able to additionally use magnificence="" however if that’s the case, the plugin will routinely upload fa- in entrance of your magnificence title, so take note of that.

Except that, be aware that Higher Font Superior hasn’t been up to date to supply the button possibility in Gutenberg but. Then again, the aforementioned shortcodes paintings within the new WordPress editor as neatly.

Icon Fonts and Accessibility

One downside about icon fonts is that they aren’t the most efficient for accessibility. Except urged to forget about them, display readers would possibly learn out the unicode or title of icon characters. Since that is complicated to visually impaired guests, it’s a good suggestion to deal with this factor.

One answer is so as to add the aria-hidden="true" parameter on your icon fonts like so:

This may inform display readers to discard the component. There are different ways to deal with the accessibility problems with icon fonts, which you’ll be able to to find in this article.

Icon Fonts and WordPress in a Nutshell

Icon fonts be offering a perfect choice to symbol information for including icons, symbols and pictograms on your web page. They’re freely to be had, be offering vast quite a lot of choices, are simple to taste and no more useful resource in depth than vintage photographs. Plus, you’ll be able to use them like another font with the entire advantages that include that.

Above, you haven’t handiest realized what icon fonts are and why it’s a good suggestion to make use of them but in addition how you can upload this sort of font to WordPress. You’ll be able to can accomplish that manually both through loading them from an exterior supply or through internet hosting the fonts by yourself server. However, there are plugin answers to do the similar. Whichever possibility you opt for, we are hoping you benefit from this superior useful resource.

Do you employ icon fonts in WordPress? What’s your favourite manner of including them on your web page? Tell us within the feedback segment under!

The publish Icon Fonts in WordPress – What They Are and How to Use Them (Manually/Plugin) gave the impression first on Torque.

WordPress Agency

[ continue ]