@@Robert B. > ~~~css > a[href^="tel:"]:before { > content: '☎ '; > } > ~~~ Besser: ~~~css,good a[href^="tel:"]::before { content: '☎ '; content: '☎ ' / ''; } ~~~ `::` für Pseudo-Elemente. (Vorgestern im [Adventskalender](https://forum.selfhtml.org/advent/2023).) Und Browser/Screenreader, die die zweite `content`-Zeile verstehen, lesen das Telefon-Icon nicht mit vor. (Die es nicht verstehen, ignorieren die Zeile.) --- > ~~~html > <p><a href="tel:+49123456789">0123 456 789</a> anrufen</p> > ~~~ Wenn man da Leerzeichen (und keine NBSP) zwischensetzt, sollte man mit CSS sicherstellen, dass [kein Zeilenumbruch](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) innerhalb der Telefonnumer erfolgen kann. --- > ~~~css > 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. 🖖 Живіть довго і процвітайте {:@uk} -- *Ad astra per aspera*{:@la}

@@Robert B. > ~~~css > a[href^="tel:"]:before { > content: '☎ '; > } > ~~~ Besser: ~~~css,good a[href^="tel:"]::before { content: '☎ '; content: '☎ ' / ''; } ~~~ `::` für Pseudo-Elemente. (Vorgestern im [Adventskalender](https://forum.selfhtml.org/advent/2023).) Und Browser/Screenreader, die die zweite `content`-Zeile verstehen, lesen das Telefon-Icon nicht mit vor. (Die es nicht verstehen, ignorieren die Zeile.) --- > ~~~html > <p><a href="tel:+49123456789">0123 456 789</a> anrufen</p> > ~~~ Wenn man da Leerzeichen (und keine NBSP) zwischensetzt, sollte man mit CSS sicherstellen, das [kein Zeilenumbruch](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) innerhalb der Telefonnumer erfolgen kann. --- > ~~~css > 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. 🖖 Живіть довго і процвітайте {:@uk} -- *Ad astra per aspera*{:@la}

@@Robert B. > ~~~css > a[href^="tel:"]:before { > content: '☎ '; > } > ~~~ Besser: ~~~css,good a[href^="tel:"]::before { content: '☎ '; content: '☎ ' / ''; } ~~~ `::` für Pseudo-Elemente. (Vorgestern im [Adventskalender](https://forum.selfhtml.org/advent/2023).) Und Browser/Screenreader, die die zweite `content`-Zeile verstehen, lesen das Telefon-Icon nicht mit vor. (Die es nicht tun, ignorieren die Zeile.) --- > ~~~html > <p><a href="tel:+49123456789">0123 456 789</a> anrufen</p> > ~~~ Wenn man da Leerzeichen (und keine NBSP) zwischensetzt, sollte man mit CSS sicherstellen, das [kein Zeilenumbruch](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) innerhalb der Telefonnumer erfolgen kann. --- > ~~~css > 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. 🖖 Живіть довго і процвітайте {:@uk} -- *Ad astra per aspera*{:@la}