Wie fügt man mit CSS ein Icon vor eine Überschrift ein? Kleine Icons neben Überschriften peppen das Webseitenlayout auf und sind leicht zu definieren.
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
}
