svg Icons vom eigenen Domain-Server einbinden

[Gunnar Bittersmann]

@@Robert B.

a[href^="tel:"]:before {
    content: '☎ ';
}

Besser:

a[href^="tel:"]::before {
    content: '☎ ';
    content: '☎ ' / '';
}

:: für Pseudo-Elemente. (Vorgestern im Adventskalender.)

Und Browser/Screenreader, die die zweite content-Zeile verstehen, lesen das Telefon-Icon nicht mit vor. (Die es nicht verstehen, ignorieren die Zeile.)

---

<p><a href="tel:[phone]">0123 456 789</a> anrufen</p>

Wenn man da Leerzeichen (und keine NBSP) zwischensetzt, sollte man mit CSS sicherstellen, dass kein Zeilenumbruch innerhalb der Telefonnumer erfolgen kann.

---

a[href^="tel:"]:before {
    content: url(/pfad/zu/telefon.svg)' ';
}

Wenn man die Farben aus der SVG-Datei verwenden möchte, kann man das tun. Wenn man das Icon einfärben möchte, dann nicht. Dazu müsste das SVG im DOM sein.

🖖 Живіть довго і процвітайте