How To Add Icons To Widget Headers


Working on a current site required me to enter icons before the widget title in a sidebar.

I knew that WordPress wouldn’t allow such detail, and I didn’t want to have to find another plugin to do what I thought would be a menial task… so by resorting to jQuery it ended up being quite easy to do.

The result was to try to achieve something like this:

Widget with corresponding icon displayed

And the way I was able to get this to operate was by using this code:

It assumes within the text/html widget you have already defined the icon element in the body of the widget.

For example:

Title: My Widget Title
Body: <span class="icon-phone"></span>
Remainder of your content to go here.

The CSS of the above would be:

Ryan

Author of scripteverything.com, Ryan has been dabbling in code since the late '90s when he cut his teeth by exploring VBA in Excel when trying to do something more. Having his eyes opened with the potential of automating repetitive tasks, he expanded to Python and then moved over to scripting languages such as HTML, CSS, Javascript and PHP. When he is not behind a screen, Ryan enjoys a good bush walk with the family during the cooler months, and going with them to the beach during the warmer months.

Recent Posts