Font Awesome 7 w DXPR Builder.

DXPR Builder aktualizuje dołączone ikony Font Awesome Free z wersji 6.7.2 do 7.3.1. Strony działają dalej bez żadnych edycji: każda ikona na zapisanej stronie nadal się renderuje, w tym samym rozmiarze i pozycji. Same ikony są przerysowane, więc wyglądają nieco inaczej. Ta strona pokazuje zmianę i wymienia nieliczne przypadki wymagające sprawdzenia po aktualizacji.

Co zmienia się na twoich stronach

• Nowe wzory ikon. Font Awesome 7 przerysowuje ikony cięższymi, bardziej okrągłymi kształtami. Ikony Regular (konturowe) dostają grubsze linie. Logo marek prawie bez zmian.
• Ten sam układ. Font Awesome 7 nadaje domyślnie każdej ikonie stałą szerokość, co przesunęłoby wąskie ikony w prawo. DXPR Builder zachowuje zachowanie Font Awesome 6 na swoich stronach i w edytorze, więc ikony zachowują pozycję i odstępy. Kilka przerysowanych ikon jest nieco węższych, na przykład house i truck. Ikony z klasą fa-fw, na przykład linki społecznościowe, zachowują stałą szerokość jak wcześniej.
• Te same nazwy klas. Zapisane strony zachowują swoje klasy ikon, na przykład fas fa-house. Klasy z Font Awesome 4 i 5 działają dalej przez style zgodności, które wciąż obejmują te same 464 stare nazwy.

Przed i po

Każdy kafelek pokazuje jedną ikonę dwukrotnie. Szara ikona po lewej to Font Awesome 6.7.2; czarna ikona po prawej to Font Awesome 7.3.1.

Nowe ikony

Selektor ikon wymienia teraz 1992 darmowe ikony, zamiast 1895.

103 nowe ikony to między innymi logo marek, na przykład Claude, Copilot, Gemini, Fediverse, Codeberg i Forgejo, oraz znaki zodiaku.

Ikony o zmienionych i usuniętych nazwach

Pięć ikon ma nowe nazwy. Strony używające starych nazw nadal pokazują ikonę, ponieważ Font Awesome 7 wciąż je akceptuje. Selektor ikon oferuje tylko nowe nazwy.

Jedna ikona opuszcza darmowy zestaw: vector-square. Font Awesome 7 oferuje ją tylko w płatnej edycji Pro, więc strona używająca fa-vector-square nie pokazuje ikony po aktualizacji. Zastąp ją darmową ikoną, na przykład draw-polygon albo object-group.

Co zostaje bez zmian

• Licencja. Font Awesome Free zachowuje te same warunki. Ikony używają CC BY 4.0, czcionki SIL OFL 1.1, a kod MIT.
• Nazwy bibliotek. Biblioteka Drupala zachowuje swoją nazwę maszynową, dxpr_builder/elements.font_awesome_6_free, ponieważ odnoszą się do niej zapisane strony i własny kod. Wczytuje teraz Font Awesome 7.
• Wsparcie przeglądarek. Font Awesome 7 dostarcza tylko czcionki WOFF2. Każda przeglądarka wspierana przez DXPR Builder czyta WOFF2.

Sprawdź swoją witrynę po aktualizacji

1. Przeszukaj treść pod kątem fa-vector-square i zastąp jak wyżej.
2. Sprawdź własny CSS motywu rysujący ikony Font Awesome samodzielnie. Font Awesome 7 zmienia nazwy swoich czcionek na „Font Awesome 7 Free” i „Font Awesome 7 Brands”. CSS ustawiający font-family na „Font Awesome 6 Free” albo „Font Awesome 6 Brands” wraz z punktem kodowym content przestaje pokazywać ikonę. Użyj nowych nazw albo właściwości własnych --fa-family-classic i --fa-family-brands dostarczanych przez Font Awesome 7.
3. Sprawdź kod motywu polegający na sr-only. Font Awesome 6 definiowało klasę sr-only, a Font Awesome 7 nie. Tekst ukryty przez motyw za jej pomocą staje się widoczny. Motywy Bootstrap 5 mogą zamiast tego użyć visually-hidden.
4. Sprawdź ikony motywu poza treścią DXPR Builder. Ikony renderowane przez twój motyw poza stroną DXPR Builder, na przykład w menu albo stopce, podążają za stałą szerokością Font Awesome 7. Aby zachować tam stare szerokości, ustaw --fa-width: auto na ich kontenerze.
5. Wyczyść cache. Uruchom drush cr i wyczyść cache CDN albo reverse proxy, aby odwiedzający otrzymali nowe arkusze stylów i czcionki.

Co dalej?

• Biblioteki ikon: zestawy ikon dostarczane z DXPR Builder i jak je ograniczać na rolę.
• Dodawanie ikony: umieszczaj i styluj ikony na stronie.
• Aktualizacja DXPR Builder: aktualizuj moduł bezpiecznie.
• Dziennik zmian: co zmienia się w każdym wydaniu.