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 title="heart icon"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 title="WordPress Icon"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.
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.
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 title=heart
Accessibility * January 28, 2021
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.
Accessibility Update!!! * June 3, 2021
A software developer at Font Awesome just posted on my support thread that shortcode accessibility options are now included in release 4.0.0-rc23 of the Font Awesome plugin! Super cool. Within the shortcode you can add aria-hidden=true so that the icon is skipped by screen readers. You can also add title=”icon title” to give your icon a real name that makes sense within the content. Using title works the same as on images so you’ll get a little tooltip on hover as well. You can learn more about it here: https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/accessibility