How to Easily Add Icon Fonts in Your WordPress Theme?:- If you want to add icon fonts in your WordPress website then you are at the right palace. Here in this post we will guide you how to add icon fonts in WordPress theme. Icon fonts allows you to add pioneer icons without decrease your website speed. They are loaded like net fonts and may be titled victimization CSS.
What are Icon Fonts and Why You Should Use Them?
Icon fonts contain symbols or pictograph instead of letters and numbers. These pictographs are often simply additional to website content and resized victimization CSS. Font icons are much faster with the comparison of image based icons. The Font Icons helps with your overall WordPress Website Speed.
Icon fonts can be used for represent commonly used icon. Like:- you can use them with your shopping cart, feature box and even in WordPress navigation menus.
There are several free open sources icon fonts available which has hundreds of beautiful icons. It is really fact that each WordPress install comes with free dash icons font set. These icons are used in the admin area of WordPress and other inside areas. There are some popular font icon here which is mostly used in WordPress.
You can add icon fonts in WordPress from many ways like:-
Add easily Icon Fonts in WordPress Using Plugins
If you are a beginner level user to add icon fonts in WordPress website pages or posts then this article is very helpful to you. You would not have to modify theme files, and you would be able to use icon font everywhere on your website.
You can follow some steps
First, you need to install WordPress. Now, install Font Awesome plugin for WordPress website.
Second, The Awesome Font plugin support for your WordPress theme. Now you can edit your page or post and use shortcode :
[icon name=”rocket”]
This shorcode you must be use along with other text or by itself a dedicated shortcode block.
Once you added it then preview your post or page to see how it will look on a live site.
You can add the font icon sortcode inside a paragraph where you can block the settings to increase icon size. You can also use the icon shortcode inside columns of website and create feature boxes.
Using Icon Fonts with a WordPress Page Builder
The most popular WordPress page builder plugins comes to support for icon fonts. This allows you to easily icon fonts to you landing pages as well as other page of your website.
Here you can use some page builder like:- beaver builder and element pro. Beaver builder is the best WordPress page builder which allows you to easily create custom page layouts in WordPress without any code. You can also select your own colors, backgrounds, spacing and margin without CSS. Beside the elementor is another popular page builder which have several elements that allows you to use icon fonts, including an icon element. Other popular page builder is Divi and Visual composer which have several different features.
Add Icon Fonts in WordPress Manually with Code
As well as we discussed that icon fonts are just fonts and can be added to your website like you would add any custom fonts. Some icons like font awesome are available for CDN server which can be linked from WordPress theme directly. You can also uploads the entire font to a folder in Your WordPress theme and use on your stylesheet.
Since we are using Awesome font for this article in which we will show you how you can add it using both methods.
Method 1: This manual method is very easy to add font.
Firstly you need to go Font Awesome website and enter your email address to get embed code. Now check your email from Front Awesome with your embed code. Copy and paste embed code in your WordPress theme’s header.php file before the </head> tag.
<script src=”https://use.fontawesome.com/123456abc.js”></script>
This method is very easy but it causes some conflicts with other plugins.
You can add the following code in your theme’s functions.php file or in a site specific plugin
function wpb_load_fa() {
wp_enqueue_script( ‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );
Method 2: The second method is not so easy, but it allows to host the front Awesome icon fonts on your own website.
First, you have to go on Font Awesome website to download the font package to your computer.
Simply download the icon fonts.
Now, you will need to connect to your WordPress hosting using a FTP and go to your WordPress theme’s directory. You need to create a new folder for theme and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directories on our web hosting server.
function wpb_load_fa() {
wp_enqueue_style( ‘wpb-fa’, get_stylesheet_directory_uri() . ‘/fonts/css/font-awesome.min.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );
Now, You have successfully loaded Font Awesome into your WordPress website theme. Now comes where you will be adding actual icons into your WordPress theme, post or pages.
Manually Displaying Icon Fonts in WordPress
You have to Go on Font Awesome’s website to see the full list of icons available. Click on any icon which you want to use in your WordPress website, and now you will be able to see the icon name.
Copy the icon name and paste it like this in WordPress.
<i class=”fa-arrow-alt-circle-up”></i>
You can set this icon in your theme’s style sheet like this:
.fa-arrow-alt-circle-up {
font-size: 50px;
color:#FF6600;
}
This allows you to combine different font and style at once. Now you can set your stylesheet of themes like this:-
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}