How to add icon fonts in WordPress theme

Looking for a way to add an icon font to your WordPress theme? Using the icon font you can add vector icons to your website. Sometimes using vector icons can slow down your website but if you are using icon fonts then you don’t need to worry about the speed of your website. Icon fonts are loaded on your website as web fonts that can be easily styled using CSS.

Here in this article, we will guide you to the easiest way to add icon fonts to your WordPress theme.

What are icon fonts

Icon fonts are a type of font that contains symbols and glyphs. Icon fonts do not use any numbers or letters. It has become very popular as it can be easily styled using CSS. You can style the icon fonts as normal text. Icon fonts are much faster than an image-based icon that doesn’t slow down your website. So the icon fonts will help you in your overall website speed.

You can use icon fonts in your website to display common icons like the shopping cart, download button, edit, navigation menu, and others. You will find a huge number of open-source icon fonts that you can use on your website totally free. Some of the popular icon fonts are –

• Font Awesome
• IconMoon
• Materialicons

Add icon fonts in WordPress theme

There are different ways you can add icon fonts to your WordPress theme. Here in this tutorial, we are adding the Font Awesome icons to our WordPress theme.

Adding Font Awesome icons using a plugin

Using a plugin is the easiest and quickest way for beginners to add icon fonts to their website. If you are using a plugin then you don’t need to customize your theme file. Without modifying your theme file you can use the icons anywhere on your website.

To add the Font Awesome you need to install and activate the Font Awesome WordPress plugin. After activating the plugin it will automatically enable Font Awesome support for your theme. Now you need to use shortcode to add the icon in your website posts and pages. The icon shortcode should look like this–

[icon name="stroopwafel"]

Using the shortcode block, you can use this shortcode anywhere on your website. After adding the shortcode you can see the preview, how the icon looks on your website.

If you are using the classic editor then you can use the Font Awesome button to add the icon you want. Click on the Add Font Awesome button and it will open the icon library.

Now from the icon library click any of the icons you want to add.

It will add the shortcode of that icon on your classic editor.

Now you can preview the post to see the icon in action.

Add icon fonts using Elementor page builder

Elementor is one of the popular page builders with advanced features and functionalities. Elementor offers different widgets to create your website without coding including the icon widget. Using the icon widget you can add icons anywhere on your website. Use the drag and drop features to add icons to your web pages to make them more beautiful.

Add icon font in WordPress manually

You can add icon fonts to your WordPress manually. Font Awesome can be available on the CDN server and you can link it directly to your WordPress theme. You can also upload the font in your WordPress theme directory to use it anywhere on your website.

For this, you need to get the embed code from Font Awesome. Go to the Font Awesome website and enter your email address to get the embed code.

It will email you the embed code and you need to add the code in your theme’s header.php file. This embed code will display the Font Awesome library from their CDN server directly. The embed code should look like this-

What new features are coming in WordPress 5.9?

Free Google tools every blogger should use