Add icon to widget title

jimosulli

Is there a way to add an icon to a specific widget title?

Albert

Hi,

yes, it is possible. Just use the following shortcode next to the title: <i class="ICON-NAME"></i>

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jimosulli

I tried that, but when you save widget the html disappears

Albert

Sorry, you're right. We forgot that widgets removes html tags. You can try to use plain shortcode instead:

[icon type="icon-lamp"]

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jimosulli

I'm afraid it displays the shortcode, not the icon

Albert

If none of the solutions does not work, we do not have any other solution to display icons next to widget titles.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jimosulli

I found a jQuery workaround

jimosulli

I adapted this:

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