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"> </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.
Great piece of code. For anyone who’s interested, I wanted to put my icon to the left and have it vertically aligned in the middle. This is the css I used for that.
.widget-title{
margin-left:1.5em;
position:relative;
}
.widget-title .fa {
position: absolute;
top: 0;
bottom: 0;
right: 100%;
}
.widget-title .fa:before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1em;
}