Who loves icons?!

I do! Quick post to declare my love for Font Awesome and show you how to fill your WordPress site with them.

How to add Font Awesome Icons to your WordPress website

First you’ll need to install this plugin and activate it! Don’t worry about the settings, the default is great.

And that’s it! Now this shortcode:

[icon name=heart]

Will display as:

If you’re adding an icon that has a prefix that isn’t the default (fas) you’ll need to add it as a prefix in the code.

screenshot of provided code from font awesome showing 'fab' as the prefix for a 'Brands Style'

If I’m inserting a ‘brand’ icon like WordPress the prefix is ‘fab’:

[icon name=wordpress prefix=fab]

You can change the colors and the sizes of the icons by applying them to the shortcodes just like you would to a word in the visual editor:

screenshot of 5 shortcodes in a row all in different colors

Widgets & Titles & Menus

To add an icon to a menu item you can add the same shortcode in the menu admin area like this:

Font Awesome shortcode <i class="fas fa-home"></i> in the navigation label next to the word home in the menu admin area

This is a little trickier so if you’re not comfortable editing your functions.php file proceed with caution. Always make a backup of your file before you start editing.

To add an icon to the title of a post or a widget title you’ll need to enable those areas to display shortcodes by adding the following code to functions.php in your theme files.

add_filter('the_title', 'do_shortcode');
add_filter('widget_title', 'do_shortcode');

If you add the icon shortcode to your post title make sure and edit your URL slug so that the icon name isn’t part of it. It also is a good idea to use a plugin like Yoast SEO to edit the page title to only show text for search engines.

Finding Icons!

From the Font Awesome Gallery page select ‘Free’ over on the left and add in whatever keyword you’d like! You can also just scroll through all the free items until you find one that fits for your content.

font awesome search screenshot showing first two rows of free icons  when searching for heart
screenshot of provided code from font awesome showing name of icon

You only need to use the icon name that comes after the fa-. So in this case the icon name is heart.

[icon name=heart]

Accessibility

I’m still researching but as of now the Font Awesome plugin doesn’t seem to give an option to add ‘aria-hidden=true‘ which is used to hide icons that are purely decorative from screen readers or add ‘title=description‘ to icons that are important to the content. I sent a support request to see if there are any options and will update here as I learn more.

Thoughts?