Dzisiaj opiszę jedną z nowoczesnych technik, która na pewno pomoże Tobie, jako grafikowi oraz programiście szybciej wdrożyć stronę. Mowa tu o ikonach, które mają takie same właściwości, jak tekst. Całą technikę opiszę na podstawie popularnej strony Font Awesome, gdzie znajdziesz udostępniony duży zbiór ikon za darmo.

Przewaga ikon w formie tekstowej nad tradycyjnymi

Myśląc o tworzeniu stron, powinno się rozumieć, w jaki sposób działają niektóre rzeczy już po zakodowaniu. Zauważ, że w momencie, gdy otworzymy dowolną stronę i spróbujemy ją powiększyć, to wszystkie zdjęcia, w tym ikony, tracą na jakości. Zupełnie inaczej jest z tekstem, on zawsze pozostaje perfekcyjnie ostry. Dzieje się tak, ponieważ jest on stworzony na podstawie wektorów, które skalują się do każdej rozdzielczości bez najmniejszej straty jakości. Na tym właśnie polega najważniejsza różnica między tymi typami ikon.

Font Awesome jak używać?

Jest to font jak każdy inny Należy go zainstalować, można go pobrać na głównej stronie www.fontawesome.io i kliknąć przycisk Download. Po pobraniu i rozpakowaniu w folderze fonts, znajdziemy pliki, które trzeba zainstalować. Klikamy prawym przyciskiem myszy i z menu kontekstowego wybieramy zainstaluj. Już w tej chwili będziemy mieli dostęp do niego w Photoshopie.

 

ikony-fonty

 

Następnie musimy się dostać do zbioru ikon pod adresem www.fontawesome.io/cheatsheet/. Najprostszym i najszybszym sposobem, aby zacząć korzystać z tych ikon jest skopiowanie ich ze strony i bezpośrednie wklejenie wybranej ikony do pola tekstowego w Photoshopie. Trzeba pamiętać, żeby w programie był wybrany odpowiedni font.