WordPress icons can help improve the user experience on your site. For example, you can use icons in your navigation menu, footer, and other parts of your site to draw the user's attention and make them take an action, among other benefits. 

Grow Your Business With HubSpot's Tools for WordPress Websites

In this guide, we'll cover:

What are WordPress icons?

In WordPress, icons function the same as all web icons. They are designed to draw attention to important parts of a web page, indicate information while taking up less space than text, and reinforce your brand.

Quartz is just one example of a WordPress website that uses icons on its mobile site to help readers navigate the site. They can click on the search icon to find a specific article, click the person icon to sign in, or click one of the icons at the bottom of the screen to browse different parts of the site.

Quartz website uses WordPress icons in header and footer

Image Source

Now that you know what icons are and how they can be used to improve UX, let’s walk through how to add them to your WordPress site.

Let’s walk through both these processes below.

Adding Icons to WordPress Using a Plugin

For a simple, beginner-friendly way to add icons to WordPress, consider using a WordPress plugin. For the sake of this demo, we’ll walk through the process using the Font Awesome plugin. The exact steps may vary depending on the plugin you use.

1. Install and activate the plugin.

To start, log in to your WordPress dashboard and install and activate the Font Awesome plugin.

Installing Font Awesome plugin to add icons to WordPress

2. Configure the plugin settings as needed.

Once you install and activate the plugin, you’ll be automatically redirected to the Installed Plugins page. Below Font Awesome, click Settings.

Click Font Awesome plugin settings before adding icons to WordPress site

By default, the plugin will be set up to use the free web icons via the Font Awesome CDN. If you’re happy with these settings, then you don’t have to make any changes.

Font Awesome plugin default settings

However, if you want to use free and pro icons on your site, you’ll need to set up a Font Awesome Kit, get an API token, and add it to your plugin settings page. Once you make these changes, click Save Changes.

3. Copy and paste a shortcode or HTML snippet where you want the icon to appear.

The shortcode for a Font Awesome Icon looks like this:

[icon name="value"]

Make sure to replace the placeholder text “value” with the actual name of the icon you want to add to your site. For example, if you want to add an award icon, then you’d use the shortcode:

[icon name="award"]

If you’re more comfortable with HTML than shortcodes, then you can add icons using the standard Font Awesome syntax. The best part is that the HTML snippet is provided for each icon in the Font Awesome library so you simply have to copy and paste it. Here’s the HTML snippet for the award icon:

HTML snippet for award icon in Font Awesome Library

Image Source

4. Preview the post or page.

To ensure you added the icon correctly, preview the post or page. It should look something like this:

WordPress homepage features award icon from Font Awesome library

If the icon doesn’t appear, make sure that you tried to add a free icon, not a premium one.

Adding Icons to WordPress Using Dashicons

WordPress has an official icon font called Dashicons. These are used in the WordPress dashboard and block editor. For example, here are the icons used to represent the different post formats in WordPress:

WordPress dashicons representing post formats

Image Source

You can use these on the front-end of your website, but you’ll need to enqueue it. This will require editing your functions.php file, which makes this method better suited for advanced users.

Below we’ll edit the functions.php file directly. However, any error when editing this file can break your site. Plus, any custom code added will be erased the next time you update your theme. So it’s recommended that you use a plugin like Code Snippets instead.

1. Open your theme file editor.

Log in to your WordPress dashboard and click Appearance > Theme File Editor.

Clicking theme file editor in WordPress dashboard

2. Add a code snippet to your functions.php file.

By default, the theme file editor will open your stylesheet. Click the Theme Functions, or functions.php, file.

Clicking functions.php file to add code snippet for Dashicons

Scroll to the bottom of the file and copy and paste the following code snippet:

 
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}

Click Update File.

Click Update file after adding code snippet for Dashicons in functions.php file

3. Copy and paste the HTML for an icon in the Dashicons library.

Once the file has been updated, you can visit the Dashicons library. Click on the icon you want to add to your site and then click Copy HTML.

Copy HTML for WordPress icon from dashicons library

4. Copy and paste the HTML snippet where you want the icon to appear.

Now go to the post or page where you want to add the icon. Add a custom HTML block and paste the HTML snippet.

Adding HTML snippet for WordPress dashicon in Gutenberg editor

5. Preview the post or page.

To ensure you added the icon correctly, preview the post or page. It should look something like this:

WordPress homepage with WordPress dashicon

Adding Icons to Your WordPress Website

Icons can improve the appearance, navigability, and overall user experience of your WordPress website. You can easily add them to your site with or without a plugin, depending on your level of technical expertise. 

Editor's note: This post was originally published in October 2019 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published May 6, 2022 7:00:00 AM, updated May 06 2022

Topics:

WordPress Website