CSS: How to display image icon before each h3 in CSS?

Question

I have wordpress sidebar with:

<h3 class="widget-title">TITLE OF SIDEBAR</h3>

and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?

Or I must manually add image into code? like:

<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>

Solution 1

Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:

h3.widget-title:before {
    content: url('/path/to/image');
}

This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.

A good explanation of how pseudo elements work can be found here, on CSS Tricks.

Solution 2

If your image is 10px wide, you could try this:

.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}

Solution 3

Keep your h3 tag without including img tag, and do the following:

h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}

h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}

Solution 4

.widget-title:before {
  content: url(path/to/image.png);
}

You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.

Solution 5

h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}

Sample http://jsfiddle.net/KCXVM/

View more solutions