Add icon to widget title

jimosulli · November 2015

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

Albert · November 2015

Hi,

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

jimosulli · November 2015

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

Albert · November 2015

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

[icon type="icon-lamp"]

jimosulli · November 2015

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

Albert · November 2015

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

jimosulli · November 2015

I found a jQuery workaround

jimosulli · November 2015

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

Add icon to widget title

Comments