Fonty ikonowe (ang. icon fonts) to zapisane w jednym pliku zestawy ikon i glifów, które można wykorzystywać tak jak standardowe fonty z literami, którymi posługujemy się podczas pisania tekstu.

W tym artykule dowiesz się kiedy stosować fonty ikonowe jakie są ich największe zalety ale też dlaczego nie warto z nich korzystać jeżeli wykorzystamy zaledwie kilka znaków w paru miejscach na stronie internetowej.

Fonty ikonowe jest jak pismo obrazkowe w nowoczesnych interfejsach graficznych. Może stanowić użyteczny nośnik informacji oraz służyć jako nieco powierzchowna ale też czasami użyteczna dekoracja tekstu, która ułatwi i uatrakcyjni czytanie:

Fonty ikonowe w praktyce

Korzystanie z web-fontów ikonowych polega na dołączeniu pliku ze stylem CSS, powiązanym plikiem z fontem (lub niepoprawnie: „z czcionką”), która raz wczytując się z serwera będzie mogła być wykorzystywana wielokrotnie w interfejsie i treści strony, sklepu czy aplikacji internetowej.

Chcąc wykorzystać font-awesome skorzystamy wówczas z takiego tagu inline: <i class=”fa fa-heart”></i> Ten wydawałoby się pusty tag wydrukuje nam symbol serca.

Informacja dla nerdów: Technicznie działa to tak, że każdemu znakowi jest przyporządkowywany znak unicode a tag inline jest stylowany za pomocą pseudo selectora :after, który za pomocą właściwości content wpisuje kod konkretnego znaku po wystąpieniu tego tagu.

Przykłady czcionek ikonowych

Istnieje wiele gotowych czcionek (lub poprawnie: fontów) z ikonami, które można zastosować na własnej stronie internetowej.

Do najpopularniejszych i najczęściej wykorzystywanych zaliczymy:

Material Icons

Link: https://material.io/tools/icons/?icon=account_circle&style=baseline

Font Awesome

Czytaj więcej o tej bibliotece w osobnym artykule: Font Awesome – co to jest, czy warto używać?

Link: https://fontawesome.com/

Themify Icons

Link: https://themify.me/themify-icons

Simple Line Icons

Link: https://iconify.design/icon-sets/simple-line-icons/

Zalety fontów ikonowych

Przede wszystkim: skalowalność. Dzięki temu że wszystkie znaki znajdują się w jednym pliku, po dołączeniu można z nich korzystać do woli.

Wymuszony jednolity styl wszystkich ikon automatycznie nadaje ład i estetykę.

Polepsza doświadczenia użytkownika. Przełamując bloki tekstu tekst się lepiej skanuje a interfejsy wykonane przy ich pomocą są bardziej czytelne i zachęcają do interakcji.

Możliwość łatwiej transformacji i animacji ikon może nadać dynamizmu stronom i aplikacjom.

Prostota użycia. Wystarczy użyć prostego znacznika in-line. Istnieje wiele serwisów, w których łatwo wyszukamy nazwę interesującej nas ikony.

Wady fontów ikonowych

Kiedy chcemy wykorzystywać je w zaledwie paru miejscach, obniżają prędkość działania strony i pogarszają wydajność renderowania (ponieważ przeglądarka najpierw musi ściągnąć styl z fontem a następnie może renderować ikony).

Powtarzalność ikon i wyłonienie się popularnych setów, doprowadza do sytuacji, w której widzimy jedne i te same ikony. Z jedenj strony to plus bo ikony można

Używane nieumiejętnie mogą mylić użytkowników. Niektóre ikony tak jak egipskie hieroglify mają konkretne znaczenie. Używanie ich niezgodnie z ich oryginalnym przeznaczeniem może nie być najlepszym pomysłem.

Najczęstszą wpadką jest przykładowo używanie logo dribbble jako ikony strony internetowej (ponieważ osoby stosujące to myślą że to kula ziemska) tymczasem jest to piłeczka tenisowa 🙂

Kiedy warto z nich korzystać?

  • W dużych aplikacjach
  • Kiedy chcemy wykorzystać wielokrotnie tę samą ikonkę na wielu podstronach
  • kiedy używamy wiele razy tej samej ikony na jednej podstronie

Alternatywa dla fontów ikonowych

Bardzo dobrą alternatywą dla fontów ikonowych jest ich odpowiednik zapisany w formacie SVG. Jest to wyjątkowo użyteczne kiedy chcemy korzystać z konkretnych ikon sporadycznie (np. jako branding social mediów). Poniżej przykład z mojej strony:

Zastosowałem SVG ponieważ używam ich tylko tutaj na stronie kontaktowej. Ładowanie kilkuset kilobajtów tylko po to by wykorzystać 0,03 % całego zestawu ikon jest marnotrawstwem zasobów. To samo tyczy się czterech ikonek na stronie głównej. Zamiana tych znaków na identycznie wyglądające odpowiedniki SVG w końcu umożliwiło uzyskać 100% w słynnym teście PageSpeed Insights.

Ikony w formacie SVG znajdziesz tutaj:

Aby osiągnąć efekt większej wydajności nie należy dołączać pliku SVG w kodzie strony tak jak obrazka tylko wkleić cały kod SVG w ciało strony. To dlatego nie poleca się korzystać z tej techniki kiedy ikon będzie dużo. Spowoduje to zbyt duży bałagan w kodzie. O tym jak zamienić fonty ikonowe na SVG odsyłam do artykułu koleżanki:
https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

Więcej informacji o tej technice i porad jak optymalizować fonty celem przyspieszenia ładowania strony znajdziesz w specjalnym artykule: optymalizacja czcionek na stronach WWW.

Warto też pamiętać, że każdy standardowy font, który wykorzystujemy w przypadku tekstu ma zakres znaków specjalnych, które w niektórych sytuacjach mogą posłużyć dokładnie w takim samym celu w jakim wykorzystujemy fonty ikonowe. Sprawdź tabelę: znaki specjalne HTML i sprawdź jak łatwo można się nimi posługiwać w kodzie HTML za pomocą encji i w stylach CSS za pomocą Unicode.

Podsumowanie

Fonty z ikonami to zdecydowanie spore ułatwienie tworzenia interfejsów, które może się przydać w dużych projektach. Niestety są nadużywane na wielu zwykłych stronach uniemożliwiając idealną optymalizację wydajnościową. Kiedy używamy kilku znaków warto zastosować odpowiednik SVG, który nie ładuje wszystkich znaków i powiązanych stylów CSS.

Źródła

https://bulldogjob.pl/articles/626-svgs-vs-icon-fonts-the-battle-without-resolution

https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/

https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

Oceń artykuł na temat: Fonty z ikonami dla stron WWW (zalety i wady)
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 14