Add Font Awesome-ness to a Widget Title in WordPress

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:

You <i class="fa fa-heart"></i> Your Website

 
Yep, all spelled out in its HTML-ness. After a little web searching, I found this article from WP Beaches:

Add HTML [br] break tag to a Widget Title in WordPress

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:

add_filter('widget_title', 'do_shortcode');

 
Next I created a filter that assigns a shortcode to the HTML representation of the Font Awesome heart icon:

https://gist.github.com/gspice/09986238930e92569849

Putting It All Together

Now I went back to my text widget and used my new shortcode in the widget title:

You [fa-heart] Your Website

And voilà! I have my heart.
 
Now go get creative with your widget titles!