We all know the wonders of using Font Awesome, right? They can add a little graphic pizazz to your website without any performance hits from traditional graphic images.
While building out my (this) website using my customized version of Utility Pro*, I decided to spruce up the Home Welcome widget area — I wanted to add something to the plain text in my widget title, which uses the largest font size on the homepage. I added the HTML for the Font Awesome heart icon within my phrase in the widget title and this is how it appeared:
<i class="fa fa-heart">
Yep, all spelled out in its HTML-ness. After a little web searching, I found this article from WP Beaches:
In that tutorial I learned that you "can't add HTML to a Widget Title in WordPress", however you can add a shortcode, and we can build that shortcode to output HTML to display my heart icon.
Shortcode-Enable My Widget Title
Just so you know, Utility Pro already enables the use of shortcodes in widget_text, but we need to add the ability to use them in widget_title. You can do that by adding this to your functions.php, or in the case of Utility Pro, you would add this to the top of the theme-config.php file to keep your code organized:
Next I created a filter that assigns a shortcode to the HTML representation of the Font Awesome heart icon:
Putting It All Together
Now I went back to my text widget and used my new shortcode in the widget title:
And voilà! I have my heart:
Now go get creative with your widget titles!