CSS: Wie zeige ich ein Bildsymbol vor jedem h3 in CSS an?

Ich habe eine WordPress-Seitenleiste mit:

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

und ich brauche kleines Icon vorher anzeigen “TITEL DER SIDEBAR. Kann ich das mit CSS machen?

Oder muss ich das Bild manuell in den Code einfügen? wie:

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

Pseudo-Elemente wird tun, was du willst. Verwendung der :before Pseudo-Element, würde Ihr CSS so aussehen:

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

Dadurch wird ein Bild vor den Textinhalt der eingefügt <h3>jedoch ändert dies das DOM überhaupt nicht, was wichtig zu beachten ist.

Eine gute Erklärung, wie Pseudoelemente funktionieren, kann gefunden werden hier, auf CSS-Tricks.

Wenn Ihr Bild 10 Pixel breit ist, können Sie Folgendes versuchen:

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

Behalten Sie Ihr h3-Tag ohne das img-Tag bei und gehen Sie wie folgt vor:

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;
}

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

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/content.

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

Probe http://jsfiddle.net/KCXVM/

Ja, das kannst du mit CSS machen.

Nutzen Sie einfach die :before Pseudoselektor, etwa so:

widget-title:before {
    content:url('imagename.png');
}

Oder natürlich verwenden h3:before { ... } damit es für alle gilt h3 Elemente.

Hier ist ein funktionierendes Beispiel für Sie

Browserkompatibilität: Dies funktioniert in allen gängigen Browsern, außer IE7 oder früher.

Warum nicht einfach das Bild als Hintergrund verwenden?

.widget-title {
    background: url(...) no-repeat 50% 0;
    padding-left: 20px;
}