SVG-Icon neben Text über CSS automatisch anzeigen

Beispiel: Telefon-Icon automatisch neben Telefonnummer über SVG-Grafik platzieren

Im folgenden Tutorial schauen wir uns die schnelle und komfortable Möglichkeit an, die uns CSS bietet, eine Grafik über SVG automatisch neben festgelegten Elementen anzeigen zu lassen.

Das Besondere ist, dass die Grafik direkt in CSS integriert wird und dadurch deutlich schneller verfügbar ist, da nicht extra die Grafik nachgeladen werden muss und dadurch den Browser durch Laden blockiert.

Aber der Reihe nach. Wir wollen automatisch neben einem HTML-Element eine Grafik anzeigen lassen. Wenn wir dazu wie im Beispiel eine Telefonnummer nutzen, können wir diese direkt im CSS ansprechen. In anderen Fällen, würde man eine Klasse im HTML-Code nutzen.

Unser HTML-Code:

<a href="tel:+497071555111">07071-555 111</a>

Damit die Nummer bequem auch über ein surfendes Handy angerufen werden kann, startet der Inhalt im href mit tel:.

Am Rande bemerkt: in amerikanischen Filmen tauchen gerne in Telefonnummern die Zahlen 555 auf. Das kommt daher, dass so gut wie keine Telefonnummer, die 555 enthält, in der USA vergeben wurde und somit die Filmproduzenten vor Klagen sicher sind.

Den Inhalt von href können wir über CSS abfragen und entsprechend darauf reagieren. Wir überprüfen, ob der Inhalt mit dem Text „tel:“ beginnt. Somit ist sicher, dass es sich um eine Telefonnummer handelt. Die Überprüfung auf den Anfang läuft in CSS über href^="tel:":

a[href^="tel:"] {
    position: relative;
    background-color: yellow;
}

Damit wir den zur Verfügung stehenden Platz sehen, vergeben wir die Hintergrundfarbe Gelb.

Jetzt sehen wir, dass wir nicht genügend Platz links neben der Nummer haben um unser Icon anzuzeigen. Also schaffen wir uns den Platz über den entsprechenden Innenabstand padding:

a[href^="tel:"] {
    position: relative;
    padding-left: 1.3em;
    background-color: yellow;
}

Jetzt platzieren wir über CSS unseren Inhalt – z.B. den Text „T:“. Das nur übergangsweise – später ersetzen wir den Text durch unsere Grafik.

Zum Platzieren nutzen wir in CSS die Anweisung ::before, die wir absolut setzen müssen und den Inhalt über die CSS-Anweisung content::

header a[href^="tel:"]::before {
    position: absolute;
    content: 'T:';
    left:0;
    top:0;
}

Grafik statt Text: SVG-Grafik, die sich automatisch dem verfügbaren Platz anpasst

Anstelle unseres Textes „T:“ soll nun die Grafik erscheinen. SVG-Grafiken können wir direkt in CSS einbauen und somit das Nachladen einer Grafik uns (und dem Besucher) ersparen. Das macht das Surf-Erlebnis schneller und schöner.

Entweder wir malen uns ein Telefonhörer oder suchen uns im Internet ein entsprechendes kostenloses Icon.

Um die SVG-Grafik direkt in CSS zu nutzen ist der Trick, dass die SVG-Grafik URL-encodiert vorliegen muss. Hier kann ich den genialen Online-Dienst https://yoksel.github.io/url-encoder/ empfehlen. SVG-Grafik einfügen und korrekte CSS-Anweisungen kopieren.

Unsere Telefonhörer als SVG-Grafik sieht wie folgt aus. Wichtig ist, dass man da keinen Umbruch in die Zeile reinpackt!

    background-image: url('data:image/svg+xml;utf8,<svg enable-background="new 0 0 74.089 99.818" viewBox="0 0 74.089 99.818" xmlns="http://www.w3.org/2000/svg"><path d="m21.547 0.091s-21.827 0.287-21.544 20.059 4.253 37.255 10.773 46.998 23.242 35.248 42.236 32.67c0 0 9.355-2.007 16.44-6.593l-22.96-18.054s-6.803 4.299-11.055-1.433-17.575-32.381-17.575-32.381-3.685-8.598 4.536-12.323l-0.851-28.943z"/><path d="m24.099.091c0,0 1.701-.571 4.818,1.147s3.118,3.15 3.118,3.15l.284,19.775c0,0-.851,1.147-1.984,2.291-1.134,1.146-4.819,2.867-5.387,1.72-.565-1.145-.849-28.083-.849-28.083z"/><path d="m48.401 73.058 6.312-3.332s1.417-0.285 3.684 1.146c2.268 1.436 14.174 10.893 14.174 10.893s1.984 1.719 1.417 3.725-1.984 6.305-1.984 6.305l-23.603-18.737z"/></svg>');

Man sieht, dass die Grafik als Hintergrundbild über CSS integriert wird. Nun packen wir den Code in unserer ::before-Bereich und richten das Hintergrundbild noch passend aus:

header a[href^="tel:"]::before {
    position: absolute;
    content: '';
    left:0;
    top:10%;

    background-image: url('data:image/svg xml;utf8,<svg enable-background="new 0 0 74.089 99.818" viewBox="0 0 74.089 99.818" xmlns="http://www.w3.org/2000/svg"><path d="m21.547 0.091s-21.827 0.287-21.544 20.059 4.253 37.255 10.773 46.998 23.242 35.248 42.236 32.67c0 0 9.355-2.007 16.44-6.593l-22.96-18.054s-6.803 4.299-11.055-1.433-17.575-32.381-17.575-32.381-3.685-8.598 4.536-12.323l-0.851-28.943z"/><path d="m24.099.091c0,0 1.701-.571 4.818,1.147s3.118,3.15 3.118,3.15l.284,19.775c0,0-.851,1.147-1.984,2.291-1.134,1.146-4.819,2.867-5.387,1.72-.565-1.145-.849-28.083-.849-28.083z"/><path d="m48.401 73.058 6.312-3.332s1.417-0.285 3.684 1.146c2.268 1.436 14.174 10.893 14.174 10.893s1.984 1.719 1.417 3.725-1.984 6.305-1.984 6.305l-23.603-18.737z"/></svg>');
    height: 80%;
    width: 100%;
    background-repeat: no-repeat;
}

Nicht ganz unwichtig ist, dass die Hintergrundgrafik nur einmal ausgegeben wird – daher background-repeat: no-repeat;

Vorteile von SVG-Grafiken

Die Grafik skaliert automatisch mit und sieht in jeder Größe immer sauber aus. Einfach einmal probieren und im Browser den Zoom einschalten. Dann die Telefonnummer über font-size: 3em; größer ausgeben lassen. Und dann sich freuen, wie einfach die Welt sein kann.