Marco: svg Icons vom eigenen Domain-Server einbinden

Beitrag lesen

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:+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?

Ich bin für jeden Tipp dankbar.

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

akzeptierte Antworten