Zamiana czcionek ikon na SVG w kodzie (Elementor)
Trzy ikony narysowane przez Font Awesome mogą pobrać całą czcionkę ikon o rozmiarze 80 KB lub więcej, często z kilkoma arkuszami stylów. Opcja Zastąp czcionki ikon wbudowanym SVG (Elementor) zamienia te ikony na SVG w kodzie i usuwa pliki czcionek ze stron, które ich już nie potrzebują. Jest domyślnie wyłączona i wymaga Elementora, ponieważ rysunki pochodzą z jego własnych plików.
Włączanie
- Otwórz Baza Helper > Pamięć podręczna i optymalizacja.
- Zaznacz Zastąp czcionki ikon wbudowanym SVG (Elementor). Opcja znajduje się na liście ustawień, nad Naprawiaj automatycznie znaczniki dostępności.
- Wyczyść pamięć podręczną stron, aby strony już zapisane w cache zostały wygenerowane ponownie z nową opcją.
Jak to działa
- Każda gotowa strona jest odczytywana podczas renderowania, a wynik trafia do pamięci podręcznej stron.
- Pusta ikona Font Awesome 5 (pełna, konturowa lub markowa) albo ikona Elementora (eicon) zamienia się w SVG w kodzie, zbudowany z rysunków dostarczanych przez Elementora. Pozostałe atrybuty i klasy zostają bez zmian.
- Ikona, którą motyw rysuje w CSS za pomocą pseudoelementu z kodem Font Awesome 5 lub 6, zamienia się w maskę SVG z tym samym rysunkiem.
- Gdy na stronie żadna ikona nie wymaga już czcionki ikon, ze strony usuwane są arkusze stylów czcionek ikon, wstępne ładowanie czcionek oraz skrypt zgodności Font Awesome 4.
- Każda strona jest oceniana osobno. Skanowanie całej witryny nie jest potrzebne, a nowe treści są obsługiwane automatycznie.
Co nadal korzysta z czcionki
Strona zachowuje czcionki ikon, jeśli nadal ma ikonę, której wtyczka nie potrafi narysować:
- Nazwy z Font Awesome 4, na przykład klasa fa z nazwą FontAwesome.
- Klasy rozmiaru, obrotu i animacji, na przykład fa-2x, fa-spin i fa-fw.
- Nazwy ikon, których wtyczka nie zna.
- Czcionka ikon zadeklarowana przez Twoją własną regułę @font-face w motywie.
Sprawdzenie strony po włączeniu
Sprawdź akordeony, listy ikon, menu i ikony mediów społecznościowych. Ikony wpisane bezpośrednio w arkusz stylów motywu, których wtyczka nie potrafi odczytać, pozostają bez zmian, dlatego sprawdź je również na stronie.
Dlaczego to ważne
Strona z trzema ikonami Font Awesome zwykle ładuje czcionkę o rozmiarze 80 KB lub więcej oraz kilka plików CSS. Rysowanie tych ikon jako SVG usuwa to pobieranie na stronach, na których nic innego nie wymaga czcionki.
