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.

Related Posts

Leave a Reply

Your email address will not be published.