Font Awesome 6

Ich glaube, mit FA6 ist das lizenztechnisch schwieriger geworden. Irgendwas war da, komme nur gerade nicht drauf.

Zusätzlich würde ich es begrüßen, wenn dies kommen sollte, dass man mit einem Select-Field zwischen den FA-Stilen (pro WSC-Stil) wechseln kann. Derzeit gibt es ja Solid, Regular, Light, Duotone (für Pro-Nutzer)

Quote from Alexander Ebert

die Verwendung von Icons über CSS ist nicht möglich.

Ist das sinnvoll? An vielen Stellen, wenn es um Anpassungen geht, werden Icons mal eben per CSS irgendwo angezeigt. Gerade für Benutzer, die das System nicht tiefgreifend kennen. Wie soll hier die Alternative aussehen?

verstehe ich das richtig, das so ein Codeschnipsel

.messageGroupStarter .username span::after {
    font-family: FontAwesome;
    content: "\f040";
    margin-left: 5px;
}

dann nicht mehr möglich ist?

Und was wäre die alternative?

Wird es eigentlich eine Möglichkeit geben, Gebrauch von seiner Pro-Mitgliedschaft bei FA zu machen? Das wäre das Sahnehäubchen.

Und der Frage von netrix schließe ich mich an. Nicht selten kommt es vor, dass man evtl. auch Mal ein bestehendes Icon Überschreiben will. Das möchte ich ungerne per JS machen wollen.

Also ist es am Ende nach wie vor eine Font, die eingebunden wird? Weil wenn ja, müsste man doch dennoch auf diese Font per CSS zugreifen können?

Quote from Alexander Ebert

Genauso gut kann man auch Elemente ad hoc per JavaScript einfügen, damit lassen sich Icons auch barrierefrei realisieren. Das Einfügen per CSS-Pseudo-Element ist sehr bequem, aber war ehrlicherweise schon immer die schlechteste aller Formen.

Zielgruppe aus den Augen verloren? Icons sollte jeder anpassen können.

Quote from Geronimo

Zielgruppe aus den Augen verloren? Icons sollte jeder anpassen können.

Zur Not gibts für jeden den Javascript Einsteigerkurs bei Udemy zur Version 6.0 dazu

Quote from Black Rider

Also ist es am Ende nach wie vor eine Font, die eingebunden wird? Weil wenn ja, müsste man doch dennoch auf diese Font per CSS zugreifen können?

Der Meinung bin ich auch oder sind besondere Schritte nötig, den Unicode der FontAwesome Icons als content in Pseudo Elementen nutzen zu können?

Hallo,

ist denn komplett FontAwesome 6 implementiert? Also zumindest die Free Icons?

Wenn ich {icon name='discord'} probiere, steht dann in der Browser-Konsole: TypeError: The icon 'discord' is unknown or unsupported.

Bei FontAwesome finde ich das Icon allerdings: https://fontawesome.com/icons/discord

Edit: das type='brand' hat gefehlt. Habe mal wieder die Doku nichts bis zum Ende gelesen.

Danke, habe ich kurz vor deiner Antwort in der Doku gesehen und meinen Beitrag bearbeitet

Aber machen 105 kB heutzutage überhaupt noch was aus?

Quote from Alexander Ebert

Mit einem günstigen Smartphone via 3G und 10kB-Inklusivvolumen freust du dich hingegen über jede Einsparung, ohne dabei Einbußen hinnehmen zu müssen.

Äh, ist das ein Schreibfehler ? 10 kB Inklusivvolumen? Oder eher 10 GB? Ob 10 GB günstig wo zu bekommen sind (Telefonica denke ich?) weiß ich aber nicht.

Ich finde es sehr bezeichnend, dass explizit Feedback zur Dokumentation erwünscht ist, aber offensichtlich nicht zur Implementierung selbst. Das spricht bereits Bände. Denn gerade die Implementierung ist für mich wesentlich wichtiger als irgendeine Dokumentation darüber. Und da finde ich es schade, wie selbige vonstatten ging.

Da immer noch eine Webfont eingebunden wird, halte ich für eine Fehlentscheidung. Das passt aber in das Bild, wie ihr generell Dinge implementiert: möglichst alles beim ersten Seitenaufruf laden, was möglicherweise vielleicht irgendwie irgendwann irgendwo mal verwendet wird. Warum das nicht sinnvoll ist, hatte ich bereits vor geraumer Zeit hier angemerkt. Gerade für eine solche Neuimplementierung wäre das eine Chance gewesen, sich an aktuellen Best Practices zu orientieren, so auch bei den Icons.

Wenn ich die Schriften (fa-regular-400.woff2 und fa-solid-99.woff2) der Free-Icons per Gzip lade, habe ich immer noch eine Dateimenge von 176 KiB. Als Vergleich dazu, wenn ich alle SVGs per Gzip lade, komme ich auf 787 KiB. Ja, das ist in der Gesamtheit mehr, aber wie viele unterschiedliche Icons werden pro Seite angezeigt? Vielleicht 50, wenn es wirklich viele sind. Dann wären wir bei ~ 450 Byte Durchschnittsgröße pro Icon immer noch bei 22,5 KiB und damit weit unter der Größe der Schriften. Warum wird das nicht so umgesetzt? Das ist für mich unverständlich.

Vor allem ist es für mich unverständlich, dass ihr genau solch ein System für die Brand Icons verwendet, aber nicht generell. Warum? Ihr baut ein System, das dynamisch Icons ausgeben kann, aber benutzt das nur für einen Teil der Icons, was aber insgesamt zu einem geringeren Datenverbrauch beim Seitenaufruf führen würde.

Und wie sieht es aus, wenn man Pro-Icons verwenden will? Muss man sich selbst dann darum kümmern, dass die Free-Icons nicht mehr geladen werden? Wenn ja, wie macht man das? Geht das überhaupt?

Ich freue mich auch schon auf die ersten Berichte, wenn das JavaScript nicht schnell genug geladen wird und Icons dementsprechend erst nach kurzer Zeit angezeigt werden.

Und generell: warum werden hier Fragen nur selektiv beantwortet? Weil nur Feedback zur Dokumentation erwünscht ist? So kommt es mir zumindest vor.

Warum ich mich an so etwas so aufhalte: Gerade im Hinblick darauf, das Stilsystem auch grundlegend zu überarbeiten, verringern solche Aktionen, die für mich nicht nachvollziehbar und zumindest performancetechnisch nicht an heutige Best Practices angelehnt sind, meine Hoffnung auf ein Stilsystem, das auf Augenhöhe mit anderen Lösungen ist und auch performancetechnisch herausragend, dramatisch.

Aber auch Feedback zur Dokumentation soll es geben:

Quote

It is strongly discouraged to apply CSS classes to icons themselves.

Warum? Es gibt dort keinerlei Begründung und ich sehe auch keinen Grund, warum ich bestimmten Elementen keine Klassen geben soll, wenn ich das für richtig halte. Die Alternative, noch ein Element drumrum zu bauen, halte ich für umständlich und nicht sinnvoll. Warum hier die Benutzer explizit einengen, nur weil man es selbst so handhaben will? Das sind Design-Entscheidungen, die ich nicht mitgehe.

Warum dürfen auch nur bestimmte Größen angegeben werden? Warum darf man das nicht selbst definieren, wie groß man ein Icon haben möchte? Und was, wenn man es an irgendeiner Stelle wirklich so braucht? Dann muss man da umständlich drumrum arbeiten.