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.
In this guide, we'll cover:
- what icons are
- how you can add icons to WordPress with a plugin
- how you can add icons to WordPress with Dashicons
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.
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.
Adding Icons to WordPress
There are two ways you can add icons to WordPress. You can use an icons plugin like the Font Awesome plugin, which is ideal for beginners. Or you can use Dashicons, the default icon package of WordPress. This method is ideal for more advanced users, since it requires editing the functions.php file.
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.
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.
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.
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:
4. Preview the post or page.
To ensure you added the icon correctly, preview the post or page. It should look something like this:
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:
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.
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.
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.
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.
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.
5. Preview the post or page.
To ensure you added the icon correctly, preview the post or page. It should look something like this:
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.
