Font Awesome 5

Font Awesome to prawdopodobnie najpopularniejszy icon font na świecie. A icon fonty, jak może wiecie, to takie sprytne ikonki, zapisane w formie fontu, które pozwalają na bezstratne ich skalowanie do nawet ogromnych rozmiarów. Zastąpiły one przygotowywane w plikach .png ikony, których skalowanie na ekranach telefonów pozostawiało wiele do życzenia. Był to krok konieczny, który na stałe zagościł wśród twórców stron razem z RWD – czyli Responsive Web Design.

Font Awesome

Projekt stworzony przez Dave’a Gandy’ego. Rozpoczęty w 2012, w 2013 przy wersji 3, rozpoczął swoją ekspansję w internecie. Oferował najwięcej, wciąż będąc darmowym produktem i choć większość pewnie romansowała w międzyczasie z innymi twórcami, to na koniec dnia okazywało się, że Font Awesome jest niezastąpiony. Zawsze coś zgrzytało, brakowało jednej z ikonek, która była potrzebna, albo była po prostu brzydka.

I nie wiem jak wy, ale próbowałam mieszać, korzystając z fontastic.me, ale nadal, zawsze były jakieś zgrzyty, które sprawiały, że przymykałam oko na te drobne rzeczy, które nie wyglądały w Font Awesome tak, jak bym tego chciała, bo koniec końców, i tak prezentował się najlepiej.

Na ten moment w darmowej wersji Font Awesome jest 675 ikon, które pokryją 100% waszego zapotrzebowania na codzień i jakieś 80% efektów specjalnych, które kiedykolwiek byście chcieli zakodować.

Kickstarter

Byłam jednym z 35 tysięcy wspierających projekt na Kickstarterze. W moje 25 urodziny dokładnie, kampania się zakończyła, a z mojego konta znikło 20 dolarów. Jasne, że niezbyt dużo, choć z drugiej strony – to przecież tylko ikonki.

Font Awesome to projekt, którego istnienie umilało mi życie. Budowanie przycisków do udostępniania tekstów stało się o wiele łatwiejsze, szczególnie dla kogoś takiego jak ja, kto woli spędzić kilkadziesiąt minut w CSS-ie, zamiast w programie graficznym, gdzie jeszcze kiedyś robiło się takie ikonki. Nie, żeby robienie ikonek nie było super, ale CSS pozwalał na częstsze zmiany koncepcji i więcej efektów specjalnych.

Wszelkiej maści strzałki, ikona „lupki” oznaczająca pole szukania, mały domek w miejscu odnośnika do strony głównej. Czasem też coś więcej. W panelu swojego WordPressa dalej mam przy kategoriach pole z wpisaną ikonką symbolizującą jej zawartość.

Aktualnie tu te ikonki to oczywiście dalej przyciski udostępniania, moje drogie serduszka, klucz we wpisie o Bullet Journal, a w menu RSS i wspominana lupka do wyszukiwarki. (Właśnie do mnie dotarło, że to trochę przerost formy nad treścią – ładowanie całego Font Awesome 5 pro, ale no, kto mi zabroni?) Cytaty też są zrobione z ich użyciem i pewnie poruszając się po archiwum znajdą się jeszcze kolejne przykłady. I jasne, dałoby się obejść bez. Tylko po co?

Ci, którzy wsparli projekt na Kickstarterze dostają dostęp do wersji Pro. Mamy dostęp do repozytorium na githubie, mieliśmy alfy i bety w międzyczasie. Nie wiemy, co dalej. Wyszła wersja 5.0, publicznie, frontem do całego świata. I jest do dupy, a twórcy są w lesie ze spełnianiem kickstarterowych założen, według których projekt miał się zakończyć w maju 2017.

Status?

Poza faktem, że wyszło to już na świat, to dalej daleko do zakończenia tego, co mieliśmy obiecane.

To już mamy, ponad rok po zakończeniu kampanii na Kickstarterze. W detalach o większości przeczytacie poniżej. A czego jeszcze brakuje?

CDN by się przydał. Poza tym, bardzo ciekawa jestem duotone’ów, które były jednym z tych punktów, gdy pomyślałam, że muszę zapłacić za pro. Pakiety ikon to coś, na co też przebieram nóżkami. Nie mogę się doczekać, aż pojawią się ikonki bardziej specjalistyczne. Wiecie, pakiet związany z kuchnią, świętami, pogodą czy kto-wie-czym-jeszcze. Toż to prawie, jak czekanie na dodatki do simsów!

Ale kiedy? Hm. No tego nie wiadomo.

Legacy

Font Awesome 5 doczekał się oddzielnej strony internetowej. już z .com na końcu, nie .io. W sumie to całkiem sensowny zabieg, bo między 4.X a 5.0 różnice są ogromne i nie zawsze na plus…

Jeśli załączycie sobie Font Awesome 5 przez plik .js, to nie musicie się niczym martwić – stare ikonki zostaną zastąpione nowymi. Jeśli zamierzacie używać wersji Pro lub chcecie korzystać z niej przez plik .css, to zaczynają się schody. Składnia przez ostatnie 5 lat brzmiała: <i class="fa fa-cośtam"></i>, gdzie „cośtam” zastępujecie facebookiem, twitterem, książką, plusem czy serduszkiem. Jeśli chcecie zrobić ikonkę z wariantem pustym w środku, dodajecie jeszcze na końcu -o. Czyli ikonka pustego komentarza brzmiała: <i class="fa fa-comment-o"></i>. Banał, prawda?

Aktualnie sprawa się trochę skomplikowała. Nie ma już .fa. Jest za to .fab dla marek (b od brands), .far dla podstawowych ikon (r od regular) .fas dla ikonek o trochę grubszych krawędziach lub też wariantu z wypełnionym tłem (s od solid) i .fal dla nowych ikonek, których obramowanie jest ciensze (l od light). Więc taki przycisk do menu trzeba wyedytować, zmienić mu .fa na .fas. Bo to solid jest aktualnie podstawową wersją ikon. I tu się zaczyna kolejny problem.

Solid jako podstawowa wersja. Mnie to boli.

Nie aż tak bardzo, bo mam wykupioną licencję na pro, ale nadal. U klientów zmuszona jestem do korzystania z tej wersji lub trzymania się wciąż wersji 4.7, która aktualizować się nie będzie.

Ikony, na które nie da się patrzeć

5.0 to dla mnie upgrade tylko w teorii. Część ikon jest brzydsza. Serio. A część funkcjonalnie doprowadza mnie do szału. Wycofanie półgwiazdek to dla mnie skandal i inwalidztwo. Kurwa. Od 2013 roku śledzę sobie tu przeczytane książki. Oceny wystawiam używając gwiazdek, ale zamiast pisać cały kod HTML, wklejam tylko „znak” i w CSS-ie oznaczam, że w tej sekcji fontem jest Font Awesome. Czysto i schludnie, choć bez legendy ani rusz, bo w WordPressie każdy ze znaczków wyświetla mi się jako prostokąt pusty w środku. Mniejsza z tym.

Wersja 5 ujrzała światło dzienne, więc się rzucam! I ikonki się sypią, strasznie. Półgwiazdki to aktualnie tylko „prawa” część, a lewa jest pusta. Ta-dałn. Czyli według aktualnego designu ocena 3.5 powinna wyglądać tak, że mam 3 pełne gwiazdki, potem połówkę i…? Nic? No nie.

Twórcy nie planują dodać półgwiazdek w starym stylu. Jaka była reakcja supportu, na moje prześliczne żale? Poskładaj sobie ikonkę nakładając połówkę na gwiazdkę z samymi krawędziami. Zrobiłam to, oczywiście, musiałam. Przecież lepiej spędzić dwie godziny na kodowaniu, niż przerabiać 170 książek dodanych już do strony.

Co komu te półgwiazdki przeszkadzały?

Część ikonek w wersji 5 jest brzydsza, część zmieniła się diametralnie, część nie da Wam spać po nocach. Za starą wersję ikonki file-code trzeba aktualnie zapłacić, bo znajduje się w wersji Pro. Na stary kalendarz nie ma szans. Podobna sytuacja spotkała bardzo wiele ikon.

Ponad dwa tysiące ikon

Tak. ~900 w wersji free, ~1200 w wersji Pro, na dzień dzisiejszy. Ale prawda jest taka, że obecności większości nie zauważycie. Jak bardzo interesuje Was to, że są dwa różne designy piłki do piłki nożnej? Albo tablet jest w wersji z wypełnionym tłem i bez niego. Brawa.

Część ikon jest też robiona na siłę.

Patrzcie. Zrobiliśmy 3 ikonki z jednej!

W powyższym przypadku zmiana stylu strzałki doprowadza mnie do szału, a w pogrubionej (przypomnę: domyślnej) wersji litery są w ogóle nieczytelne.

Kretynizmy

Pierwszym oczywistym przykładem krytynizmu jest sytuacja z półgwiazdkami.

Kolejnym jest fakt, że ikonki teraz to nie jeden font, a cztery. W sensie, pliki. Jeden do marek, drugi do regularnych, trzeci do wersji light, czwarty do pogrubionych. Nieważne, że trzy ostatnie to jedna „rodzina” i można je przełączyć używając CSS (zmieniając font-weight), to nadal są osobne pliki fontów.

Wersji regular na blogu nie używam. Chyba. Przyjmijmy, że nie. Jeśli chcę sobie zrobić klikalne serduszka, które po wykonanej akcji się zapełniają, to muszę załączyć dwa fonty. Solid i regular. To jest kwestia wydajności strony. Fonty we wszystkich wersjach to 200 kb przy pliku .woff2, który załaduje się w większości przeglądarek. Wersja .svg to ponad 2 Mb. Sam CSS zajmuje ~50 kb w zminifikowanej wersji, ten CSS, w którym są wszystkie ikonki. Osobno to po 600 bajtów.

Gdyby nie to jedno serduszko i jedna gwiazdka, mogłabym ładować 12 kb pliku CSS i 100 kb w fontach. I oczywiście, to jest moje „widzimisię”, ale wersje -o (według starej nomenklatury) powinny, moim zdaniem, znajdować się w tym samym zestawie. Bo przecież skoro muszę załadować 3/4 zestawu, to przecież już wezmę cały. Ciężko wzdychając.

Font Awesome 5 Pro

Brzmi dumnie. Pro. Jak MacBook Pro czy Surface Pro.

Z poprzednich akapitów pewnie już wiecie, co takiego znajduje się w Pro. Więc przejdźmy do tej mniej przyjemnej części.

Roczna licencja na Font Awesome 5 Pro kosztuje 60$. Roczna?! Działa to mniej-więcej tak, jak w przypadku płatnych wtyczek do WordPressa czy kupnych motywów – przez rok od zakupu mamy aktualizacje, potem, jeśli chcemy zobaczyć Font Awesome z kolejnym numerkiem po 5., musimy przedłużyć licencję. Z ostatniej udostępnionej wersji możemy korzystać, tu nie ma problemu. Na szczęście. Chociaż oczywiście jest to smutna sytuacja. Przypuśćmy, że taka firma jak Instagram zmienia logo. W wersji 4.5 była jeszcze stara, w 4.6 nowa. Nie problem, obie są darmowe i jedyna różnica to zmiana numerka w linku do CDN-a, ewentualnie kwestia zaktualizowania plików, które przechowujecie na dysku.

A teraz? Skończy Ci się rok aktualizacji, coś/ktoś zmieni logo i albo będziesz używał starej wersji, albo zapłacisz 60$ tylko po to, żeby dostać nowy plik z jedną ikonką.

Aktualizacje?

Wersja 5 RC5 (RC – release candidate) pojawiła się ostatniego dnia listopada 2017. 7 dni później została ona opublikowana już dla wszystkich. Aktualna wersja to 5.0.6, te pomiędzy przyniosły jakieś pojedyncze bugfixy, które ludzie zgłaszali, ale nie ruszyło się nic w kierunku nowych ikon czy realizacji kolejnych celów założonych podczas kampanii.

Przy corocznej płatności trochę obawiam się o sytuację wśród tych, którzy wsparli projekt. Od kiedy liczy się nasze 12 miesięcy? To dość istotne. Pisałam nawet maila do supportu z tym pytaniem, ale została ona udzielona w tak pokrętny sposób, że nic z tego nie wynika. A pytania zadałam konkretne: czy backersom również liczy się 12 miesięcy aktualizacji? Jeśli tak, to od kiedy rozpoczynamy odliczanie? A odpowiedź?

Hi Angie,

By supporting the Kickstarter your license is forever and you will have access to all the features rewards available now and those being built in the near future.

Co to znaczy near future?!

Społeczność już powiedziała, że nie widzą innego rozwiązania, jak liczenie naszego roku od momentu, kiedy wszystkie cele zostają osiągnięte, czyli od momentu, w którym dostaniemy dokładnie to, za co zapłaciliśmy na Kickstarterze. Przy aktualnym tempie prac szczerze wątpię, że duotone’y i pakiety ikon pojawią się w ciągu najbliższych dwóch kwartałów. Dostępy otrzymaliśmy w marcu 2017 i szczerze, niewiele się od tego czasu zmieniło.

Uff

Teraz na szczęście widzę (i mogę odetchnąć z ulgą), że pojawiła się zakładka ze szczegółami mojej licencji.

Lifetime updates.

Dziękuję. Już mi lepiej. Nie zmienia to jednak faktu, że mail w takim razie trochę kłamczuszył i jeszcze wtedy nie byli pewni, ile tych aktualizacji nam zapewnić. Cieszę się, że poszli w tym kierunku.

Dobra, napisałam chyba wszystko co miałam w głowie.

Wkurza mnie to, że Font Awesome nie ma konkurencji. Jest kilka dobrych icon fontów, ale bądźmy szczerzy, żaden nigdy nie dorośnie FA do pięt, z kilku powodów. Zacznijmy od ugruntowanej pozycji na rynku, przejdźmy przez to, że ikon jest sporo, prawie na każdą okazję, a już darmowa wersja pokrywa wszystkie potrzeby. I nawet jeśli nie wszystkie ikony są śliczne, to jednak są wykonane w konsekwentnym stylu. Inne dobre paczki ikon skupiają się czasem tylko na konkretnych dziedzinach, możemy znaleźć piękne ikonki z pogodą, a potem jeszcze ładniejsze, których użyjecie w nawigacji swojego bloga, ale już nawet piksel rozbieżności w grubości linii między zestawami będzie Was doprowadzał do szału.

Przez brak konkurencji mogą spocząć na laurach – nikt im przecież nie zagrozi. I szczerze, jak stawiacie, kiedy pojawią się wszystkie obiecane pakiety ikon?

No nic. Sprawdźcie sami. Font Awesome 5 znajdziecie tutaj.
I oczywiście, nie krępujcie się sprawdzić, jak fajne efekty można zrobić korzystając z ikon fontów.

sobota
27.01.2018 2
28

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.