How to Add Font awesome Icons in Widget Title


Font awesome is a great way to add icons to your WordPress theme but you can’t add your font-awesome into Widgets, Whenever you will try to add font-awesome icons using the standard code like this

<i class=”fa-fa-heart”></i> Latest News

Inside your widget heading, Your WordPress core will automatically sanitise all the code inside this heading the return you only the text.

So how can we add Font-awesome icons inside your widget title? Here in this article, we will show you how you can do this using more than one method.

#1  Add  font-awesoem using :before psudocode

In most WordPress themes widget titles are rendered through .widget-title css class. So we have to add the following code inside your style.css file

.widget-title::before {
content: "\f086";
}

Now the drawback of this method is all the widget will receive the same icon for all the placed widget.

But do you want same image icon before all the widget title? I don’t think so.

#1  Add  font-awesoem using  shortcode

In this method, first of all we will enable shortcode inside the widget title using the following line of code. Just copy paste the following code inside your theme’s functions.php file

add_filter('widget_title', 'do_shortcode');

Now  Whatever the shortcode you will place inside the widget title, your widget will render that shortcode. So here we are going to define a simple shortcode that render a simple font-awesome icon.

add_shortcode('fa-heart', 'bn_shortcode_faheart');
function bn_shortcode_faheart( $attr ){
return '<class="fa fa-heart">';
}

Save above lines also inside functions.php file. Now a new shortcode with shortcode tag ‘fa-heart’ is ready.
Open your widget title and place the following code

[fa-heart] Latest Post

Save and refresh your browser to see the changes.  The same way we have defined four shortcode to render different icons in our latest website cbsetoday.com

Add Icons in Widget Title

If you are brand new to WordPress shortcode and want to generate your own WordPress shortcode then I would recommend you to read this article – How to generate your own WordPress shortcode.

#3 Add Font awesome icon in Widget Title using jQuery

CodePen has shown us how to add font-awesome icons inside WordPress widget title. By default, WordPress widget header titles have whatever class the developer assigns them. If you use the same widget you may get all the widget titles with identical classes or no class at all. This simple jQuery script allows you to easily append an icon to the widget title. The jQuery script uses the contents (see jQuery contains selector )and some jQuery selector of the title to auto append an html tag.

jQuery(document).ready(function ($) {
 //noconflict wrapper    // widget object - acts like a class  
  var widget = {    news : "rss",     tweet : "twitter",    event : "calendar",    note : "pencil-square-o",    download : "download",    contact : "phone",    setIcon : function(icon) {       var myreturn;       Object.keys(this).forEach(function (key) {          if(icon===key) {          myreturn = ' ';       }       }); // end foreach loop       return myreturn;   } // end setIcon }; // end widget object // // in $(<your selector>:contains("Your widget title").append(widget.setIcon('<key_name>')); $('h3:contains("News")').append(widget.setIcon('news')); // returns : <h3 class="widget-title"><span class="widget-inner">News</span><i class="fa fa-rss fa-fw">&nbsp;</i></h3> // $('.widget-title:contains("Tweets")').append(widget.setIcon('tweet')); $('.widget-title:contains("Resources")').append(widget.setIcon('download')); $('h3:contains("Contact")').append(widget.setIcon('contact'));}); //end noconflict

This script has some preset Icons but you are totally free to define your own icons.

Final thoughts

Whatsoever is your choice to add font awesome Icons in widget title, but in my personal view shortcode method is the best and require least load on your server.

7 Brilliant Comments - Join Discussion Now!

  1. Hey Rakesh !
    This is amazing post which every beginner need to read, I think there is also a plugin which named as Font Awesome worked same but plugin increased the page load so this custom code is better way to get stylish icon in menu.

    • rakesh says:

      Hi Junaid, I love to hack plugins so that we could pass the vital information to our readers, this way they can reduce the loading speed to their website without using a lots of plugin. Another issue is- you never know how that plugins is loading and accessing your website data.

  2. Jojo says:

    So I tried this… and its not working. Very simple instructions and everything is in the functions.php file but its not working… ;-(

  3. Praveen says:

    Good tip for making the sidebar titles attractive. This feature gives uniqueness to Website design.

  4. Adding front awesome icons in widgets was not easy for me, now after acting on your tip i really able to get desired results.
    Thanks for giving this nice piece of advice.

  5. I want to use custom icon before post title.

    I mean different icon for different widgets. For popular post icon 1, for recent post icon 2 and so on.

    is it possible ?

    Thanks in advance.

Leave a Reply to Junaid Shahid Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>