access_time
hourglass_empty
person_outline

How to Upload WordPress Icons: a Beginner’s Guide

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!Social Media Icon Fonts on Hostiger's blog postBefore 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 be 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.

The landing page of IcoFontIcoFont 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.The landing page of Font Awesome siteAnother 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.The landing page of We Love Icon Fonts landing page siteWe 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.The landing page of IcoMoonLast, 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 plugin is the easiest way to add an icon font to your WordPress site without any need to modify the code.Font Awesome Integration pluginFirst 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.com/ 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.

Here’s how it will look like on the WordPress shortcode block:HTML snippet of WordPress Icon from Font Awesome that is regenerated to WordPress main siteOnce it is previewed or posted, it will look like this:The preview of the WordPress icon that is linked to WordPress.comWhen you click the WordPress icon you will be redirected to the linked site.

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:the HTML snippet of WordPress icon from Font Awesome on WordPress post editorHere is how it looks like when it is previewed:

The preview of WordPress icon from Font Awesome in WP post

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:HTML snippets example to customize the color and size icons from Font AwesomeThe prieview:
The preview of the customized WordPress icon fonts from Font AwesomeKeep 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:

StyleAvailabilityStyle PrefixExample
SolidFreefas
<i class="fas fa-icon_name"></i>
<span class="fas fa-icon_name"></span>
RegularProfar
<i class="far fa-icon_name"></i>
<span class="far fa-icon_name"></span>
LightProfal
<i class="fal fa-icon_name"></i>
<span class="far fa-icon_name"></span>
BrandsFreefab
<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.Code Snippets pluginInstead, 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 HTML block. It will look like this:Dashicons' HTML snippet of WordPress ticket icon on post editorOnce you click “Preview”, you’ll see the icon:

The preview of WordPress ticket icon from Dashicons in postTo 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

Author

Fitrana A. / @fitrana

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.

Related tutorials

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in WordPress
How to Upload SVG to WordPress (The Safe Way)
Close