Kleine Icons peppen die Webseite auf. Musste man früher dafür extra kleine Bilddateien auf den Server laden, geht es heute leichter von der Hand. Kleine Java-Script Frameworks nehmen uns die Arbeit ab und bieten einen ganzen Satz an Standardicons im gleichen Design, welche man auch noch kostenlos und als Open Source nutzen kann: Feather Icons.
Feather Icons ist eine Sammlung von über 250 minimalistischen Icons, welche mittels Java-Script schnell in die Webseite eingebunden werden können. Die Icons liegen als Vektorgrafik im SVG-Format vor und sind damit größenunabhängig.
Das Einbinden in die eigene Webseite geht durch Einbinden des Scriptes:
<script src="https://unpkg.com/feather-icons";></script>
Anschließend kann man die Icons durch ein Attribut in einem HTML-Tag ausgeben:
<p><span data-feather="terminal"></span> CSS Tools</p>
Das Attribut data-feather legt das Icon fest. Den Rest übernimmt der Java-Script-Code, welchen wir am Ende des HTML-Dokumentes noch ausführen:
<script>
feather.replace()
</script>
Das Ergebnis:
Das passende Icon findet man durch die Suchfunktion oder direkt über die Auswahlliste auf der Webseite.
Auf diese Art lassen sich die Icons schnell an verschiedenen Stellen einbinden, man muss keine Bilder extra abspeichern und verlinken und nicht auf relative URLs achten. Script und Icons sind als Open-Source auf Github verfügbar. Somit lässt sich das Script auch komplett auf dem eigenen Webspace betreiben. Insgesamt eine coole Sache um Webseiten schnell mit fluffigen Icons aufzupeppen.
Auch eine Nutzung ohne Java-Script ist möglich:
<svg class="feather"> <use xlink:href="path/to/dist/feather-sprite.svg#circle"/> </svg>
Und auch die Farben lassen sich mittels CSS verändern:
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
