Einfügen von Icons aus der Icomoon Font Bibliothek (Bootstrap)
Dieser Tipp stammt von Kyle Ledbetter.
Es gibt 2 verschiedene Markups, die man anwenden kann. Voraussetztung ist, das Template unterstützt den Icomoon Font und bringt nicht eigenen Icons mit. Das Protostar Template hat den Icomoon Font gebrauchsfertig in seine CSS Datei integriert, andere Templates verfolgen hier andere Ansätze.
oder
<span aria-hidden="true" class="icon-out"></span>
Eine komplette Liste über die Icomoon Symbole findet man auf Kyle's Webseite. Das aria-hidden="true" sorgt übrigens dafür, dass ScreenReader das Symbol nicht vorlesen.
Die Anzeige von externen Links auf dieser Seite können beispielsweise so formattiert werden:
a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after {
font-family: 'IcoMoon';
content: " ""\26";
}
Auf dieser Seite wird FontAwesome verwendet. Hier gilt entsprechend:
a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after {
font-family: 'FontAwesome';
content: " ""\f08e";
}