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.
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 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.
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.
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:
You can utilize this shortcode in addition to other text or by itself in a devoted shortcode block
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.
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.
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.
You can likewise use the icon shortcode inside columns and develop feature boxes like this:
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 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.
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.
You can even produce completely custom-made WordPress themes without composing any code using Beaver Contractor’s Themer item.
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.
You can simply drag and drop an icon anywhere and use it with rows, columns, and tables to create gorgeous pages.
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.
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.
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
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.
function wpb_load_fa() use.fontawesome.com add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );.
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.
Merely download the icon font styles and unzip the bundle.
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.
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.
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
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