So soll es werden
Hier dreht sich immer noch alles um Links. Anders als in Part 1 wird aber nicht experimentiert, sondern es werden zwei Varianten dargestellt, die - ggf. unter Änderung von Dateinnamen und Klassennamen - in dieser Form produktiv übernommen werden können.
Variante 1: SVG als Hintergrundbild
Ein SVG-Icon wird als Hintergrundbild in ein Pseudo-Element eingebunden, so gelingt auch die Ausrichtung gut. Eigenschaften wie Farbe und Größe ergeben sich aus der Grafik. Die Änderung für den hover-Effekt kommt zustande, indem innerhalb der Grafik ein anderes Element ausgewählt wird, so müssen keine zwei Icons geladen werden.
Variante 2: SVG inline mit <use>-Tag
Ein SVG-Icon wird inline mit <use> eingebunden, wobei Größe und Farbe über css gesteuert werden. Wichtig ist dabei, dass diese Angabe im Icon selbst nicht enthalten sein dürfen, sonst funktioniert es wohl nicht.
Variante 3: SVG inline mit <use>-Tag - andere Icons
Ein SVG-Icon wird inline mit <use> eingebunden, wobei Größe und Farbe über css gesteuert werden. Wichtig ist dabei, dass diese Angabe im Icon selbst nicht enthalten sein dürfen, sonst funktioniert es wohl nicht.