Skip to Content

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: