Image About How To Easily Add Icon Fonts In Your Wordpress Theme

Icons were easy to get by initially, but putting them together in WordPress was a bit more tricky. Sprites could help with some issues, but they weren’t always the best solution. As retina screens became more common, the problem became worse (quite literally).

Using an icon font is among the most common solutions to this problem. Because icons are web fonts or vectors, you may resize them indefinitely and pack a lot of them into a single file, lowering your request count significantly. This enables you to use practically any icon you can think of. However, some performance concerns come with this.

We’ll show you how and when to add icon fonts to the WordPress website step by step in this article.

Icon Fonts: What Are They and Why Should You Use Them?

Instead of letters and numbers, WordPress icon fonts use symbols or pictograms. These pictograms are simple to incorporate into the page content and may be scaled with CSS. In addition, font icons are faster than image-based icons, which assists with the overall speed of your WordPress website.

Wordpress Icons

Icon fonts help display frequently used icons. For example, they can be used in your shopping basket, downloading buttons, feature boxes, prize contests, and even WordPress menu options.

Hundreds of gorgeous icons are available in numerous free and open-source icon fonts.

Other prominent icon fonts include:

  • Genericons
  • Linear icons
  • The Noun Project
  • Font Awesome
  • IcoMoon
  • Material Icons by Google

Where Can You Get Icon Fonts?

You may now find icon fonts for your WordPress site in a variety of sources. Simply typing “icon font” into Google will bring up a plethora of options. Font Awesome is one of the most popular and frequently used. As of this writing, it contains over 1,400 free icons and over 4,500 in their pro version. It has icons for almost anything, including interfaces, social media, arrows, and many other types of heroes.

Here are a few more worth looking into:

  • Another famous service is IcoMoon, which offers 5,500+ free vector icons and 4,000+ paid icons.
  • Fontello is another excellent service for finding and creating icon fonts.
  • Make sure to check out Bytesize if you’re looking for a lightweight icon collection. The total size of all 84 icons is 9KB when compressed (2 KB in SVGZ or Gzipped).
  • Suppose you want to use SVG icons manually. In that case, you won’t pick a more admirable free library than icon monster or a more significant premium library than Iconfinder.

1. Using Plugins to Add Icon Fonts to WordPress

This method is appropriate for you if you are a primary-level user who wants to add some symbols to your posts and pages. You wouldn’t need to change any theme files, and you’d be free to use icon fonts throughout your site.

The first step is to install and enable the Font Awesome WordPress plugin. For more details, see a guide to activating a WordPress plugin.

When you activate the plugin, it adds support for Font Awesome to your theme. In addition, you can now use icon shortcode in either WordPress post or page, as shown here:

Adding Icon Fonts In Wordpress

This shortcode could be used with additional text or a special shortcode block. After you’ve added the icon, you can evaluate your wordpress icons site to see how it will appear on a current website.

Image Showing Wordpress Icons Site

You could also use the font icon shortcode on the inside of a sentence block to raise the icon size using the block parameters.

Icon Shortcode

Because the shortcode does not transition to an icon font within the block editor, this may appear unusual when you enlarge the text size in the text editor and see how the exact icon size would appear. Click the link button on your page or post.

2. Integrating Icon Fonts with a Page Builder in WordPress

Icon font support is built-in to the majority of popular WordPress theme plugins. This enables you to employ icon fonts in your banner ads and other website places with ease.

Beaver Builder

The most excellent WordPress page builder plugin on the marketplace is Beaver Builder. It makes it simple to build custom templates in WordPress without having to write any code.

Beaver Builder includes several attractive icons and ready-to-use components that you can drag and drop into your posts and pages.

Several Attractive Icons

You can make icon shortcode groups, add a solitary icon, and arrange them in columns and rows as you see fit. You may also change the colors, background, width, and margins without having to write CSS.

Icon Group

With Beaver Builder’s Themer offering, you may even develop unique WordPress themes without writing code.

Elementor pro

Another famous Web page builder plugin is Elementor. It also includes numerous elements, such as an Icon block element, enabling you to employ icon fonts.

Using Elementor Pro Icon

To make attractive pages, drag and drop an icon everywhere and combine it with rows, sections, and tables.

3. Using Code to Manually Add Icon Fonts in WordPress

Icon fonts, as previously said, are simply fonts that may be applied to your site just like any other custom font. Font Awesome and other icon fonts are accessible from CDN servers all over the internet. Additionally, they may be linked to your WordPress theme.

Alternatively, you may save the complete font directory to a subdirectory in your WordPress theme and use the fonts from there in your CSS. We’ll show you how to apply Font Awesome and use both techniques because this article utilizes them.

Method 1:

This is a simple manual procedure. To acquire the embed code, go to the Font Awesome website and enter your email address.

Now look for an email from Font Awesome containing your embed code in your inbox. Copy/paste this embedding code directly before the /head> tag in your WordPress theme’s header.php file.

Embed Code In Font Awesome

Your embedded code will consist of a single line that will directly download the Font Awesome library from their CDN servers.

This technique is the most straightforward. However, it may conflict with other plugins. A better solution would be to use the built-in en queueing function in WordPress to load JavaScript correctly.

You can execute the new code to your theme’s functions.php file or a site-specific plugin rather than connecting to the stylesheet from the header page.

<script src="https://use.fontawesome.com/123456abc.js"></script>

This technique is the most straightforward. However, it may conflict with other plugins. A better solution would be to use the built-in en queueing function in WordPress to load JavaScript correctly.

You can execute the new code to your theme’s functions.php file or a site-specific plugin rather than connecting to the stylesheet from the header page.

Method 2:

The second technique is the most difficult, but it allows you to host Font Awesome icon fonts on your website. To get the font bundle, go to the Font Awesome website and download it to your PC.

Hosting Font Awesome Yourself

Try downloading and unzipping the icon fonts bundle. Now you’ll need to use FTP software to connect to your WordPress server and navigate to your WordPress theme’s directory.

Make a new folder called fonts in that location. The contents of the symbol fonts folder must then be uploaded to the fonts directory on your web hosting server.

Fonts Directory

You’re all set to add icon fonts to your WordPress theme now.

Paste this code into the functions.php file of your theme or a site-specific plugin.

Font Awesome has been successfully installed in your WordPress theme.

Icon Fonts Have a Performance Issue to Consider

Although there is nothing incorrect with using one of the methods listed above to introduce icon fonts to your website, they aren’t the most efficient. Why? It all boils down to a lack of performance.

To begin with, if you’re using an icon font extension or link to an external icon font library, it will load all of the icons in that library. If you use 20 or so images on your entire website, this can be managed much more efficiently.

Icon Fonts Can Be Hosted Locally

We’ll show you how to local icon fonts and use the ones you require for the efficiency discussed above. Of course, we mean both downloading them from your WordPress host’s servers or your CDN when we say “locally.”

By selecting only the icon fonts you require, you can reduce the file size from 100 KB to a few kilobytes, which is quite helpful! Even better, you can customize icons from different font families.

The Fundamentals – How It Works

Using a typeface icon entails hosting the font file (WOFF, WOFF 2, etc.) on your web server, loading the font face with CSS, and then adding markup to arrange the icons where they belong.

Even though your site will download a single file, you’ll end up with multiple file formats for each typeface because different browsers use different forms. For example, EOT, SVG, TTF, WOFF, WOFF 2, and OTF are among the file types supported by Font Awesome. Therefore, you need WOFF or WOFF 2 if your browser supports it.

WOFF is enabled by more than 93% of modern browsers. WOFF 2 is more compressed, although only 83 percent or more of modern browsers are allowed. We suggest that you choose one or the other, or both. Depending on your code, the browsers will decide which one to send to the client.

Your first duty is to select only the icons you desire using a tool. You can then place these files wherever in your project directory, usually in a fonts directory. Then, using a regular old link component, you add the Font Awesome CSS file to your application and add it to your webpage.

You could see what was going on in the background if you look at the CSS file. First, the font files are downloaded, the essential element (along with a few others) is defined, and ultimately, each specified icon is defined.

The address to your font files is the only thing you need to be aware of. They are loaded by default from../fonts, the fonts directory, one folder above the current CSS file. This may need to be tweaked to fit your specific directory layout.

When you better understand how it works, we’ll show you how to accomplish it step by step.

We’re going to use a live ecommerce site for this example.

Step 1

To begin, you must choose which font icon collection you want to utilize. We mentioned a few favorites at the start of this piece. We’ll use Font Awesome in conjunction with the IcoMoon font engine in this instance. You must pay a one-time cost of $9.00 to access IcoMoon’s premium collection if you want the WOFF 2 files.

You can directly acquire the Font Awesome symbols you want for free. Still, you’ll need to physically modify their WOFF or WOFF 2 file with a tool like FontForge. We’re all about simplicity, so we’re going to use a generator.

Step 2

Go to the IcoMoon generator to get started. Then, in the Font Awesome library, we click “Add.”

Image Showing Icomoon Generator

Step 3

The next step is to decide the icons you wish to utilize on your WordPress site. For example, if you’re currently using Font Awesome and want to switch to locally hosted versions, prepare a shortlist and then pick them from the library.

Image Showing Font Awesome

Step 4

After you’ve selected all of your icons, scroll down to the bottom and click “Generate Font.”

Generate Font

You’ll end up with something similar to this. The style is one of the most significant things you’ll require. Font files and a CSS file (WOFF, WOFF 2).

Image Showing Woff, Woff 2

Step 5

Before uploading/copying style.css to your site, it’s suggested that you do a search and replace it. This is how the original one appears.

For those of you who already use Font Awesome, this makes it much easier to update the classes to Font Awesome ones so that anything already built with it on your WordPress website will start using icons immediately.

Uploading/Copying Style.css

To conduct a Find and change all instances of “icon” with “fa.” With a text editor like Sublime, you must be able to execute a rapid locate and replace.

Step 6

After that, you must incorporate the CSS into your website. You can achieve this in a couple of ways.

Option No. 1

You may copy all CSS from the file and paste it into the WordPress Customizer because CSS is very little. This should never be done with large files. However, this is a fair bit of CSS. This indicates that it will be inline on your website.

Option No. 2

You might directly link to your style in the header of your WordPress site. However, for better speed, link to it from your own CDN.

Option No. 3

You might also use WordPress to enqueue the CSS file. The procedure is relatively similar to the one used by hand. Use the free Code Snippets plugins or add the following to your theme’s functions.php file. Depending on where you post it, you may need to modify the directory.

Step 7

It’s necessary to submit the font files now that you’ve applied the CSS to your site. The fonts can be placed anywhere; a folder named “fonts” in your /public directory is sufficient. However, keep in mind the source folder in your style. The CSS file must be identical.

Image Showing Icomoon.woff , Icomoon.woff2

Step 8

Both your CSS and font files should now be available on your WordPress site. After that, you may start adding markup to your site. This is just a simple example of how to use a cog icon block.

Dashboard

Hope you found this article helpful in adding beautiful icon fonts to your WordPress site. By applying all these tools and ideas, you can add icon fonts to your WordPress theme quickly.

Load More Related Articles
Load More By Susana Taylor
Load More In Wordpress

Leave a Reply

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