How one can Simply Add Icon Fonts in Your WordPress Theme

Do you need to add icon fonts to your WordPress website?

Icon fonts can help you add resizable vector icons which are loaded like net fonts, so that they don’t decelerate your web site. You’ll be able to even fashion them utilizing CSS to get precisely the look you need.

On this article, we’ll present you the right way to simply add icon fonts in your WordPress theme.

What are Icon Fonts and Why You Ought to Use Them?

Icon fonts comprise symbols or small photos as an alternative of letters and numbers.

You should utilize these icon fonts to indicate frequent photographs. For instance, you should utilize them together with your procuring cart, obtain buttons, characteristic packing containers, giveaway contests, and even in WordPress navigation menus.

Most guests will instantly perceive what a commonly-used icon means. On this method, you may assist guests discover their method round your web site and interact together with your content material.

These photos also can enable you to create a multilingual WordPress web site, since most individuals can perceive icon fonts it doesn’t matter what language they communicate.

In comparison with image-based icons, font icons load rather more shortly to allow them to enhance WordPress velocity and efficiency.

There are a number of open-source icon font units that you should utilize free of charge resembling IcoMoon, Genericons, and Linearicons.

In truth, the WordPress software program comes with free dashicon icons built-in. These are the icons you may see within the WordPress admin space.

On this information, we’ll be utilizing Font Superior as it’s the most well-liked open-source icon set. We apply it to WPBeginner, and in all our premium WordPress plugins.

With that stated, let’s take a look at how one can simply add icon fonts in your WordPress theme. Merely use the short hyperlinks to leap straight to the tactic that you just need to use.

Methodology 1. Including Icon Fonts Utilizing a WordPress Plugin (Straightforward)

The simplest method so as to add icon fonts to WordPress is through the use of the Font Superior plugin. This lets you use icon fonts in your pages and posts with out modifying your theme recordsdata. You’ll additionally get any new Font Superior icons robotically each time you replace the plugin.

The very first thing it is advisable to do is set up and activate the Font Superior plugin. For extra particulars, see our step-by-step information on the right way to set up a WordPress plugin.

Upon activation, you may add a Font Superior icon to any shortcode block. Merely open the web page or publish the place you need to present the icon font, after which click on on the ‘+’ icon.

Now you can seek for ‘Shortcode’ and choose the appropriate block when it seems.

With that completed, you may add any Font Superior icon utilizing the next shortcode:

Merely substitute “rocket” with the title of the icon that you just need to present. To get this title, head over to the Font Superior website and click on on the icon that you just need to use.

Within the popup that seems, go forward and click on on the icon’s title.

Font Superior will now copy the title to your clipboard robotically.

With that completed, merely paste the title into the shortcode. Now you can click on on ‘Publish’ or ‘Replace’ to make the icon font dwell.

Typically it’s possible you’ll need to present an icon font inside a block of textual content. For instance, it’s possible you’ll have to show a ‘copyright’ image after a model title.

To do that, merely paste the shortcode inside any Paragraph block.

You’ll be able to then use the settings within the right-hand menu to customise the icon, just like the way you customise choices for textual content blocks. For instance, you may change the font measurement.

WordPress will flip the shortcode right into a Font Superior icon for guests and present it alongside your textual content.

Another choice is so as to add the shortcode to any widget-ready space.

For instance, you may add a Shortcode block to your website’s sidebar or related part.

For extra info, please see our information on the right way to use shortcodes in your WordPress sidebar widgets.

You’ll be able to even add the icon shortcode to columns and create lovely characteristic packing containers.

For detailed directions, see our information on the right way to add characteristic packing containers with icons in WordPress.

Many web sites use icon fonts of their menus, to assist guests discover their method round. So as to add an icon, both create a brand new menu or open an current menu within the WordPress dashboard.

For step-by-step directions, take a look at our newbie’s information on the right way to add a navigation menu in WordPress.

Then, click on on ‘Display Choices’ and verify the field subsequent to ‘CSS Courses.’

With that completed, merely click on to broaden the menu merchandise the place you need to present the icon.

You need to now see a brand new ‘CSS Courses’ area.

To get an icon’s CSS class, merely discover the icon font on the Font Superior web site and provides it a click on. In order for you, then you may change the icon’s fashion by clicking on the completely different settings.

Within the popup, you’ll see an HTML code snippet. The CSS class is solely the textual content between the citation marks. For instance, within the following picture, the CSS class is fa-solid fa-address-book.

Merely copy the textual content contained in the quotes, then swap again to the WordPress dashboard.

Now you can paste the textual content into the ‘CSS Courses’ area.

So as to add extra icon fonts, merely observe the identical course of described above.

Whenever you’re pleased with how the menu is ready up, click on on ‘Save.’ Now when you go to your WordPress web site you’ll see the up to date navigation menu.

Methodology 2. Utilizing Icon Fonts with SeedProd (Extra Customizable)

In order for you extra freedom over the place you employ font icons, then we suggest utilizing a web page builder plugin.

SeedProd is the greatest drag-and-drop WordPress web page builder available in the market and has over 1400 Font Superior icons built-in. It additionally has a ready-made Icon field that you would be able to add to any web page utilizing drag and drop.

With SeedProd, it’s straightforward to create customized pages in WordPress after which present Font Superior icons anyplace on these pages.

The very first thing it is advisable to do is set up and activate the plugin. For extra particulars, see our newbie’s information on the right way to set up a WordPress plugin.

Observe: There’s a free model of SeedProd, however we’ll be utilizing the Professional model because it comes with the Icon field.

Upon activation, go to SeedProd » Settings and enter your license key.

You’ll find this info below your account on the SeedProd web site. After coming into the license key, go forward and click on the ‘Confirm Key’ button.

Subsequent, it is advisable to go to SeedProd » Pages and click on on the ‘Add New Touchdown Web page’ button.

Now, you may select a template to make use of as the premise to your web page. SeedProd has over 180 professionally-designed templates that you would be able to customise based on your WordPress weblog or web site’s wants.

To pick a template, hover your mouse over it after which click on the ‘Checkmark’ icon.

We’re utilizing the ‘Book Gross sales Web page’ template in all our photographs, however you should utilize any design you need.

Subsequent, go forward and sort in a reputation for the customized web page. SeedProd will robotically create a URL primarily based on the web page’s title, however you may change this URL to something you need.

Whenever you’re pleased with the knowledge you’ve entered, click on on the ‘Save and Begin Modifying the Web page’ button.

Subsequent, you’ll be taken to the SeedProd drag-and-drop web page builder, the place you may customise the template.

The SeedProd editor reveals a dwell preview of your design to the appropriate and a few block settings on the left.

The left-hand menu additionally has blocks that you would be able to drag onto your design.

You’ll be able to drag and drop commonplace blocks like buttons and pictures or use superior blocks such because the contact type, countdown, social share buttons, and extra.

To customise any block, merely click on to pick out it in your format.

The left-hand menu will now present all of the settings you should utilize to customise that block. For instance, you may typically change background colours, add background photographs, or change the colour scheme and fonts to raised match your model.

So as to add an icon font to the web page, merely discover the ‘Icon’ block within the left-hand column after which drag it onto your format.

SeedProd will present an ‘arrow’ icon by default.

To point out a special Font Superior icon as an alternative, merely click on to pick out the Icon block.

Within the left-hand menu, hover your mouse over the icon after which click on on the ‘Icon Library’ button when it seems.

You’ll now see all of the completely different Font Superior icons that you would be able to select from.

Merely discover the font icon that you just need to use and provides it a click on.

SeedProd will now add the icon to your format.

After selecting an icon, you may change its alignment, colour, and measurement utilizing the settings within the left-hand menu.

You’ll be able to proceed engaged on the web page by including extra blocks and customizing these blocks within the left-hand menu.

Whenever you’re pleased with how the web page appears, click on the ‘Save’ button. You’ll be able to then choose ‘Publish’ to make that web page dwell.

We hope this text helped you discover ways to add icon fonts in your WordPress theme. It’s also possible to undergo our information on the greatest popup plugins in contrast and how to decide on the most effective net design software program.

When you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.

The publish How one can Simply Add Icon Fonts in Your WordPress Theme first appeared on WPBeginner.