IcoMoon – stwórz własny icon font

Jednym z ciekawych elementów jaki zastosowałem przy nowej wersji mojego bloga był font zawierający większość ikonek które używam. Wystarczyło zebrać ikony w formacie SVG, w internecie można znaleźć wiele darmowych paczek ikon, następnie wygenerować font i dołączyć go do jak zwykły web font, czyli przy użyciu font-face.

Dlaczego icon font?

Dlaczego akurat font? Z kilku prostych powodów.
Po pierwsze ikony są w pełni skalowalne co pozwala mi we jednym miejscu wyświetlić miniaturę a gdzieś indziej większy rozmiar, nie tracąc przy tym nic z jakości ikony. Wszystko odbywa się po przez zmianę w css właściwości font-size bo to w końcu przecież font.
Po drugie mogę w dziecinny sposób nadać mojej ikonie dowolny kolor, unikając tworzenia osobnych obrazków.
Po trzecie bez żadnych problemów możemy nadawać naszym ikonom inne efekty z poziomu CSS, choćby np. text-shadow, text-stroke, opacity, transform, transition itd.

Generowanie fontu

Do wygenerowania fontu wykorzystałem aplikację webową dostarczaną przez Keyamoon. Poniżej znajduje się filmik autora w pełni opisujący możliwości narzędzia i proces tworzenia przykładowego fonta.

Znajdź ikony dla siebie

Jeżeli nie masz zdolności graficznych, lub czasu aby przygotować własną paczkę ikon, poniżej prezentuję listę kilku płatnych i darmowych paczek.

Font Awesome

Free – Pobierz

Symbolset

Płatne – Kup

Fico

Płatne – Kup

Entypo

Free – Pobierz

Iconic

Free – Pobierz

To oczywiście nie wszystko co można w sieci znaleźć. W szczególności polecam tą stronę css-tricks.com/flat-icons-icon-fonts/.