Wie fügt man ein Icon vor eine Überschrift ein?

Einer beliebigen Überschrift (hier H3) wird ein Hintergrundbild zugewiesen (background-image). Mit dem Befehl "background-repeat" wird festgelegt wie der Hintergrund wiederholt werden soll. In diesem Fall garnicht. Zusätzlich noch "padding-left" um den Abstand der Überschrift zum Icon festzulegen und mit "line-height" wird die größe der Zeile variiert damit das Bild nicht abgeschnitten wird.

In diesem speziellen Beispiel wird die Festlegung des Icons nur für den Bereich "Content" bestimmt. Wenn alle H3-Überschriften auf der Seite mit dem Icon ausgestattet werden sollen, lässt man einfach die Deklaration des Containers weg. (#content - weglassen) und schon gilt die Einstellung global.

#content h3{

 color: #013067; //Schriftfarbe 

 font-size: 1.5em; // Schriftgröße der Überschrift 

 background-image:url('../images/Features.gif');

 background-repeat: no-repeat; // keine Wiederholung

 line-height: 50px; // höhe des Icons

 padding-left: 70px; // hier die Breite des Icons

 }