svg Icons vom eigenen Domain-Server einbinden

[Marco]

Hallo liebe Forengemeinde, nachdem ich nun einige Zeit erfolglos damit verbracht habe google und youtube auf der Suche nach einer Antwort zu durchforsten, wende ich mich an dieses Forum. Ich habe auch bereits hier gesucht und leider nicht die Antwort gefunden, die ich suche.

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.

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.

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?

Ich bin für jeden Tipp dankbar.

Vielleicht noch als Anmerkung: Ich bin html/css/js/php-Anfänger.

[Matthias Scharwies]

Hallo, herzlich willkommen bei SELFHTML,

Ich möchte Icons auf meiner Website einbinden, … Dabei handelt es sich um ein Mail- und ein Telefon-Icon.

ok

Leider finde ich nirgens ein Tutorial darüber, wie ich in meinem html/css-Code ein svg-Icon einbinde.

Hier gibt es ein gutes Tutorial: SVG/Tutorials/Icons

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?

entweder als Bild:

<p>
  <img src="telefon.svg">
  <a href="tel:[phone]"> 0123 456 789</a> 
</p>

oder eben wie oben mit inline-SVG, die dann bei :hover ihre Farbe ändern.

Vielleicht noch als Anmerkung: Ich bin html/css/js/php-Anfänger.

Das lässt sich ja ändern!

Herzliche Grüße

Matthias Scharwies

[Robert B.]

Moin Matthias,

<p>
  <img src="telefon.svg">
  <a href="tel:[phone]"> 0123 456 789</a> 
</p>

fehlt dem img-Element nicht noch etwas Alternatives? 😉

<img src="telefon.svg" alt="Telefon">

ergibt ja auch Sinn für Screenreader oder andere assistive Techniken.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

<p>
  <img src="telefon.svg">
  <a href="tel:[phone]"> 0123 456 789</a> 
</p>

fehlt dem img-Element nicht noch etwas Alternatives? 😉

Unbedingt.

Wobei dessen Inhalt kontextabhängig ist: Sowas wie

<p>
  Telefon:
  <img src="telefon.svg" alt="Telefon">
  <a href="tel:[phone]">0123 456 789</a> 
</p>

macht keinen Sinn. Das müsste dann so sein:

<p>
  Telefon:
  <img src="telefon.svg" alt="">
  <a href="tel:[phone]">0123 456 789</a> 
</p>

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

[Gunnar Bittersmann]

@@Matthias Scharwies

Leider finde ich nirgens ein Tutorial darüber, wie ich in meinem html/css-Code ein svg-Icon einbinde.

Hier gibt es ein gutes Tutorial: SVG/Tutorials/Icons

Wobei da am Anfang einiges für dich (Marco) erstmal Irrelevantes steht. Stattdessen kannst du auch das Original lesen.

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

[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!

[Marco]

mega, mega, mega...

Vielen, vielen Dank.

[Robert B.]

Nachtrag: Für SVG-Symbole beachte bitte auch Matthias' Antwort inklusive des Links darin.

[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.

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