Menu

Wie fügt man ein Icon vor einem Link ein?

In diesem Beispiel soll vor allen Überschriften vom Typ

ein kleiner Pfeil stehen, sofern es sich dabei um einen Link handelt. Das wird alleinig über CSS und Background gelöst, wie das Codebeispiel zeigt.

h4 {
color: #000;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 1.1em;
margin-top:: 1em;
margin-bottom: 0em; 
padding: 2px;
text-align: center;
}

 

h4 a:link {
color: #000;
text-decoration: none;
background:url(../images/pfeil_rechtsh4.gif);
background-repeat: no-repeat;
padding-left: 0.7em;
}

 

h4 a:hover {
color: #000;
text-decoration: none;
background:url(../images/pfeil_rechtsh4.gif);
background-repeat: no-repeat;
padding-left: 0.7em;
}

 

h4 a:active, h4 a:visited {
color: #000;
text-decoration: none;
background:url(../images/pfeil_rechtsh4.gif);
background-repeat: no-repeat;
padding-left: 0.7em;
}