In diesem kleinen Tutorial zeige ich, wie man Icons vor seine Links und auch spezielle Links wie Mailto: setzen kann.
Normale Links mit einem Icon versehen
<div class="linkedContainer">
<a href="#" class="linkIcon">Hallo rzdev!</a>
</div>
In diesem Beispiel setze ich Themify Icons ein. Also einfach Themify CSS runterladen, Icons usw einbinden und schon kann man via Font-Family und content das Icon setzen. Als Content könnte man auch UTF-8 Icons nutzen (☻ z.B.)
a.linkIcon {
margin-left: 18px;
}
a.linkIcon::before {
font-family: 'themify';
content: "\e75a";
position:absolute;
margin-left: -18px;
margin-top: 1px;
}
Spezielle Links mit Icon versehen (Beispiel Mailto)
<div class="linkedContainer">
<a href="mailto://meine@mail.de" class="linkIcon">Hallo rzdev!</a>
</div>
Jetzt werde ich nur Links auswählen, die Mailto:// in sich haben. Das geht global auch einfach ohne Klasse.
a[href^="mailto:"] {
margin-left: 18px;
}
a[href^="mailto:"]::before {
font-family: 'themify';
content: "\e75a";
position:absolute;
margin-left: -18px;
margin-top: 1px;
}
Auch hier verwende ich Themify Icons, was natürlich auch mit Fontawesome, oder normalen UTF 8 Icons klappt.