awesome lokal verwenden

[flor62]

Guten Tag liebe Experten,

ich habe mich etwas in html, css und js eingearbeitet. Herausgekommen ist eine HTML-Seite (mit css und js ohne php), die einen MP3-Player enthält, mit dem ich im lokalen Netzwerk meine mp3-Dateien abspielen kann. Die Seite soll auch nicht ins Netz, sondern ausschließlich lokal verwendet werden.
Soweit funktioniert auch alles wie gewünscht.

Den js-Player dazu habe ich aus dem Netz geholt. Der Player verwendet Fonts und Symbole (svg-Dateien) von awesome. Diese werden wohl immer zur Laufzeit aus dem Internet geladen. Nun habe ich das ganze awesome-Paket und die wenigen (ca. 10) benötigten svg-Dateien einzeln in einem separaten Ordner lokal gespeichert, damit soll das Ganze tatsächlich ohne Internetzugang lauffähig werden.

Aber dann werden die Button-Symbole nicht dargestellt. Die Funktionen sind da, aber eben ohne Symbol.
Ich vermute die (svg)Symbole werden in diesen beiden Dateien definiert:
font-awesome.css
font-awesome-min.css
Dort ist z.B. für das MUSIC-Symbol der folgender Original-Eintrag zu finden:
.fa-music:before{content:"\f001"}
Den Eintrag habe ich auf den lokalen Pfad der entsprechenden svg-Datei geändert:
.fa-music:before{content: url('..\svg\music-solid.svg')}
Leider ohne Erfolg.

Ich hatte auch die Vermutung, dass das Symbol vielleicht in schwarzer Farbe auf schwarzen Grund dargestellt wird , deshalb habe ich diesen Eintrag angepasst:
Original: .fa-inverse{color:#fff}
Angepasst: .fa-inverse{color:#000}
Aber auch das hatte keinen sichtbaren Effekt.

Habt Ihr noch einen Tipp für mich?
Gruß - Rolf

 

[Sempervivum]

Hallo Rolf und willkommen im Forum!
Selber benutze ich ich Fontawesome nicht und als ich es vom CDN einbinden wollte, sollte ich meine Emailadresse eingeben. Davon habe ich erst Mal abgesehen. Ich habe es dann mit einem SVG getestet, das ich gerade zur Hand hatte und meine Vermutung hat sich bestätigt: Verwende ich Backslahses im Pfad, bekomme ich einen Fehler 403. Ersetze ich sie durch normale Slashes wird das SVG geladen und angezeigt:

        /* #test-fontawesome:before {
            content: url(images\bird-cells.svg)
        } */
        #test-fontawesome:before {
            content: url(images/bird-cells.svg)
        }

Das auskommentierte funktioniert nicht, das aktive schon