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.
Font Awesome - użycie w sposób niestandardowy
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:
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.
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.