svg Icons vom eigenen Domain-Server einbinden

[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