There are plenty of ways you can make a positive impact on your WordPress website’s user experience. One of our favorite strategies? By making use of WordPress icons. Whether you’re new to the WordPress platform or a seasoned pro that wants a refresher on the WordPress blog icons to know, you are in the right place.
In this post, we’ll walk through what WordPress blog icons are, how you can add WordPress icons with the help of a plugin, and even how you can use a WordPress icons font. Ready to start improving your WordPress site’s user experience? Let’s go!
- What are WordPress icons?
- Adding WordPress Icons Using a Plugin
- Adding Icons to WordPress Using Dashicons
What are WordPress icons?
WordPress blog icons function the same as traditional web icons. The intent of using them is also the same: They draw attention to can’t-miss portions of a web page, indicate information while taking up fewer characters than text, and reinforce your brand.
To get an idea of what using WordPress icons could look like on your website, let’s take a look at a site that uses them. Quartz is just one example of a WordPress website that uses icons on its mobile site to help readers navigate the site. Thanks to universally understood, easy-to-digest icons, visitors know where to click to find a specific article, how to sign in, or how to reach other portions of the website. Icons are also an important add if you have a multilingual site or an international audience. That’s the power of icons.
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 WordPress Blog Icons: How To
There are two ways you can add WordPress icons. You can use an icon plugin such as Font Awesome, which is an ideal method for beginners. Alternatively, you can use Dashicons, which is the default icon package of WordPress. This method is better for more advanced users as it requires editing a functions.php file.
Let’s walk through both these processes below.
Adding WordPress Icons Using a Plugin
If you’re just getting started with WordPress icons, using a plugin is probably the best way to begin. For the sake of this demo, we’ll walk you through how to add icons to your WordPress site using the Font Awesome plugin. It’s updated frequently and boasts more than 400,000 installations — so you know it’s a good WordPress plugin.
To get WordPress icons on your site using Font Awesome, here’s what to do:
1. Install and activate the plugin.
To begin, you’ll 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. (If you’re a beginner and just want simple icons, don’t worry about this. However, if you want more advanced icons, this is a good option.) Once you complete this, 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, don’t panic! You can also 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.
Don’t push your post live until you’re sure your icon is set up correctly! To ensure you added the icon successfully, 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
The Font Awesome plugin isn’t the only way you can add WordPress icons to your site. The WordPress icons font is called Dashicons, and these icons 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
You can use WordPress icons or create your own custom icons to improve the appearance, navigability, and overall user experience of your 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.
