If you’re familiar with Bootstrap, you’ll know that it comes bundled with useful icons from Glyphicon that can easily be displayed on your website. With a WordPress theme built on Bootstrap you should be able to insert any of these icons in a post or page by entering (change name for the icon name)

<i class="icon-name"></i>

. It’s not so easy, however, to add icons to widget titles in the sidebar as WordPress strips out any html in the title fields.

It took me a while to find the solution and this article provided the best help: http://everchangingmedia.com/bootstrap-icons-in-widget-titles/

So, let’s say you have three widgets – search, archives and tags and you want to display a suitable icon next to each widget title.

To achieve this, you the following code to your functions.php file:

function html_widget_title( $title ) {
$title = str_replace( '[', '', $title );
$title = str_replace( 'search]', '<i class="icon-search"></i>', $title );
$title = str_replace( 'archives]', '<i class="icon-folder-open"></i>', $title );
$title = str_replace( 'tags]', '<i class="icon-tags"></i>', $title );
return $title;
}
add_filter( 'widget_title', 'html_widget_title' );

Then, go to the Widgets section and add [search] in front of the Search Widget title, and do the same for the other widgets using [archives] and [tags]. Refresh your page and you should now see a nice wee icon beside each of your widget titles.