[gelöst] Font-Awesome "brands" Icons funktionieren nicht?

[tobi73]

Hallo zusammen,

Sämtliches Probieren, Googeln und die Suchfunktion haben mich nicht weitergebracht, also doch der Hilferuf im Forum:

Ich versuche gerade verzweifelt Icons der Font-Awesome-"Brands" Serie in einem Push-Widget zu nutzen (konkret den Icon "fa-napster"). Ohne Erfolg. Scheinbar sämtliche (zumindest hab ich einige durchprobiert) Brand-Icons funktionieren bei mir nicht. Es wird nur das Rechteck mit dem vierstelligen Hex-Code für das Icon angezeigt (F3D2). Kein Problem tritt auf mit den Icons aus der solid-900 Serie.

Ich verwende die aktuelle FTUI Installation (Version 2.6). Darin inkludiert sind ist Font Awesome Free 5.3.1. Soweit ich sehe, liegen alle Dateien für die Brand-Icons (.eot  .svg  .ttf. .woff .woff2) im fonts-Verzeichnis. Gibt es mit den Brands-Icons ein grundsätzliches Problem? Sind die nur in 400er Größe verfügbar (so zumindest interpretiere ich die 400 in den Dateinamen)? Könnte es daran liegen?

Um Hilfe wäre ich wirklich dankbar!
Gruß Tobi

[setstate]

Das Problem kann ich in der icons_table.html nachvollziehen.

Die Brand-Icon brauchen eine andere fa-Klasse fix. .fab anstatt .fa

So kann man ein Icon erzeugen

Code Auswählen Erweitern


<div class="fab fa-napster"></div>


Ich müsste die Button-Klasse umbauen, damit bei gesetztem "fab" kein "fa" automatisch angehangen wird.

[tobi73]

Setstate, vielen Dank! Dann lag's ja wenigstens nicht an mir

Fällt dir irgendwie ein einfacher Workaround oder Hack ein, ein FA-Brands-Icon als Icon eines Buttons-Widgets (push oder switch) zu bekommen? Außer dem Neugenerieren einer Schriftart via IcoMoon-App und Einbinden in die css (was mir trotz aller Bemühung bislang nicht gelungen ist  )?

Es ist nicht lebenswichtig, aber schön wäre es wenn's irgendwie ginge...

Danke & Gruß Tobi 

[setstate]

wenn man, wie FTUI, nicht zwischen fa, fas, fab usw. umschalten will/kann, muss das explizit für die Brand Icons im CSS angeben. Viele solcher Sonderreglungen waren als Migrationshilfe von FA-4 zu FA-5 mit dabei. Napster habe ich jetzt ergänzt.

[tobi73]

Super, vielen Dank, das klappt!

Jetzt hab ich's auch (einigermaßen) kapiert – für eventuell weitere benötigte Brand Icons kann ich mir das dann auch selber in der font-awesome.min.css  anpassen... Muss halt nur aufpassen dass ein Update das nicht zerschießt, aber ich weiß ja jetzt woran's liegt

Das mit dem Erstellen und Einbinden eigener Fonts via IcoMoon muss ich mir aber trotzdem nochmal genauer ansehen – fuchst mich, dass ich das nicht hinbekommen habe...
Danke nochmals für den ultraschnellen Support!

Gruß Tobi

[Tsturm]

Hallo zusammen,

so ganz hab ich es noch nicht verstanden...

Amazon und compact disk funktioniert
- data-icon="fab fa-amazon"
- data-icon="fas fa-compact-disc"

Auf der anderen Seite funktioniert aber nicht
- data-icon="fab fa-playstation"

Ich gehe mal davon aus, das "amazon" und "compact-disk" in ein CSS Sheet eingetragen sind - wie kann ich das für weitere Icons machen (playstation ist im fonts-file wie amazon aufgeführt)? Im font-awesome.min.css finde ich zwar beide Icon-Namen, aber den Unterschied erkenne ich nicht (habe kein font-awesome.css, wo das vielleicht besser erkennbar wäre).

Vg Timmo

[setstate]

es geht auch so, ohne die extra fab, fas Klassen.

data-icon="fa-compact-disc"
data-icon="fa-amazon"

Dass ist so, weil diese auch schon in der Font-Awesome 4 dabei waren. Zu besseren Migration von V4 auf V5 gibt es ein v4-shims CSS File, was ich integriert habe. Damit braucht man kein .fab oder .fas. Das klappt aber bloß bei den Icons, die schon bei V4 dabei waren. Für die neuen Brand-Icon gibt es keine v4-shims.

https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Es nützt auch nichts, wenn man ein fab unter data-icon einfügt: data-icon="fab fa-playstation", weil intern automatisch ein "fa" davor geschrieben wird (war ja mit der V4 ausreichend) und damit das "fab" nicht wirkt. Man müsst eine weitere Logik einbauen: "wenn fab oder fas vorhanden, dann kein fa anfügen", das habe ich aber noch nicht.

Was ich für Tobis Napster gemacht habe: ein Shim in die font-awesome.min.css eingebaut. Das für alle Brand-Icons zu tun, habe ich ehrlich gesagt keine Lust. Wenn das jemand tun will, gerne. Dann übernehme ich das auch ins Repo.

[Tsturm]

thx für die schnelle Antwort...

Shim - ist das der Zusatz in der css ".fa.fa-napster{font-family:"Font Awesome 5 Brands";font-weight:400}" ganz am Schluss?

Wenn das was größeres ist, kann ich auch ohne Leben, das ist jetzt mehr Interesse denn Bedarf...

VG timmo

[setstate]

Genau der Teil. Das müsste für jedes fehlende Brand-Icon rein.