WordPress Icons: Learn About WordPress Icon Fonts and How to Upload Them

WordPress icon fonts are a crucial part of every WordPress site. They greatly add on to maintaining responsive website design.

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

Well, if you want to add icons like this to your own website – sit back and relax, because we’re about to teach you how to do exactly that.

Why Icons?

Icon fonts are typefaces containing symbols and pictograms, instead of letters and regular symbols. It can be used to display commonly used icons – small pictures. Let’s dive deeper.

Some examples of icon fonts you can find in nearly every website or blog are social media buttons. When you are about to share something from a website to your Facebook account, you click the Facebook icon font!

Before icon fonts existed, all web icons and sprites were images. Because images are not scalable and are unresponsive, it can slow page loading time and make it unreachable for some audiences. So, icon fonts came as the alternative which 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 according to your needs. There are tons of customization options  – changing icon size and color, rotating them, adding effects, and much more. All of that and more can be simply done via CSS without any loss of visual quality.

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

Even though there are other options to add 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.

Free Icon Fonts

There are several free icon fonts sources available for your WordPress site. You can simply browse for “icon font” on Google. IcoFont, Font Awesome, We Love Icon Fonts, and IcoMoon are the most recommended platforms.

IcoFont is one of the biggest sources for free icon fonts. It provides more than 2100 icons in a single font that are sorted into 30 categories. It also allows you to generate your own customized icon pack as well.

You can simply download icons from IcoFont’s site  – either by copying the HTML code or clicking on the download button from the site navigation.

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

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

Another widely used source of icon fonts is Font Awesome. It provides more than 1500 free icons and more than 5000 pro-version icons that cover over 70 types of icons with four main styles  – solid, regular, light, brands.

We Love Icon Fonts is another source that allows you to build your own icons with the help of their font creator. You can simply click “Add” and get an embeddable code that can be used to customize your collection through CSS.

Last but not least, IcoMoon provides more than 5,500 free vector icons and more than 4,000 premium icons. You can also build your own IcoMoon font and upload your own SVG file using the import feature.

The Fastest Ways of Using Icons on WordPress

You can use the font icons on your WordPress site manually by copying the embedded code or using alternative options. Regardless of performance issues, utilizing plugins and the built-in Dashicons is the quickest and easiest ways to use WordPress font icons.

Using a Plugin

Using a WordPress plugin is the easiest way to add an icon font to your WordPress site without any need to modify the code. First things first, you have to install and activate the free Font Awesome Integration plugin. After you finish installing and activating it, you can start adding font icons with their shortcode – [fawesome]. Let’s get into the details.

There are four attributes in the shortcode:

• target – target of the ‘a’ tag
• href – link to use in the ‘a’ tag
• iclass – classes to use in the /i/ tag
• aclass – classes to use in the ‘a’ tag

Let’s create an icon that will point to the WordPress website.

Here we’ll have to place the icon code – (fa-wordpres)– into the iclass tag and the link http://wordpress.org/ into the ahref tag:

[fawesome iclass="fab fa-wordpress" ahref="https://wordpress.com"]

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

You can also go directly to the Font Awesome icons’ directory and check the code of the icon you want to use. To do so, click on the icon and copy-paste the code to the intended part of your website’s content.

Let’s use a free WordPress icon available on Font Awesome, and place it on a WordPress post as an example.

First, simply copy the chosen WordPress icon code from Font Awesome:

<i class="fab fa-wordpress"></i>

Then, place it in the WordPress post editor on the HTML block, it will look like this:Here is how it looks like when it is previewed:

Apart from that example, you still can customize it according to your project’s needs by manually defining elements – color, size, etc.

Here is a code example for modifying the color and size of an icon:The prieview:
Keep in mind that to reference an icon, we use <i>, and use <span> to initiate the command. Moreover, every icon name has a style prefix.

Here is how the command ordered:

<i class=”style_prefix fa-icon name></i>

or,

<span=”style_prefix fa-icon_name></span>

Here is a cheat sheet from the above command:

<i class="fas fa-icon_name"></i>

<span class="fas fa-icon_name"></span>

<i class="far fa-icon_name"></i>

<span class="far fa-icon_name"></span>

<i class="fal fa-icon_name"></i>

<span class="far fa-icon_name"></span>

<i class="fab fa-icon_name"></i>

<span class="far fa-icon_name"></span>

Using Dashicons

Regardless of the open source icon fonts available on the internet, WordPress actually has Dashicons  – a built-in default icon font package for every WordPress site. It was introduced with WordPress 3.8.

Dashicons provides font icons, ranging from the admin menu, welcome screen, post formats, media, image editing, TinyMCE, post screen, sorting, social, products, taxonomies, widgets, notification, WordPress.org specific, and much more.

These icons can be used to customize your own plugins, themes, post type icons, and other elements on your site. As it is equipped on your WordPress, it is totally easy to use!

You can do that by adding the code to your functions.php file, which is time-consuming when done manually. Instead, you can simply use a free plugin like Code Snippets to configure Dashicons without any need to configure the functions.php file.

With that, you can go to the Dashicons website and pick the one you want to use. To integrate it on your website, you can click “Copy HTML” link, and you get the code  – simply copy and paste it into your WordPress element.

For example, let’s take the dashicons-tickets icon from the Dashicons directory and add it to a WordPress post. Copy the HTML and place it into the HTML block. It will look like this: Once you click “Preview”, you’ll see the icon:

To further customize Dashicons, you can use CSS.

Conclusion

As you can see, icon fonts can be a great alternative to replace images used as icons, pictograms, or symbols for your website. Icon fonts are a great element for a responsive website as they can reduce the loading time due to their smaller size.

You can also easily get icon fonts on the internet as a lot of them are available for free.

Some of the recommended sources to get icon fonts are:

1. IcoFont
2. Font Awesome
3. We Love Icon Fonts
4. IcoMoon

Instead of adding icon fonts manually, you can use the quickest and easiest way to add them:

1. Using the Font Awesome Integration plugin
2. Using the built-in WordPress Dashicons with the Code Snippets plugins

All you need to do is copy and paste the HTML code of the icons you want to use on the targeted area of your site.

The author

Fitrana A.

Fitrana is Hostinger's Digital Content Writer. She loves doing in-depth research to make every topic accessible to all readers. Besides writing, she enjoys attending music gigs, photo hunting, and reading books.

More from Fitrana A.