svg Icons vom eigenen Domain-Server einbinden

[Robert B.]

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.

• ✉ 📝📧📨📩🖂🖃🖄🖅🖆
• ✆ ☎☏ 📞📲📳🕻🕽🕾🕿

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:[phone]"> 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:

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

<p><a href="tel:[phone]">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:

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

Grundlage ist beide Male der CSS-Selektor für Teilübereinstimmung zusammen mit der CSS-Eigenschaft content.

Viele Grüße
Robert

P.S.: Karl Klammer hat als Unicode-Zeichen 📎 mit dem Code-Point U+1F4CE (sic!) überlebt!