Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

7 świetnych generatorów Icon Fonts

Wysokiej jakości obrazy mogą być różnicą między dobrą stroną internetową, a doskonałą stroną internetową. Jednakże, wraz z jakością wzrasta również rozmiar, obraz nie skalują się zbyt dobrze, ciężej je edytować lub też nimi manipulować, co skutkuje zwiększoną liczbą requestów na stronie.

Jeśli chodzi o responsywny projekt, czasem najlepszym rozwiązaniem jest całkowite zrezygnowanie z obrazka i zastąpienie go poprzez icon fonts, gdy jest to możliwe. Są łatwo edytowalne, są przejrzyste i posiadają dobre wsparcie w przeglądarkach. Dlatego, że zawierają mniej znaków niż pełny typeface, zajmują znacznie mniej miejsca.

Tworzenie icon fonts nie musi być czasochłonne, ponieważ istnieje wiele generatorów które pozwolą ci na zbudowanie własnej czcionki z tylko i wyłącznie z ikonkami które nam są potrzebne, co pomoże w zredukowaniu rozmiaru pliku. 

Używając icon font można redukować czas ładowania się strony aż o 14% i dzięki temu, że są one wektorowe to można je skalować w nieskończoność, a przy tym rozmiar takich czcionek pozostaje mniejszy od rozmiaru zwykłych obrazków. Icon fonts można edytować dynamicznie używając CSS, zamiast za każdym razem wykorzystywać nową grafikę, a dodatkowo można korzystać z właściwości CSS3 takich jak „text-shadow.”

Proces ładowania icon-fonts jest taki sam jak dla każdej innej czcionki (używając metody „@font-face”), możesz stworzyć reguły CSS które są aplikowane do każdej ikonki, tworzyć classy dla swoich ikonek i ostatecznie dodać proste HTML'owe markupy. Możesz też zastosować alternatywne podejście i użyć „data-icon” w kombinacji z selektorami CSS.

Zebraliśmy 8 najlepszych generatorów icon-fonts, żeby pomóc ci w używaniu lekkich, niezależnych od rozdzielczości fontów w twoich własnych projektach.


1. Piconic
 
pictonic

Pictonic oferuje wersje darmową oraz premium, gdy stworzysz konto. Korzystaj z „live search” w celu przeglądania dostępnych ikonek i klikaj na te których potrzebujesz. Możesz również filtrować wyniki poprzez kategorie.

Jak już skończysz wybierać wszystkie niezbędne ci ikony, kliknij Continue i ściągnij plik, który zawiera pliki z czcionką, CSS, SVG, PNG i wiele innych. Liczba plików, które otrzymasz zależy od jak wielu ikon zdecydowałeś się użyć. Posiadasz możliwość edytowania rozmiaru, koloru oraz text-shadow wszystkich ikon.

2. We love Icon Fonts
 
weloveicon

We love Icon Fonts to kolejne open-source'owe miejsce w którym wybierzesz i stworzysz swój własny pakiet icon fontów. Do wyboru będziesz miał ikony z wysokiej jakości czcionek takich jak: Brandicon, Entypo, Font Awesome, Fontelico, Make, OpenWeb Icons, Typicons i Zocial.

Żeby skorzystać z zestawu na swojej stronie kliknij „Add”, aby dodać je do swojej kolekcji. Następnie otrzymasz kod, dalej korzystając z CSSa możesz edytować jak owe ikonki są wyświetlane. Mimo, że nie pozwala on na używanie konkretnych ikon z zestawu(trzeba przenieść całą czcionkę), jest on prosty i dobry na początek korzystania z icon fonts.

3. Fontello

fontello
Fontello jest open-source'owym projektem, który pozwala na łączenie jakichkolwiek wybranych elementów z szerokiego wachlarza  czcionek w celu stworzenia własnej czcionki. Możesz zmniejszać kolekcje glyphów,  łączyć symbole z kilku czcionek w jeden plik z dostępem do dużej kolekcji open-source'owego artworku.

Fontello pozwala ci szybko znaleźć specyficzne ikony, dokonać podglądu wyniku i następnie zminić nazwy class, tak aby prasowały do twojego projektu. Jako, że każda generowana czcionka posiada plik config, możesz załadować go z powrotem do Fontello w celu kontynuacji pracy.


4. Fontastic
 
fontastic

Fontastic z łatwością pomoże ci stworzyć własne customowe icon fonts i jest idealny dla tych co właśnie rozpoczynają swoją przygodę z konceptami. Zwyczajnie wyślij je w formacie SVG i poczekaj jak Fontastic przekonwertuje je w kilka sekund. Możesz samemu edytować styl, a takżę zmieniać skale, kolor i dodawać drop-shadows or animować swoje icon fonts. Ze względu na to że umieszczasz jedynie ikony, których potrzujesz to czas ładowania strony ulega zredukowaniu, poprzez umieszczenie wszystkich ikon w jednym pliku z czcionkami.

Możesz skorzystać ze standardowych ustawień z Fontastic, albo możesz zmienić charakter i mapowanie CSS.

5. IcoMoon
 
icomoon

IcoMoon zawiera icon fonts oraz możliwość importowania or tworzenia twoich własnych ikon każdego rozmiaru lub koloru. Istnieją dwie wersje, open-source oraz premium z pakietami ikon, które można zakupić oraz pakiet ikon darmowych, które można ściągnąć z Github.

Tworzenie własnych icon fontów jest łatwe, wystarczy wybrać aplikację internetową IcoMoon, kliknąć na ikony które chcemy umieścić w naszej czcionce i ściągnąć ją. Możemy zmieniać nazwę, włączać/wyłączać ligatury, ustawić baseline i rozmiar em.


6. Pictonic

pictos

Pictonic zapewnia ręcznie robione, nieskończenie skalowalne, nieodpłatne icon fonty. Z pojawieniem się serwera Pictos, możesz zbudować swoje własne icon fonty poprzez wybranie jakichkolwiek ikonek z biblioteki Pictos i przypisać klawisz na klawiaturze konkretnej ikonce. Po prostu wklej wygenerowany kod do swojego HTMLa, a serwer Pictos umieści twój customowy icon font prosto na twojej stronie.

7. Font Custom

fontcustom

Font Custom działa na Ruby i generuje icon fonts z kolekcji ikon SVG, dzięki czemu łatwo jest stworzyć własny icon font i wketory, bez limitowania się do popularnych standardowych zestawów ikonek. Nie trzeba nic konfigurować, wystarczy podać lokalizację twoich plików SVG i Font custom stworzy pliki czcionek i towarzyszący im plik CSS.