CSS Tutorial: Icon vor Links setzen

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.