Adding an icon to WordPress widget title

This CodePen shows how to add Font Awesome icons to WordPress widget titles by using jQuery. This script can be easily added to a WordPress theme or a WordPress plugin. 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

The script has some pre-set icons, but you can use whatever Font Awesome icons you want. You can add your key name and your icon value (<key_name> : <key_value). Your WordPress website or your WordPress plugin will need to load Font Awesome (see getting started). Below is a CodePen embed – take a look. Share your thoughts about the script in the comments below or send me a tweet @liquidbook.

See the Pen Adding an icon to WordPress widget title by Felipe Lujan-Bear (@liquidbook) on CodePen.

Social Sharing
cybercat
a cyborg cat, background futuristic city in the style of anime, night time scene, soft focus
superman-comfyui-1
a close up of a superman, moody iconic scene, pleading face, eye light on the face, soft focus backlight, golden hour...
the darknight
a close up of the dark night by frank miller, moody iconic scene, soft focus backlight, golden hour, Gotham city scap...
superman night time scene
a close up of a superman, moody iconic scene, pleading face, eye light on the face, soft focus backlight, golden hour...

This website stores cookie on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.