Cześć,
od jakiegoś czasu często można znaleźć tematów odnośnie Fontello, bardzo często powtarzają się pytania jak je zainstalować jak zmienić im kolor i wiele wiele innych. Postanowiłem napisać jeden temat w, którym postaram się zamieścić wszystkie potrzebne informacje do obsługi tej "graficznej czcionki".
Co to jest Fontello?
Fontello jest to czcionka wektorowa, za jej pomocą możemy umieścić na stronie ikony. Są to wektory, więc zwiększenie ikon nie pogarsza ich jakości. Więcej o grafice wektorowej
Jak zainstalować Fontello?
1. odwiedzamy stronę fontello,
2. Z pośród ikon wybieramy te, które nas interesują i klikamy klawisz "Download Webfont (x)",
3. Pobraną paczkę wypakowujemy do głównego folderu naszej strony nadpisując wszystkie pliki,
4. Kolejnym krokiem jest podłączenie arkusza fontello.css do naszego pliku index.html,
5. W sekcji head dodajemy
Przykład:
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
ścieżka do pliku będzie różna, w zależności gdzie znajduje się dokument,
6. W pliku demo.html znajdują się nazwy naszych ikon, aby umieścić ikonę na stronie wystarczy stworzyć element <i> o odpowiedniej classie
Przykład:
<i class="icon-chat"></i>
W znaczniku nie powinien znajdować się tekst.
Jeżeli ikona nie pokazuje się na stronie sprawdź czy zrobiłeś wszystko zgodnie z punktami wyżej.
Jak edytować ikony?
W pliku fontello.css znajdują się style naszych ikon, (są one na samym dole dokumentu)
Przykład:
To jest ikona bez stylów:
.icon-chat:before { content: '\e801';} /* '' */
Tutaj zaś zmieniony został kolor na czerwony:
.icon-chat:before { content: '\e801'; color: red;} /* '' */
W tym momencie mamy pełne pole do popisu możemy zmieniać cienie, wielkość ikon, kolory, itp.
Jak podczas robienia strony dodać ikony?
1. Ponownie odwiedzamy stronę fontello,
2. Wybieramy ikony, które mamy użyte na stronie,
3. Zaznaczamy kolejne ikony, które nas interesują,
4. Jeżeli zmienialiśmy style poprzednich ikon to warto je skopiować w oddzielne miejsce,
(kliknij aby powiększyć)
5. Wypakowujemy pliki do katalogu głównego (nadpisując wszystkie),
6. W pliku fontello.css wklejamy wcześniej zapisane style starych ikon,
Jak dodać :hover do ikony?
Przykład
.icon-chat-alt:before { content: '\e80c'; font-size: 50px;} /* '' */
.icon-chat-alt:hover:before { content: '\e80c'; color: red; } /* '' */