Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Font Awesome – użycie w sposób niestandardowy

4

Znacie Font Awesome (jeśli nie to tutaj link)? Pewnie wielu z Was tak… a jeśli nie to warto się zapoznać. Dla porządku napiszę tylko, że jest to biblioteka pozwalająca dodawać do strony różnego rodzaju ikonki, które są… „awesome” 🙂 Generalnie do renderowania ikonek wykorzystywane są fonty (stąd w nazwie to biblioteki to słowo) oraz CSS, dzięki czemu pięknie się one skalują. Pełna lista dostępnych ikon znajduje się pod tym linkiem.

Standardowe użycie Font Awesome

No dobra, tyle niezbędnego wstępu… Warto jeszcze wiedzieć, że standardowo ikonki dodajemy w taki mniej więcej sposób:

<i class="fa fa-hand-peace-o"></i>

Czyli aby dodać ikonkę, dodajemy element i, a następnie dekorujemy go odpowiednimi klasami CSS. W tym przypadku efekt będzie jak na poniższym, poglądowym obrazku:

font awesome - efekt

Oczywiście można też dowolnie sterować parametrami ikonki (na przykład wielkością), za pomocą atrybutów CSS, tak jakby to były zwykłe fonty.

Użycie niestandardowe

No dobra, a teraz do sedna tego wpisu… Co jeśli nie chcemy, a częściej jeśli nie możemy dodać takiego tagu (ani użyć tych klas na innym elemencie – bo tak też zwykle działa) bo na przykład chcemy dodać ikonkę do kodu HTML generowanego przez jakiś plugin jQuery? Otóż wystarczy trochę „grzebnąć” w CSS’ach i napisać coś podobnego do tego:

See the Pen BNMvgq by burczu (@burczu) on CodePen.0

W powyższym przykładzie, utworzyliśmy całkiem nowy element span i opatrzyliśmy go całkiem nową klasą custom-fa, a w efekcie mamy dokładnie tę samą ikonkę co poprzednio – kluczem tutaj jest użycie pseudo-klasy before oraz ustawienie parametru content. Domyślacie się już pewnie, że w domyślnych klasach Font Awesome jest to zrobione w ten sam sposób? 🙂 Pełna lista dostępnych wartości atrybutu content znajduje się tutaj, natomiast kompendium informacji na temat samego atrybutu tutaj.

Podsumowanie

To tyle ode mnie na dziś. Myślę, że powyższy przykład może się od czasu do czasu komuś z Was przydać szczególnie, że stosowanie Font Awesome jest ostatnio coraz bardziej popularne.

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!

  • Prawdziwa frajda to stworzenie projektów swoich ikonek w np. Inkscape i zamiana ich na własny font. Służy do tego generator fontcustom, któremu wystarczy wskazać folder z plikami SVG, a on wygeneruje ikonki oraz plik html, gdzie możemy je obejrzeć.

  • Zapewne wielu designerów nie zwróciło na to nigdy uwagi, ale ikonki w formie fontów, np. tych z Bootstrapa (Glyphicons) czy Font Awesome na starych monitorach CRT, gdzie domyślnie nie jest włączone wygładzanie fontów ekranowych po prostu wyglądają tragicznie. Wiem, że CRT to już przeszłość, ale czasami warto pomyśleć nie tylko o posiadaczach najnowszych iPhone-ów 6, zwłaszcza, że poprawnym i kompatybilnym rozwiązaniem są ikonki wektorowe w postaci SVG, które niezależnie od posiadanego wyświetlacza czy skalowania DPI będą poprawnie wyświetlane. Ze swojej strony polecam serwis http://www.flaticon.com/ z darmowymi ikonkami w wielu formatach, w tym SVG.

    • To fascynujące, że ktoś jeszcze używa monitora CRT do przeglądania internetu. Będę musiał zobaczyć jak to jest, bo jeszcze mam w garażu jakiś stary monitor. Czy problem wygładzania nie jest rozwiązywany przez OS? W Windows jest coś takiego jak „wygładzanie czcionek”, a fonty ClearType powstały chyba własnie dla poprawienia czytelności na ekranach CRT.

      Co do rozwiązania z SVG – wg informacji na stronie, nie obsługuje go IE8 oraz Android 2.3. Czy więcej będziemy mieli użytkowników starego Androida, czy korzystających z CRT?

      https://css-tricks.com/using-svg/

  • Dzięki, teraz już wiem, że niepotrzebnie wstrzykiwałem „i” przez js 😉