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

Fontello, wszystko co powinieneś wiedzieć!

+66 głosów
7,225 wizyt
pytanie zadane 1 lutego 2016 w Nasze poradniki przez PATYL Maniak (67,630 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 2017 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 2017 przez PATYL Maniak (67,630 p.)
Niestety tak.
1
komentarz 28 czerwca przez bk20 Użytkownik (750 p.)

Wiem, że odpowiedź została umieszczona już rok temu, ale wystarczy przeciągnąć plik config.json na stronę fontello.com/, a ta automatycznie zaznaczy odpowiednie ikonki

7 odpowiedzi

+2 głosów
odpowiedź 1 lutego 2016 przez efiku Szeryf (75,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 (145,680 p.)
Ty to przypiąłeś? :) Jeśli tak to podziel się jak :)
komentarz 1 lutego 2016 przez efiku Szeryf (75,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 (430,290 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 (67,630 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 (67,630 p.)
Strona pamieta wybrane wczesniej ikony
0 głosów
odpowiedź 4 lutego 2016 przez eliano Gaduła (3,720 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 (430,290 p.)
Nie ma to jak optymalizacja… ;)
komentarz 4 lutego 2016 przez eliano Gaduła (3,720 p.)
Wyczuwam ironię...
0 głosów
odpowiedź 15 stycznia 2017 przez delta_pavonis Początkujący (300 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 2017 przez argeento Szeryf (87,430 p.)

transform: rotate

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

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

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

komentarz 19 maja 2017 przez Agata Kolber Nowicjusz (220 p.)
Dzięki za odpowiedź. Zrobiłam troszkę inaczej, ale działa.
0 głosów
odpowiedź 22 lutego przez Roza Pasjonat (17,590 p.)

Witam,

Mam może trochę głupie pytanie, ale spróbuję, bo z tym walczę i nic...
Mam ikonki fontello i czy mogę je osadzić w samy CSS strony bez angażowania HTML?

Próbuję w taki sposób:

 div ul:before
{
    content: '\f166'; 
   color: #F1F1f1;
}

Ale wychodzi mi jakiś prostokąt zamiast ikonki, a nie chciałabym osadzić ich w kodzie HTML

Dziękuję za odpowiedź

 

komentarz 22 lutego przez PATYL Maniak (67,630 p.)

Dodaj 

font-family: FontAwesome;
komentarz 22 lutego przez Roza Pasjonat (17,590 p.)
Bez zmian
komentarz 22 lutego przez PATYL Maniak (67,630 p.)

Bo to Fontello a nie FontAwesome xD

Spróbuj to: 

font-family: "entypo-fontello";
komentarz 22 lutego przez Roza Pasjonat (17,590 p.)
Dalej nic
komentarz 22 lutego przez Roza Pasjonat (17,590 p.)
Już sobie poradziłam dziękuję
komentarz 22 lutego przez Kondzio Gaduła (3,300 p.)
Zawsze możesz się podzielić jak sobie poradziłaś :P przydatna rzecz

Podobne pytania

0 głosów
3 odpowiedzi 198 wizyt
pytanie zadane 6 maja 2016 w HTML i CSS przez ernest4013 Gaduła (3,180 p.)
0 głosów
2 odpowiedzi 81 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez mrpietrek Nowicjusz (180 p.)
0 głosów
2 odpowiedzi 96 wizyt
pytanie zadane 17 sierpnia 2015 w HTML i CSS przez Rogulix Obywatel (1,850 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

54,420 zapytań

98,307 odpowiedzi

202,201 komentarzy

26,727 pasjonatów

Przeglądających: 281
Pasjonatów: 13 Gości: 268

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.

...