The right way to Simply Upload Icon Fonts in Your WordPress Theme

by | Feb 22, 2023 | Etcetera | 0 comments

Do you need in an effort to upload icon fonts in your WordPress internet web page?

Icon fonts permit you to add resizable vector icons that are loaded like web fonts, in order that they don’t slow down your internet web page. You’ll even style them the usage of CSS to get exactly the look you need.

In this article, we will be able to show you merely add icon fonts for your WordPress theme.

How to easily add icon fonts in your WordPress theme

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or small photos as a substitute of letters and numbers.

You’ll use the ones icon fonts to show no longer strange footage. For instance, you’ll use them in conjunction with your buying groceries cart, download buttons, serve as packing containers, giveaway contests, and even in WordPress navigation menus.

Font Awesome icon fonts

Most visitors will right away understand what a commonly-used icon manner. In this way, you’ll have the same opinion visitors to search out their way spherical your internet web page and engage in conjunction with your content material subject material.

The ones photos can also permit you to create a multilingual WordPress web site, since most people can understand icon fonts it doesn’t topic what language they speak about.

Compared to image-based icons, font icons load much more briefly so they are able to spice up WordPress pace and function.

There are a variety of open-source icon font gadgets that you simply’ll use for free of charge similar to IcoMoon, Genericons, and Linearicons.

Actually, the WordPress tool comes with free dashicon icons built-in. The ones are the icons you’ll see inside the WordPress admin area.

Font icons in the WordPress dashboard

In this data, we’ll be the usage of Font Superior because it’s the most popular open-source icon set. We use it on WPBeginner, and in all our most sensible fee WordPress plugins.

With that mentioned, let’s take a look at the way you’ll merely add icon fonts for your WordPress theme. Simply use the short links to jump without delay to the method that you need to use.

Manner 1. Together with Icon Fonts The usage of a WordPress Plugin (Easy)

One of the crucial best possible techniques in an effort to upload icon fonts to WordPress is thru the usage of the Font Superior plugin. This allows you to use icon fonts for your pages and posts without modifying your theme information. You’ll moreover get any new Font Awesome icons routinely each time you change the plugin.

The first thing you need to do is about up and switch at the Font Awesome plugin. For additonal details, see our step-by-step data on set up a WordPress plugin.

Upon activation, you’ll add a Font Awesome icon to any shortcode block. Simply open the internet web page or put up where you need to show the icon font, and then click on on on the ‘+’ icon.

See also  How you can Use the search engine optimization Writing Assistant in WordPress to Support search engine optimization

You’ll now search for ‘Shortcode’ and select the right kind block when it appears.

Adding a font icon to WordPress using shortcode

With that completed, you’ll add any Font Awesome icon the usage of the following shortcode:

[icon name="rocket"]

Simply trade “rocket” with the identify of the icon that you need to show. To get this identify, head over to the Font Awesome internet web page and click on on on the icon that you need to use.

Choosing an icon font for your WordPress website

Inside the popup that appears, transfer ahead and click on on on the icon’s identify.

Font Awesome will now replica the identify in your clipboard routinely.

Getting the name of a font icon

With that completed, simply paste the identify into the shortcode. You’ll now click on on on ‘Put up’ or ‘Exchange’ to make the icon font reside.

Every now and then it is advisable need to show an icon font inside a block of text. For instance, it is advisable need to display a ‘copyright’ picture after an emblem identify.

To take a look at this, simply paste the shortcode inside any Paragraph block.

Adding an icon font in WordPress using a shortcode

You’ll then use the settings inside the right-hand menu to customize the icon, similar to the way in which you customize alternatives for text blocks. For instance, you’ll exchange the font dimension.

WordPress will turn the shortcode appropriate right into a Font Awesome icon for visitors and show it alongside your text.

An example of an icon font in WordPress

An alternative choice is in an effort to upload the shortcode to any widget-ready area.

For instance, you’ll add a Shortcode block in your internet web page’s sidebar or identical section.

Adding an icon font to a widget-ready area in WordPress

For more information, please see our data on use shortcodes on your WordPress sidebar widgets.

You’ll even add the icon shortcode to columns and create shocking serve as packing containers.

An example of a features box on a WordPress website

For detailed instructions, see our data on upload function bins with icons in WordPress.

Many web websites use icon fonts in their menus, to have the same opinion visitors to search out their way spherical. To be able to upload an icon, each create a brand spanking new menu or open an provide menu inside the WordPress dashboard.

For step-by-step instructions, check out our novice’s data on upload a navigation menu in WordPress.

Then, click on on on ‘Show Alternatives’ and check out the sector next to ‘CSS Classes.’

Adding CSS classes to a WordPress navigation menu

With that completed, simply click on directly to enlarge the menu products where you need to show the icon.

You’ll have to now see a brand spanking new ‘CSS Classes’ field.

Adding an icon font using a CSS class

To get an icon’s CSS class, simply to search out the icon font on the Font Awesome internet web page and gives it a click on on. If you want to have, then you definately’ll trade the icon’s style thru clicking on the different settings.

See also  Get a Unfastened Farm to Desk Format Pack for Divi

Inside the popup, you’ll see an HTML code snippet. The CSS class is solely the text between the quotation marks. For instance, inside the following image, the CSS class is fa-solid fa-address-book.

Getting the code for an icon font

Simply replica the text inside the quotes, then switch once more to the WordPress dashboard.

You’ll now paste the text into the ‘CSS Classes’ field.

Adding icon fonts in WordPress using a CSS class

To be able to upload additional icon fonts, simply apply the equivalent process described above.

When you’re happy with how the menu is ready up, click on on on ‘Save.’ Now while you seek advice from your WordPress web site you’ll see the up-to-the-minute navigation menu.

An example of icon fonts in a WordPress navigation menu

Manner 2. The usage of Icon Fonts with SeedProd (Additional Customizable)

If you want to have additional freedom over where you utilize font icons, then we propose the usage of a internet web page builder plugin.

SeedProd is the highest drag-and-drop WordPress internet web page builder to be had available in the market and has over 1400 Font Awesome icons built-in. It moreover has a ready-made Icon box that you simply’ll add to any internet web page the usage of drag and drop.

With SeedProd, it’s easy to create customized pages in WordPress and then show Font Awesome icons any place at the ones pages.

The first thing you need to do is about up and switch at the plugin. For additonal details, see our novice’s data on  set up a WordPress plugin.

Realize: There’s a unfastened model of SeedProd, alternatively we’ll be the usage of the Skilled fashion as it comes with the Icon box.

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

Entering the SeedProd license key

You’ll to search out this information beneath your account on the SeedProd internet web page. After getting into the license key, transfer ahead and click on at the ‘Read about Key’ button.

Next, you need to talk about with SeedProd » Pages and click on on on the ‘Add New Landing Internet web page’ button.

Choosing a custom design for your WordPress page

Now, you’ll make a choice a template to use as the root for your internet web page. SeedProd has over 180 professionally-designed templates that you simply’ll customize in step with your WordPress weblog or internet web page’s needs.

To select a template, hover your mouse over it and then click on at the ‘Checkmark’ icon.

Choosing a professionally-designed template

We’re the usage of the ‘E e book Product sales Internet web page’ template in all our footage, alternatively you’ll use any design you need.

Next, transfer ahead and type in a name for the custom designed internet web page. SeedProd will routinely create a URL in step with the internet web page’s identify, alternatively you’ll trade this URL to the rest you need.

When you’re happy with the information you’ve entered, click on on on the ‘Save and Get began Enhancing the Internet web page’ button.

See also  Tips on how to Create a Services and products Segment in WordPress
Adding a title to a SeedProd page design

Next, you’ll be taken to the SeedProd drag-and-drop internet web page builder, where you’ll customize the template.

The SeedProd editor shows a reside preview of your design to the right kind and a couple of block settings on the left.

Customizing a SeedProd WordPress page template

The left-hand menu moreover has blocks that you simply’ll drag onto your design.

You’ll drag and drop standard blocks like buttons and photographs or use difficult blocks such for the reason that touch shape, countdown, social percentage buttons, and further.

Adding blocks a page or post design in WordPress

To customize any block, simply click on on to select it for your construction.

The left-hand menu will now show the entire settings you’ll use to customize that block. For instance, you’ll ceaselessly trade background colors, add background footage, or trade the colour scheme and fonts to better suit your brand.

Creating a custom layout for a WordPress website

To be able to upload an icon font to the internet web page, simply to search out the ‘Icon’ block inside the left-hand column and then drag it onto your construction.

SeedProd will show an ‘arrow’ icon thru default.

Adding an icon font in WordPress using SeedProd

To show a definite Font Awesome icon as a substitute, simply click on on to select the Icon block.

Inside the left-hand menu, hover your mouse over the icon and then click on on on the ‘Icon Library’ button when it appears.

Choosing a font icon using a page builder

You’ll now see the entire different Font Awesome icons that you simply’ll choose from.

Simply to search out the font icon that you need to use and gives it a click on on.

SeedProd's built-in icon font library

SeedProd will now add the icon in your construction.

After choosing an icon, you’ll trade its alignment, color, and size the usage of the settings inside the left-hand menu.

How to customize a font icon using SeedProd

You’ll continue working on the internet web page thru together with additional blocks and customizing those blocks inside the left-hand menu.

When you’re happy with how the internet web page turns out, click on at the ‘Save’ button. You’ll then select ‘Put up’ to make that internet web page reside.

Publishing a custom page layout with a font icon

We hope this article helped you learn how to add icon fonts for your WordPress theme. You’ll moreover go through our data on the highest popup plugins when compared and how to select the most efficient internet design instrument.

Will have to you most popular this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll moreover to search out us on Twitter and Fb.

The put up The right way to Simply Upload Icon Fonts in Your WordPress Theme first gave the impression on WPBeginner.

WordPress Maintenance

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment

Your email address will not be published. Required fields are marked *