How to Include Icons in WordPress: A Beginner’s Guide

Icon fonts are a crucial part of every website built on this CMS. They are largely used to maintain a receptive.

Did you notice all the icons on our website? One of them is the cart icon in the navigation bar.

Well, if you want to add icons like this to your own website, sit back and relax, because with this post you will learn how to do it easily.

Why use icons?

Icon fonts are a type of lettering that contain symbols and pictograms, rather than regular letters and symbols. They can be used to display commonly used icons – small images. Let’s look at this in a little more detail.

Some examples of icon fonts that you can find on almost all websites or are the . When you’re about to share something from a website in your Facebook account, you click on the Facebook icon source.

Before icon fonts existed, all web icons and sprites were images. Because images aren’t scalable and don’t automatically adapt to devices, they can slow down page load time and make it inaccessible to a portion of your audience. So icon fonts were the alternative that works on any screen and weighs much less.

Icon fonts are vector images. Therefore, they are infinitely scalable.

They are a great feature for responsive design because you can easily manipulate icon fonts to suit your needs. There are tons of customization options: change the size and color of the icons, rotate them, add effects, and much more. All this and more can be done simply through , without loss of visual quality.

They are simple and relatively easy to implement. Furthermore, icon fonts also allow you to store many symbols within a single file. This can reduce the number of HTTP requests.

Although there are other options for adding icons, icon fonts are still widely used because you can easily find free icon fonts or even design your own to use on your website or .

Free Icon Fonts

There are several free icon fonts available for your . You can simply search for “icon font” in . , , e are the most recommended platforms.

is one of the largest sources of free icon fonts. It provides more than 2,100 icons in a single font that are categorized into 30 categories. It also allows you to generate your own custom icon pack.

You can simply download icons from the IcoFont site, either by copying the code or clicking the download button from the site navigation.

Just browse the icons you selected, add them to your collection and download them. After downloading, you will get a zip file that will have CSS files, examples, and fonts. The HTML snippets of the downloaded icons are combined along with their Unicode in the example folder.

If you want to use them directly on the web, you can copy the entire IcoFont directory to your project folder. Be sure to reference the location of your icofont.min.css. in the header.

Another widely used font is . It provides 1500+ free icons and 5000+ pro version icons covering 70+ icon types with four main styles: Solid, Regular, Light, Brands.

is another font that allows you to create your own icons with the help of its font creator. Simply click “” and you will get an embed code that can be used to customize your collection via CSS.

Last but not least, it provides 5,500+ free vector icons and 4,000+ premium icons. You can also create your own IcoMoon font and upload your own SVG file using the import function.

The fastest ways to use icons in WordPress

You can use the icon fonts in your manually by copying the embed code or using alternative options. Regardless of performance issues, using and built-in Dashicons are the fastest and easiest ways to use WordPress font icons.

Using a plugin

Using a plugin is the easiest way to add an icon font to your WordPress site without any code modifications.

First, you must install and activate the . After you finish installing and activating it, you can start adding font icons with a shortcode – . Let’s see the details.

There are four attributes in the shortcode:

• target: tag target “a”
• href: link to use in the tag “a”
• iclass – classes to use in the tag /Yo/
• aclass: classes to use in the tag “a”

Now let’s move on to how to create an icon that points to the WordPress website.

Here you will have to place the icon code (fa-wordpress) In the label i class and the link in the tag ahref:

Note that in this example, we add the prefix fab to the i class. We’ll cover style prefixes later, providing you with a cheat sheet.

This is what it will look like in the WordPress shortcode block:

Once you preview or publish it, it will look like this:

When you click on the WordPress icon, you will be redirected to the linked site.

You can also go directly to and check the icon code you want to use. To do so, click on the icon and copy and paste the code into the intended part of your website content.

Now, let’s say you want to use one of the WordPress icons available for free on Font Awesome and you want to place it in a WordPress post.

First, just copy the chosen WordPress one from Font Awesome:

Then place it in the WordPress post editor in the HTML block, it will look like this:

This is how it looks when previewed:

To continue with the example, you can still customize it according to the needs of your project by manually defining elements: color, size, etc.

Here is a code example to modify the color and size of an icon:

The preview:

Note that to reference an icon, you must use and use to start the command. Also, each icon name has a style prefix.