FontAwesome: Grafiken werden nicht angezeigt und nicht eingeblendet

Bei einem Webprojekt hatte ich das Problem, dass einige neue Grafiken aus der FontAwesome-Icon-Sammlung einfach nicht geladen wurden. Dies ließ sich beheben, führte aber leider zu einem weiteren Problem. Das Bootstrap-Template, welches ich genutzt habe, sah eigentlich einen netten Fade-In-Effekt der Icons beim Herunterscrollen vor. Das funktionierte dann auch nicht mehr.

FontAwesome-Problem

Wenn das Icon nicht geladen werden kann, wird stattdessen ein solcher Platzhalter (siehe Bild rechts) angezeigt. Man kann es je nach Größe gar nicht erkennen, aber wenn man in diesen Platzhalter hereinzoomt, sieht man einen „internen Code“ (?!) den anscheinend jede Grafik im FontAweosme-Iconset bekommt. Diese hat für einen selber keine Bedeutung, da man diese für nichts braucht. Es ist aber ein erstes Anzeichen dafür, dass das entsprechende Icon einfach nicht geladen werden kann, weshalb stattdessen dieser Platzhalter ausgegeben wird.

Um die fehlenden Grafiken zu bekommen, sollte man erst einmal prüfen, ob die Grafik überhaupt im entsprechenden Ordner vorhanden ist. Denn wenn man eine alte FontAwesome-Version nutzt, dann fehlen dort logischerweise Icons, die irgendwann nach der Veröffentlichung ihren Weg in das Icon-Set gefunden haben.

Ebenfalls muss man auf den „Typ“ des Icons achten und entsprechend diesem die korrekte CSS-Klasse verwenden. Bis Version 4 gab es nur eine einheitliche Klasse. Beispielsweise gibt es die Typen solid, regular und brand. So muss man beim Wechsel auf eine neue Version darauf achten, die Klassen anzupassen.

Die Klasse „fas“ für solid:

Die Klasse „far“ für regular:

Die Klasse „fab“ für brand:

Weitere Infos direkt von FontAwesome: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Wichtig: Ebenfalls muss man darauf achten, dass nur ein Teil aller Icons frei nutzbar ist und dass bestimmte Icon-Typen, wie Duotone, nur in der Pro-Version nutzbar sind!

 

Sind die Icons jedoch vorhanden und auch die CSS-Klassen korrekt zugewiesen, so muss man noch prüfen, ob man die FontAwesome-JavaScript-Datei eingebunden hat! In meinem genutzten Bootstrap-Template war dies nicht der Fall. Zwar aus gutem Grund (wie das weiter unten beschriebene Problem zeigt), aber ohne wurden die benötigten Icons nicht angezeigt. Auch nicht bei einem Wechsel von FontAwesome Version 4 zu Version 5.

Erst nachdem ich folgende Zeile hinzugefügt habe, wurden die Grafiken angezeigt:

Die Icons, die im von mir genutzten Bootstrap-Template vorgegeben waren bzw. die ich bereits vorher genutzt habe, wurden allerdings bisher immer ohne Probleme angezeigt. Deshalb konnte ich den Zusammenhang zur nicht eingebundenen JavaScript-Datei nicht so richtig verstehen. Ich vermute aber, dass alte Grafiken einfach anders behandelt worden sind und nur für die neuen Icons die Ersetzung des entsprechenden Tags im html-Code durch das Skript nun unumgänglich ist. Warum auch immer dies der Fall ist, da es sich bei allen Dateien um SVGs handelt. Wahrscheinlich ist das Handling einfach komplett geändert worden und nur für die „alten“ Dateien funktioniert die direkte Einbindung im httml-Code.

Etwas Praktisches am Rande: Um passende Icons zu finden, gibt es ein nettes Cheatsheet von FontAwesome unter diesem Link: https://fontawesome.com/cheatsheet – Nur leider kann man hier nicht erkennen, welches Icon aus welcher FontAwesome-Version stammt. Allerdings kann man hier filtern, welche Icons „frei“ verfügbar sind.

 

Fade-In-Problem

Durch die Nutzung des FontAwesome-JS wurde dann allerdings eine Funktionalität des JS-Codes des Templates ausgehebelt. Denn durch das FontAwesome-Skript werden nun die „i“-Tags mit den zugewiesenen FontAwesome-Klassen im Browser dann durch die entsprechenden SVG-Grafiken ersetzt. Dies betrifft dann z. B. folgenden Tag:

Das ist an sich nicht schlimm, führt aber dann zu folgendem Problem:

Weil der Tag ersetzt wird, kann dieser dann nicht mehr per JavaScript angesprochen werden! Deshalb ist dann eine Änderung dieses Objekts durch eigenen JavaScript-Code leider einfach nicht mehr möglich! Denn das ursprüngliche Tag existiert dann im Browser einfach gar nicht mehr.

Den Icons waren aber noch Klassen wie „sr-icon-1“ im folgenden Beispiel zugewiesen, um diese per JavaScript „effektvoll“ erscheinen zu lassen:

 

Aus genau diesem Grund haben die Ersteller des von mir genutzten Bootstrap-Templates dann wohl auf die Einbindung des FontAwesome-Skripts bereits im Vorfeld verzichtet. Also war eigentlich die nicht ganz vollständige FontAwesome-Integration der Übeltäter. Leider bringt dies nun rein gar nichts, wenn man die dann nicht aufrufbaren Icons aber nutzen möchte oder muss und auch gleichzeitig auf den Effekt nicht verzichten möchte.

Meine recht einfache Lösung, die eigentlich für die meisten Probleme herhalten muss: Einfach ein weiteres Tag als Wrapper um die Icons bauen und diesem die entsprechende Klasse zuweisen, die das Fade-In oder für einen anderen Effekt betreffend des Icons genutzt wird.

Das sieht dann z. B. so aus:

Man sollte dafür auf jeden Fall ein Div als Wrapper nutzen! Ich hatte es auch mit einem span-Tag versucht, aber dann funktionierte der Effekt nicht ganz richtig.

 

Fazit

Wäre das Skript von FontAwesome von Anfang an eingebunden worden und nicht versucht worden auf dieses zu verzichten, dann hätte es dieses Problem gar nicht erst gegeben. Naja so lernt man wieder etwas dazu. In diesem Fall wie die Einbindung der Icons letzt endlich abläuft.

 

Schreibe einen Kommentar