How To Add Icon To Secondary Menu Storefront Font Awesome

Back in the early days, icons were readily available, merely implementing them efficiently in WordPress was a fleck more hard. You could become around some issues with sprites, but they were not e'er a good manner forward, and as retina screens started coming out, the trouble was magnified (quite literally).

Ane of the most common solutions to this problem is to use an icon font. Icons are web fonts or vectors, so you can scale them infinitely and a lot of icons can fit within a single file, bringing down your request count considerably. This allows you to employ almost any icon you can possibly dream up. Notwithstanding, with this, also comes some performance considerations.

We'll show you in this article a couple different ways to use WordPress icon fonts, where to become them, and which method might be the best for your site.

Where to Find Icon Fonts
Quick and Like shooting fish in a barrel Ways to Use Icon Fonts
Performance Issue to Consider with Icon Fonts
Host Icon Fonts Locally (Only the Ones You Need)
Icon Fonts Accessibility Concerns

Where to Detect Icon Fonts

There are a lot of slap-up places to now discover icon fonts for your WordPress site. Just type "icon font" into Google will yield you lot some great results. One of the nearly pop and widely used ones is Font Crawly. As of writing this, it has 1,400+ free icons, too as iv,500+ icons in their pro version. It includes icons for just about everything, from interface, to social, arrows, and many other types of icons.

Here are a few other ones to check out:

IcoMoon is another popular service with v,500+ free vector icons and 4,000+ premium icons. In fact, nosotros'll be using their icon font generator tool further below.
Fontello is another swell service that helps you discover and built icon fonts.
If you're looking for a super lightweight icon set, make sure to bank check out Bytesize. All 84 icons measure in at 9KB minified (2 KB in SVGZ, or Gzipped).
If you lot're wanting to but apply SVG icons manually, you won't find a better free library than iconmonstr or a amend premium library than Iconfinder.

Quick and Easy Ways to Use WordPress Font Icons

First we'll dive into some of the quick and easy means to employ WordPress font icons. Off-white warning, not all of these are the all-time in terms of operation. For that, we recommend skipping downward to the section on the best method.

Option 1 – Use a WordPress Plugin

The quickest style to get upward and running with WordPress font icons is to merely utilize a third-party plugin. The free Font Crawly Integration plugin contains the latest Font Awesome 5 icon library. After you install and activate it, all it takes is a simple shortcode code to insert an icon. They even have a WordPress icon now! Pretty cool.

You can check out Font Awesome five's basic use nautical chart for additional ways to use and customize it, every bit well as their icon library. For example, below we inserted the WordPress Font Crawly icon in a Gutenberg shortcode block and added fa-3x to make it three times bigger.

          [fawesome iclass="fab fa-wordpress fa-3x"]

Font Awesome shortcode in Gutenberg — Font Crawly shortcode in Gutenberg

Here is what it looks like on the front-cease. Pretty easy right? Nosotros had a Font Awesome icon up and running on our site within just a few minutes.

Font Awesome example in WordPress 5.0 — Font Crawly instance in WordPress 5.0

If you desire a lot of easy to use shortcodes, you might want to besides bank check out the Shortcodes Ultimate plugin. They have a premium icons add together-on you lot can use.

The to a higher place is a nifty solution if you desire to let your clients add together icons to posts or pages, just if you want to employ these elements inside your theme or plugin it's best to enqueue them yourself (will dive into this further beneath).

Pick 2 – Utilise the Built-in Dashicons

Dashicons is a set of font icons included by default since WordPress uses information technology on the backend. You'll demand to enqueue information technology on the front end-stop, but all you lot demand is the proper name of the script, the file is already available to WordPress.

Y'all can add the post-obit to your functions.php file, or nosotros recommend using a costless plugin like Code Snippets. This minimizes the run a risk of breaking your theme and the changes will as well be persistent throughout theme updates.

          part my_theme_styles() { wp_enqueue_style( 'dashicons' ); }

You lot tin can then go to the Dashicons website, select an icon and click the "copy HTML" link which will requite you the code you need to display the icon. They don't take a huge selection, but they withal work swell and are very lightweight.

          <span class="dashicons dashicons-admin-post"></span>

For case, below nosotros inserted the dashboard icon in a Gutenberg HTML block.

Here is what it looks similar on the forepart-end.

Example of Dashicons in WordPress 5.0 — Case of Dashicons in WordPress 5.0

Dashicons doesn't have any cool shortcodes with it out of the box, but you lot can customize the size of your icons with CSS. Here is an example of inserting an icon right before a header.

          <h2 class="dashicons-before dashicons-smiley">My Absurd Headline</h2>

Pick 3 – Manually Link to Externally Hosted Icon Fonts

Your third choice is to manually link to externally hosted icon fonts. This is essentially what the plugin in option 1 above is doing backside the scenes.

For Font Awesome, you can grab the code from their Outset page and so follow the steps below. They host all of their fonts on a CDN for gratuitous for you. Information technology will look something like this:

          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">

Footstep 1

Re-create the code into the <head> of each template or page on your WordPress site where you want to use Font Crawly. You can edit your theme's header.php file or better nonetheless, follow our elementary tutorial on how to add code to your header.

Stride 2

You can so start placing icons in your HTML'southward <body>. Discover the right icon and acquire how to add it onto your page.

Performance Issue to Consider with Using Icon Fonts

While there is zippo wrong with using one of the above ways to add together icon fonts to your site, they aren't technically the best way. Why? Information technology all comes downwardly to functioning issues.

Yous Probably Don't Demand All Those Icons

First off, when you lot use a plugin for icon fonts or link to an external icon font library, it's going to load all of the icons in its entire library. If you're just using xx or then icons throughout your entire site, this can be handled in a much meliorate way.

Exercise you actually need all those icons? Probably not. 😉 And then don't load all of them on your WordPress site. Click to Tweet

For example, nosotros included the Font Crawly 5 library on our site and while the CSS file for information technology is pocket-sized, the font file itself is 108 KB. While this might not seem that big, you'll see further below how small the file really gets when nosotros choose only the HTML fonts nosotros actually are using.

Loading From One CDN is Usually Faster

2d, there is nothing wrong with loading scripts from unlike CDNs. However, if you have the option to load it from one CDN, this is usually faster. Why? Because it tin can take advantage of a single HTTP/2 connexion and reduces additional DNS lookups. Just make sure your main CDN is a skilful one!

Host Icon Fonts Locally (Only the Ones You lot Need)

Considering of the operation reasons mentioned in a higher place, we are going to walk you through how to host your icon fonts locally, as well equally but using the ones you lot demand. By locally we hateful either loading them from your WordPress host's server or your own CDN.

By choosing merely the icon fonts you need, this can bring down the file size from 100 KB to a couple of kilobytes, pretty handy! Even better: you tin can even mix and match icons from various font sets.

The Basics – How it Works

Using a font icon involves hosting the font file (WOFF, WOFF 2, etc.) on your spider web server, then using CSS to load the font face, then creating some markup to add the icons in the correct place.

While your site will load a unmarried file, you'll really stop up having a number of file formats for each font since some browsers utilize different formats. Font Awesome has 6 dissimilar file formats included: EOT, SVG, TTF, WOFF, WOFF 2 and OTF. However, based on browser support you really only need WOFF or WOFF 2.

Tip: WOFF is supported by 93%+ of all modern browsers. However, WOFF ii is compressed more, just is only supported by 83%+ of all modern browsers. We recommend choosing one or the other or both. The browser will determine based on your lawmaking which one to deliver upwardly to the client.

Your first task is to use a tool to cull merely the icons you want. You can and then add these files to your project directory somewhere, typically in a fonts directory.

Adjacent, you lot add the Font Awesome CSS file into your project and add it to your website using a regular old link chemical element.

Subscribe Now

          <link rel="stylesheet" href="css/font-awesome.min.css">

You could besides enqueue the CSS file or if information technology's small, just use it inline.

If you wait at the CSS file yous tin run into what's going on in the background. The font files are loaded, the basic element with the class of .fa is defined (along with some others), and finally, each named icon is defined (eg: .fa-book).

The but thing you demand to be mindful of is the path to your font files. Past default, they are loaded from ../fonts which will exist the fonts directory, 1 binder up from the electric current CSS file. You may demand to alter this to fit your ain directory structure.

At present that you have a amend idea of how it works, nosotros are going to add walk you through how to do information technology pace by step. In this example, nosotros are using a production ecommerce site.

Step i

First, you lot should determine which font icon library you desire to use. We shared a few nosotros similar at the beginning of this article. In this example, we're going to be using Font Awesome along with the IcoMoon font generator. If you want the WOFF 2 files from IcoMoon, you lot do take to pay a quondam fee of $9.00 to access their premium library.

You tin can download the Font Awesome icons y'all desire manually for costless, but you would demand to utilize a tool like FontForge to manually edit their WOFF or WOFF two file. We are all most easy, and then nosotros're using a generator.

Pace two

Caput over to the IcoMoon generator. Nosotros click "Add" on the Font Crawly library.

Step iii

Next, y'all'll want to pick the icons yous want to utilize on your WordPress site. If you are already using Font Awesome and are simply moving to locally hosted versions, go through and make a short listing and then choose them from the library.

In this example, we are picking out icons for perfmatters.io, a WordPress ecommerce site which runs Easy Digital Downloads.

Step four

Once you've picked out all your icons, choose "Generate Font" at the bottom. For this site, nosotros ended upwards needing 20 icons.

Yous volition end up with files that expect like this. The of import ones yous'll need is the style.css file and the font files (WOFF, WOFF 2).

Stride 5

Next, it's recommended you perform a observe and replace in the style.css before yous upload/copy it to your site. Here is what the original one looks like.

For those of yous already using Font Awesome, this simply makes it easier to change the classes over to Font Awesome ones, this way if in that location was something already coded on your WordPress site with information technology, information technology will automatically offset using the icons.

And so do a Find for "icon" and replace all of the occurrences with "fa". Yous should be able to do a quick detect and replace with a text editor similar Sublime.

This replaces [class^="icon-"], [class*=" icon-"] with[form^="fa-"], [class*=" fa-"]. It as well fixes each icon, so instead of starting with .icon-, they now kickoff with .fa-.

You might also demand to change the source URL based on where you upload your font files downwardly in Step 7. Nosotros recommend irresolute the URL to your CDN.

Stride 6

Next, you need to add the CSS to your site. There are a couple ways y'all can do this.

Option 1

Since the amount of CSS is very pocket-sized, you lot could copy all of the file's CSS and paste it into the WordPress Customizer. Never do this for big files, only this is a relatively small amount of CSS. This ways it will load inline on your site.

Selection two

You could link to your stylesheet manually by placing it in the header of your WordPress site. Tip: Link to it on your ain CDN for faster performance.

          <link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/manner.css">

Option 3

You lot could also enqueue the CSS file in WordPress. The process is very like to the manual manner. Add together the post-obit to your theme's functions.php file, or use the free Code Snippets plugin. You might need to change the directory based on where you upload it.

          function my_theme_styles() { wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' ); }  add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

Step 7

Now that you lot have the CSS added to your site, it's time to upload the font files. You can put the fonts anywhere, a folder called "fonts" in your /public direct is fine. Remember though, the source folder in your way.css file needs to friction match.

Icon font files SFTP

Step 8

Now your WordPress site should have both your CSS and font files attainable. So next, you can add some markup to your site. This is just an instance of calculation a cog icon.

          <i class="fa fa-cog"></i>

You can come across a live example of this working over at perfmatters.io. Keep in mind that you can use any element, not merely i. Yous can use regular span elements as well, in add-on to adding CSS to your custom classes.

The real difference is when you have a look at the size divergence. Recollect, when we linked to the Font Awesome external library, the total size of the font file was 108 KB. Afterwards we used a font generator and chose only the Font Awesome icons we needed for the site, it brought the font file down to ii.6 KB.Our font file decreased in size by a whopping 97.59%!

Size of WOFF 2 Font Awesome file — Size of WOFF two Font Crawly file

Not only that but it now also loads from our CDN, which ways there areno extra DNS lookups to fontawesome.com.

We decreased the size of our icon fonts file past a whopping 97.59% using a font generator. 🚀 Click to Tweet

Y'all can too employ this aforementioned arroyo with SVG icons, it's just slightly different.

Icon Fonts Accessibility Concerns

1 downside of icon fonts is their horrible accessibility. Screen readers may skip them, or worse yet, read the unicode or the grapheme itself. This would outcome in visually dumb people hearing "yellowish star favourites" when looking at your favourites menu item – not ideal. You should likewise take into business relationship what happens if the fonts don't load.

Ideally, y'all would want decorative icons to merely disappear when non loaded and disquisitional icons to be replaced with text if there is an issue.

The accessibility outcome is fairly piece of cake to accept care of, simply use the aria-subconscious="truthful" parameter and value to indicate to screen readers that they should discard our element.

          <bridge class="icon icon-star" aria-hidden="true"></span> My Favourites

In a more complete implementation, yous can as well use Modernizr to test for font face support. You'll need to change the CSS slightly, see the first-class Impenetrable Font Icons article for more in-depth information.

For information nigh creating critical icons with text fallback, nosotros would also recommend reading the article higher up, they have explained and solved the issue as best as possible, simply implementing it is a bit out of the telescopic of this article.

Summary

That'southward all there is to icon fonts. Now you lot know a couple of different ways to easily get icon fonts on your WordPress site, forth the all-time fashion to implement them when it comes to performance.

Nosotros always recommend using a font generator to build an icon font that consists of only those icons y'all use. This will brand your theme considerably more streamlined! If you lot take a favorite library or generator that we didn't mention, please allow us know. There are a off-white number of adept ones out there! Too, make sure to read our in-depth guide on WordPress fonts.

Save time, costs and maximize site functioning with:

Instant help from WordPress hosting experts, 24/7.
Cloudflare Enterprise integration.
Global audition reach with 34 data centers worldwide.
Optimization with our born Awarding Operation Monitoring.

All of that and much more, in one plan with no long-term contracts, assisted migrations, and a xxx-day-coin-back-guarantee. Check out our plans or talk to sales to detect the plan that'south right for you.