• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Fontello, wszystko co powinieneś wiedzieć!

Ultraszybki serwer VPS NVMe START
+60 głosów
4,316 wizyt
pytanie zadane 1 lutego 2016 w Nasze poradniki przez PATYL Maniak (65,730 p.)
edycja 1 lutego 2016 przez PATYL

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; } /* '' */

 

komentarz 20 sierpnia przez Ahejex Nowicjusz (120 p.)
Jak dodać dodatkowe fonty kiedy mam już paczkę której używam, a stronę edytuję na innym komputerze, gdzie nie są zapamiętane używane icony? Muszę szukać i zaznaczać je na nowo?
komentarz 20 sierpnia przez PATYL Maniak (65,730 p.)
Niestety tak.

6 odpowiedzi

+2 głosów
odpowiedź 1 lutego 2016 przez efiku Maniak (72,060 p.)
Hmm przypnijmy na chwilę.

PS: Jak dajesz zdjęcia, to fajnie by było, gdybyś ustawiał też hiperłącze do niego. Tak, aby po kliknięciu pokazywało oryginalne zdjęcie.
komentarz 1 lutego 2016 przez Eryk Andrzejewski VIP (115,630 p.)
Ty to przypiąłeś? :) Jeśli tak to podziel się jak :)
komentarz 1 lutego 2016 przez efiku Maniak (72,060 p.)
A nie podzielę się bo to jest banalnie proste. :P Chodź na IRC.
+2 głosów
odpowiedź 1 lutego 2016 przez Comandeer Mentor (374,150 p.)

Trzeba jednak zaznaczyć, że sposób wstawiania ikonek zasugerowany przez Fontello jest niedostępny. Jeśli zrobimy coś typu:

<a href="/login"><i class="icon icon-paddle"></i></a>

to dostajemy link bez treści lub, co jeszcze gorsze, dostaniemy link z tekstem, który jest domyślnie przypisany do znaku Unicode użytego przez ikonę (emojis; chociaż przed tym w teorii broni speak: none w CSS). Więcej można poczytać tu: https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

komentarz 1 lutego 2016 przez PATYL Maniak (65,730 p.)
Dobrze ze o tym wspomniałes :)
0 głosów
odpowiedź 2 lutego 2016 przez babiak Obywatel (1,830 p.)
Za każdym razem muszę generować listę od nowa? <smutek>
komentarz 2 lutego 2016 przez PATYL Maniak (65,730 p.)
Strona pamieta wybrane wczesniej ikony
0 głosów
odpowiedź 4 lutego 2016 przez eliano Gaduła (3,740 p.)
mnie sie podoba fontawesome bo nie trzeba nic pobierac tylko wystarczy 1 linijka w head i można używać wszystkich ikonek i nie trzeba myśleć które dokładnie będą mi potrzebne
1
komentarz 4 lutego 2016 przez Comandeer Mentor (374,150 p.)
Nie ma to jak optymalizacja… ;)
komentarz 4 lutego 2016 przez eliano Gaduła (3,740 p.)
Wyczuwam ironię...
0 głosów
odpowiedź 15 stycznia przez delta_pavonis Początkujący (280 p.)
Witam

Mam takie pytanie, czy jest możliwość dokonania obrotu ikony fontello? Chciałem użyć ikony: icon-delicious, jako coś podobnego do emblematu ("szachownicy") Polskich Sił Powietrznych. Wyglądałoby to fajnie, tylko żeby w ogóle się zgadzał ten motyw (położenie ciemnych i jasnych pól), to trzeba by obrócić całą ikonę o 90 stopni. Jeśli jest taka możliwość, to proszę o podpowiedź.

Z góry serdecznie dziękuję.

Pozdrawiam.
1
komentarz 15 stycznia przez argeento Maniak (74,810 p.)

transform: rotate

1
komentarz 15 stycznia przez delta_pavonis Początkujący (280 p.)
Bardzo dziękuję

Działa znakomicie.
0 głosów
odpowiedź 19 maja przez Agata Kolber Nowicjusz (220 p.)
Czy da się do przycisku dodać ikonę z fontello?
komentarz 19 maja przez Benek Nałogowiec (41,920 p.)

Oczywiście. Wystarczy skorzystać z etykiety label i podpiąć ją pod przycisk.

komentarz 19 maja przez Agata Kolber Nowicjusz (220 p.)
Dzięki za odpowiedź. Zrobiłam troszkę inaczej, ale działa.

Podobne pytania

0 głosów
3 odpowiedzi 177 wizyt
pytanie zadane 6 maja 2016 w HTML i CSS przez ernest4013 Gaduła (3,050 p.)
0 głosów
2 odpowiedzi 64 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez mrpietrek Nowicjusz (180 p.)
0 głosów
2 odpowiedzi 86 wizyt
pytanie zadane 17 sierpnia 2015 w HTML i CSS przez Rogulix Obywatel (1,840 p.)

41,355 zapytań

80,329 odpowiedzi

158,964 komentarzy

19,741 pasjonatów

Przeglądających: 143
Pasjonatów: 0 Gości: 143

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...