Wypełnij formularz, aby złożyć zamówienie i otrzymać darmową wycenę

Honeybee – alternatywa dla Font Awesome

Honeybee – alternatywa dla Font Awesome

Słowem wstępu - Font Awesome

Dla tych, co jeszcze nie spotkali się z Font Awesome – jest to czcionka (font), która zamiast typowych liter zawiera w sobie zestaw ikon. Zamiast tworzyć i zapisywań różnego rodzaju ikony w postaci graficznej (svg, png lub jpg) można wykorzystać istniejące rozwiązanie. Sami możecie zobaczyć ikony pochodzące z tego fontu na tym blogu.

Ikony są skalowalne i bardzo estetyczne, co więcej przekrój tematów jest ogromny, począwszy od tych typowo webdeveloperskich (np. hamburger menu), skończywszy na ugryzionym ciastku czy bałwanku. Można ich użyć w dowolnym miejscu na swoim blogu czy stronie (włączając w to same posty). Zaletą tego rozwiązania jest to, że tak samo jak w przypadku fontów z google, wystarczy dodać "link" do zewnętrznego źródła, żeby cieszyć się nowym zestawem ikon. 

Rozwiązanie jest darmowe dla bazowych ikon. Jeżeli chcemy użyć pełnej puli ikon, należy wykupić plan premium. Obecnie uznanie autorstwa (pełna treść licencji) znajduje się w udostępnianym pliku, zatem więcej my, jako użytkownicy, nie musimy robić.

Instalacja 

Dla tych, którzy dotychczas nie korzystali z takiego rozwiązania, przedstawiam poniżej w skrócie instrukcję na dołączenie Font Awesome do swojego szablonu na bloggerze. Dawno temu napisałam podobną, ale od tego czasu trochę w kwestii instalacji się zmieniło.
  1. Na tej podstronie podajemy nasz adres e-mail i zatwierdzamy przyciskiem Send Kit Code. W tym  momencie utworzymy konto na stronie Font Awesome.
  2. W odpowiedzi otrzymamy wiadomość na wskazany wcześniej e-mail. Należy potwierdzić założenie konta.
  3. W kolejnym kroku, po kliknięciu linku, należy wprowadzić hasło do konta, a potem dodatkowe nieobowiązkowe dane (nick).
  4. Po tym kroku otrzymamy mini-skrypt, będący naszym "linkiem" do fontu. Przykładowy (niedziałający kod) znajduje się niżej.
  5. Po skopiowaniu tego skryptu należy umieścić go tuż nad znacznikiem <head> w kodzie szablonu. Wystarczy zapisać zmiany i gotowe.
   <script crossorigin="anonymous" src="https://kit.fontawesome.com/jAkiSk00d.js"></script>
</head>

Zastosowanie

A teraz zaczyna się prawdziwa zabawa. Wybieramy dowolną ikonkę z dostępnych w darmowym planie. Na nowej stronie, pod nazwą ikonki znajduje się krótki kod HTML ze znacznikiem <i>  – to jest właśnie nasza ikonka. Po skopiowaniu kodu należy przejść do widoku HTML postu i go tam wkleić. To wszystko! :)

Przykłady

Zegar
 <i class="far fa-clock"></i>
Kalendarz
 <i class="fas fa-calendar-alt"></i>
Użytkownik
 <i class="fas fa-user"></i>
Tagi
 <i class="fas fa-tag"></i>
Komentarze
 <i class="fas fa-comments"></i>
Home
 <i class="fas fa-home"></i>
Bałwan
 <i class="fas fa-snowman"></i>
Ugryzione ciasteczko
 <i class="fas fa-cookie-bite"></i> 

Font Honeybee - alternatywa

Zestaw ikon Honeybee jest, co dużo mówić, uroczy. Naprawdę nie mogę inaczej go opisać. Mam nadzieję, że podzielicie moje zdanie, gdy zobaczycie te niesamowicie dopracowane cuda poniżej. Aż trudno mi uwierzyć, że ktoś udostępnił coś takiego za darmo. ♥

Tutaj także font jest przechowywany na zewnętrznym serwerze (Dropboxie). Czcionka ta została udostępniona przez autorkę w wielu mediach (w tym na tumblrze). Należy pamiętać, że można wykorzystać ją tylko do użytku niekomercyjnego (szczegóły licencji – w głównej mierze opisuje ona szablony na tumblr'a, ale wierzę, że powyższy font również obowiązuje). Pamiętajcie o uznaniu autora!

W porównaniu do Font Awesome ma niewielką możliwość dostosowania.

Instalacja

Dodanie tego fontu na blogu jest o wiele prostsze niż Font Awesome (a sam sposób taki sam, jak dawno temu dodawało się Font Awesome). Jedyne, co musimy zrobić, to wkleić odnośnik ponad znacznikiem </head> w kodzie naszego szablonu. Owy odnośnik znajduje się na stronie w części How To Install.

Zastosowanie

Aby wyszukać ikonkę wchodzimy ponownie na stronę Honeybee (tam też znajduje się szczegółowa instrukcja). Nie mamy tutaj do czynienia z pełną wyszukiwarką, a jedynie z filtrami dzielącymi ikony na kategorię. Do wyszukania ikony polecam znane dobre ctrl + F. Kopiujemy nazwę ikony i podstawiamy ten teksty w miejsce pogrubionego tekstu w kodzie poniżej.
<span class="th th-nazwa-ikony"></span>

Przykłady

A teraz finał – nadszedł czas na te małe piękności!
Komentarz
 <span class="th th-chat-bubble"></span>
Budzik
 <span class="th th-alarm-clock-1-o"></span>
Kalendarz
 <span class="th th-calendar-2-o"></span>
Użytkownik
 <span class="th th-user"></span>
Dom
 <span class="th th-home"></span>
Płatek śniegu
 <span class="th th-snowflake"></span>
Spadająca gwiazda
<span class="th th-shooting-star-o"></span>

Podsumowanie

Mam nadzieję, że te urocze ikony również wam się spodobają, ale przede wszystkim okażą się użyteczne. Czy poza Font Awesome i Honeybee znacie inne, hostowane zewnętrznie fonty-ikony?

Więcej trików i wskazówek dotyczących prowadzenia bloga znajdziesz na moim instagramie. Koniecznie zajrzyj! ;)

@kroltrefl.design

Komentarze [0]