Moin Marco, > Ich möchte Icons auf meiner Website einbinden, welche ich zuvor von Feather Icons heruntergeladen habe. Dabei handelt es sich um ein Mail- und ein Telefon-Icon. alternativ kannst du auch Unicode-Zeichen einer Standardschriftart verwenden, z.B. * [✉](https://de.wikipedia.org/wiki/Unicodeblock_Dingbats) [📝📧📨📩🖂🖃🖄🖅🖆](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_piktografische_Symbole) * [✆](https://de.wikipedia.org/wiki/Unicodeblock_Dingbats) [☎☏](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole) [📞📲📳🕻🕽🕾🕿](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_piktografische_Symbole) Die Symbole sind mit den entsprechenden Wikipedia-Artikeln der Unicode-Blöcke verlinkt. > Hintergrund ist, dass ich weder Google-Fonts, Font-Awesome oder sonstige Webfonts nutzen möchte. Bisher nutzte ich Google-Fonts dazu, was ich aber nicht mehr möchte. Die obigen Symbole sind alle in den Standardschriftarten deines Betriebssystems enthalten. Du kannst sie per Copy&Paste von hier übernehmen (dein HTML- und CSS-Editor muss dafür UTF-8 verstehen). Ansonsten stehen bei Wikipedia auch die Unicode-Codepoints. > Leider finde ich nirgens ein Tutorial darüber, wie ich in meinem html/css-Code ein svg-Icon einbinde. > > Bisher sieht das ja z.B. so aus: > > <p><span class="material-symbols-outlined">call</span><a href="tel:+49123456789"> 0123 456 789</a> </p> > > Kann mir jemand einen Tipp geben, wie ich statt der class="material-symbols-outlined" eine svg-Datei (die auf dem Server der Website liegt) einbinde? Ein klassisches Beispiel nur mit HTML, CSS und den Standardschriftarten: ~~~css a[href^="tel:"]:before { content: '☎ '; } ~~~ ~~~html <p><a href="tel:+49123456789">0123 456 789</a> anrufen</p> ~~~ Das sollte im Browser so aussiehen wie ☎ 0123 456 789 anrufen Deine SVG-Datei bekommst du ähnlich eingefügt: ~~~css a[href^="tel:"]:before { content: url(/pfad/zu/telefon.svg)' '; } ~~~ Grundlage ist beide Male der [CSS-Selektor für Teilübereinstimmung](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Teil%C3%BCbereinstimmung) zusammen mit der [CSS-Eigenschaft `content`](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/content). Viele Grüße Robert P.S.: Karl Klammer hat als Unicode-Zeichen 📎 mit dem Code-Point `U+1F4CE` (sic!) überlebt!

Moin Marco, > Ich möchte Icons auf meiner Website einbinden, welche ich zuvor von Feather Icons heruntergeladen habe. Dabei handelt es sich um ein Mail- und ein Telefon-Icon. alternativ kannst du auch Unicode-Zeichen einer Standardschriftart verwenden, z.B. * [✉](https://de.wikipedia.org/wiki/Unicodeblock_Dingbats) [📝📧📨📩🖂🖃🖄🖅🖆](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_piktografische_Symbole) * [✆](https://de.wikipedia.org/wiki/Unicodeblock_Dingbats) [☎☏](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_Symbole) [📞📲📳🕻🕽🕾🕿](https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_piktografische_Symbole) Die Symbole sind mit den entsprechenden Wikipedia-Artikeln der Unicode-Blöcke verlinkt. > Hintergrund ist, dass ich weder Google-Fonts, Font-Awesome oder sonstige Webfonts nutzen möchte. Bisher nutzte ich Google-Fonts dazu, was ich aber nicht mehr möchte. Die obigen Symbole sind alle in den Standardschriftarten deines Betriebssystems enthalten. Du kannst sie per Copy&Paste von hier übernehmen (dein HTML- und CSS-Editor muss dafür UTF-8 verstehen). Ansonsten stehen bei Wikipedia auch die Unicode-Codepoints. > Leider finde ich nirgens ein Tutorial darüber, wie ich in meinem html/css-Code ein svg-Icon einbinde. > > Bisher sieht das ja z.B. so aus: > > <p><span class="material-symbols-outlined">call</span><a href="tel:+49123456789"> 0123 456 789</a> </p> > > Kann mir jemand einen Tipp geben, wie ich statt der class="material-symbols-outlined" eine svg-Datei (die auf dem Server der Website liegt) einbinde? Ein klassisches Beispiel nur mit HTML, CSS und den Standardschriftarten: ~~~css a[href^="tel:"]:before { content: '☎ '; } ~~~ ~~~html <p><a href="tel:+49123456789">0123 456 789</a> anrufen</p> ~~~ Das sollte im Browser so aussiehen wie ☎ 0123 456 789 anrufen Deine SVG-Datei bekommst du ähnlich eingefügt: ~~~css a[href^="tel:"]:before { content: url(/pfad/zu/telefon.svg)' '; } ~~~ Viele Grüße Robert P.S.: Karl Klammer hat als Unicode-Zeichen 📎 mit dem Code-Point `U+1F4CE` (sic!) überlebt!