LiquidBook Development

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
1655-scary-mansion-on-a-hill-Grimdark-painti-stableDiffusion3SD3_sd3Medium-2128531760
scary mansion on a hill, Grimdark painting art style, dark and brooding composition, dramatic lighting, captures the ...
basset-hound-detective
A basset hound detective wearing a classic Sherlock Holmes-style outfit, complete with a deerstalker hat and a tiny, ...
DALL·E 2024-06-14 18.04.29 - A basset hound detective wearing a Victorian-era detective outfit, complete with a deerstalker hat and a tiny, tailored trench coat. The basset hound
A basset hound detective wearing a Victorian-era detective outfit outfit, complete with a deerstalker hat and a tiny,...
scary_mansion_on_a_hill
scary mansion on a hill, Grimdark painting art style, dark and brooding composition, dramatic lighting, captures the ...

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.