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:
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.
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:
Widgets & Titles & Menus
To add an icon to a menu item you can add the same shortcode in the menu admin area like this:
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.
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.
You only need to use the icon name that comes after the fa-. So in this case the icon name is heart.
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.