How to Quickly Add Icon Fonts in Your WordPress Style

Do you want to add icon fonts on your WordPress website? Just recently among our readers asked what’s the most convenient method to include icon typefaces in their WordPress theme?

Icon font styles allow you to include vector (resizable) icons without decreasing your website. They are packed like web typefaces and can be styled utilizing CSS.

In this article, we will reveal you how to easily include icon typefaces in your WordPress style, step by step.

Using icon fonts with any WordPress theme

What are Icon Fonts and Why You Should Utilize Them?

Icon fonts contain symbols or pictograms rather of letters and numbers. These pictograms can be quickly contributed to site material and resized utilizing CSS. Compared to image based icons, font icons are much quicker which assists with your overall WordPress website speed

Icon fonts preview

Icon font styles can be utilized to display commonly used icons. For example, you can utilize them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus

There are numerous free and open-source icon fonts offered that has hundreds of gorgeous icons.

In truth, each WordPress set up comes with the totally free dashicons icon font set. These icons are utilized in the WordPress admin menu and other locations inside WordPress admin location

Some other popular icon font styles are:

For the sake of this tutorial, we will be utilizing Font Awesome. It is the most popular complimentary and open-source icon font readily available. We use FontAwesome on WPBeginner site in addition to our WordPress plugins like OptinMonster, WPForms, RafflePress, etc.

In this guide, we’re going to cover 3 ways of including icon fonts in WordPress. You can choose the solution that works best for you.

Adding Icon Fonts in WordPress Using Plugins

If you are a newbie level user just trying to add some icons to your posts or pages, then this approach appropriates for you. You wouldn’t have to modify theme files, and you would be able to utilize icon font styles everywhere on your site.

Very first thing you need to do is install and trigger the Font Style Awesome plugin for WordPress. For more information, see our action by action guide on how to set up a WordPress plugin

Upon activation, the plugin enables Font Incredible support for your style. You can now edit any WordPress post or page and use icon shortcode like this:

[icon name=”rocket”]

You can utilize this shortcode in addition to other text or by itself in a devoted shortcode block

Adding icon font shortcode in WordPress

As soon as included, you can preview your post or page to see how the icon will search a live website. Here is how it searched our test website.

Icon preview

You can also include the font icon shortcode inside a paragraph block by itself where you can use the block settings to increase icon size.

Increase icon size

As you increase the text size, this may look odd inside the full-screen editor. That’s due to the fact that the shortcode does not immediately become an icon font style inside the block editor.

You will need to click the sneak peek button on your post or page to see how the actual icon size would look.

Icon font enlarged

.

You can likewise use the icon shortcode inside columns and develop feature boxes like this:

Using icon fonts in feature boxes

2. Using Icon Font Styles with a WordPress Page Home Builder

Most popular WordPress page builder plugins included built-in assistance for icon typefaces. This allows you to quickly utilize icon font styles in your landing pages in addition to other locations on your website.

Beaver Contractor

.

Beaver Home Builder is the very best WordPress page builder plugin on the market. It enables you to quickly produce customized page layouts in WordPress without writing any code.

Beaver Builder features lovely icons and prepared to use modules that you can simply drag and drop into your post and pages.

Beaver Builder icon modules

You can create icon groups, add a single icon, and move them into well-positioned rows and columns. You can likewise pick your own colors, background, spacing, and margin without writing CSS.

Edit icon fonts in Beaver Builder

.

You can even produce completely custom-made WordPress themes without composing any code using Beaver Contractor’s Themer item.

Elementor Pro

.

Elementor is another popular WordPress page contractor plugin. It likewise comes with numerous components that permit you to use icon font styles, consisting of an Icon aspect.

Elementor icon

You can simply drag and drop an icon anywhere and use it with rows, columns, and tables to create gorgeous pages.

Other popular page contractors like Divi and Visual Author also have full support for icon font styles.

3. Adding Icon Fonts in WordPress Manually with Code

As we discussed earlier that icon typefaces are just fonts and can be contributed to your site like you would include any custom-made font styles

Some icon typefaces like Font Awesome, are available from CDN servers throughout the web and can be connected from your WordPress theme directly.

You can also submit the entire font directory site to a folder in your WordPress style and after that utilize those fonts in your stylesheet.

Given that we are utilizing Font style Awesome for this tutorial, we will show you how you can add it utilizing both methods.

Technique 1:

This handbook method is rather easy.

First, you need to go to the Font Style Awesome site and enter your e-mail address to get the embed code.

Get Font Awesome embed code

Now inspect your inbox for an email from Font Remarkable with your embed code. Copy and paste this embed code in your WordPress style’s header.php file right before the tag.

Your embed code will be a single line that will bring the Typeface Awesome library straight from their CDN servers. It will look something like this:


This method is easiest, however it can trigger disputes with other plugins.

A better technique would be to appropriately load JavaScript in WordPress utilizing the built-in enqueueing system.

Instead of connecting to the stylesheet from your theme’s header design template, you can add the following code in your style’s functions.php file or in a site-specific plugin


function wpb_load_fa() use.fontawesome.com

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );.

Approach 2:

The 2nd method is not the easiest, however it would allow you to host the Typeface Amazing icon font styles on your own site.

Initially, you require to check out the Typeface Awesome website to download the font style bundle to your computer.

Download icon font to your computer

Merely download the icon font styles and unzip the bundle.

Now, you will require to connect to your WordPress hosting utilizing a FTP client and go to your WordPress theme’s directory.

You require to create a new folder there and name it fonts. Next, you require to submit the contents of the icon fonts folder to the font styles directory site on your webhosting server.

Uploading icon fonts to your WordPress theme

Now you are all set to pack icon typefaces into your WordPress theme. Simply include this code to your style’s functions.php file or in a site-specific plugin.


function wpb_load_fa() 

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri(). '

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );.

You have actually successfully packed Font Awesome into your WordPress style.

Now comes the part where you will be including actual icons into your WordPress style, posts, or pages.

Manually Showing Icon Fonts in WordPress

Go to the Font style Awesome’s site to see the complete list of icons available. Click any icon you desire to utilize, and you will have the ability to see the icon name.

Icon name


Copy the icon name and use it like this in WordPress.


You can style this icon in your theme’s stylesheet like this:

. fa-arrow-alt-circle-up 
font-size: 50 px;.
color: #FF6600;.

You can likewise integrate various icons together and design them simultaneously. For example, lets state you wish to show a list of relate to icons next to them. You can cover them under a

aspect with a particular class.


Now you can style them in your style’s stylesheet like this:

. icons-group-item i 
. icons-group-item i: hover 

We hope this article assisted you learn how to quickly include icon typefaces in your WordPress theme. You may also want to have a look at our tutorial on how to add image icons with navigation menus in WordPress

If you liked this short article, then please sign up for our YouTube Channel for WordPress video tutorials. You can likewise discover us on Twitter and Facebook

Comments are closed.