how to add Font-awesome icons in WordPress widget title

Font awesome icons in widget title

We all are well aware of the Wonders added by Font-awesome icons, little wonderful graphic icons mapped in fonts to replace our very old traditional images.

Recently while working on the Software Download WordPress theme, a reader asked me to add font-icons in widget title so the prompt solution was like this

    Popular <i class="fa fa-love"></i> Downloads

but to my surprise, WordPress security trimmed all HTML tags and returned only the simplest title. I was determined to add font-icons to my widgets and the obvious choice was font-awesome.

Widget title removes all HTML tags but it honors the shortcode only, so decided to generate few very simple shortcode for my website.  Just open functions.php file and add the following code.

add_filter('widget_title', 'do_shortcode');

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

add_shortcode('fa-bolt', 'bn_shortcode_fabolt');
function bn_shortcode_fabolt( $attr ){
  return '<i class="fa fa-bolt"></i>';

Putting It All Together

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

[fa-bolt] Popular Download

The result is something like this.

Add Icon in Widget Title

Now you have the idea. Go and experiment with you your widget title.

Related Posts

Leave a Reply

Your email address will not be published.