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
Design Wireframe
website wireframe for a web app, blue and orange. 3D, white background, photorealistic, minimal style
DALL·E-2024-04-04-10.01.32-A-wide-format-HD-quality-image-showcasing-a-beautiful-set-of-cottages-in-the-Scottish-coastal-town-of-Tobermory-rendered-with-extreme-detail-and-pho
image: a beautiful set of cottages, Scotland coastal town of Tobermory, extremely detailed, photorealistic, cinematic...
liquidbook_8k_photo_realistic_colorful_bright_light_day_time_ou_1febbd3d-5bcb-43b0-a759-e6135be8ed7d
8k, photo, realistic, colorful, bright light, day time, outdoor, Gundam GP04, extreme detailed armor, giant heavy wea...
liquidbook_concept_art_of_a_lean_horse_the_horse_is_white_and_h_0a3ff1b8-378c-46c2-b1d4-0131421519f0
concept art of a lean horse, the horse is white and his legs are black, big brush strokes, static position

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.