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

Fontello, wszystko co powinieneś wiedzieć!

VPS Starter Arubacloud
+67 głosów
18,310 wizyt
pytanie zadane 1 lutego 2016 w Nasze poradniki przez Eimens Maniak (69,240 p.)
edycja 1 lutego 2016 przez Eimens

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 Eimens Maniak (69,240 p.)
Niestety tak.
2
komentarz 28 czerwca 2018 przez bk20 Użytkownik (740 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,160 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 Mędrzec (164,260 p.)
Ty to przypiąłeś? :) Jeśli tak to podziel się jak :)
komentarz 1 lutego 2016 przez efiku Szeryf (75,160 p.)
A nie podzielę się bo to jest banalnie proste. :P Chodź na IRC.
+2 głosów
odpowiedź 1 lutego 2016 przez Comandeer Guru (599,730 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 Eimens Maniak (69,240 p.)
Dobrze ze o tym wspomniałes :)
0 głosów
odpowiedź 2 lutego 2016 przez babiak Obywatel (1,810 p.)
Za każdym razem muszę generować listę od nowa? <smutek>
komentarz 2 lutego 2016 przez Eimens Maniak (69,240 p.)
Strona pamieta wybrane wczesniej ikony
0 głosów
odpowiedź 4 lutego 2016 przez eliano Gaduła (3,640 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
2
komentarz 4 lutego 2016 przez Comandeer Guru (599,730 p.)
Nie ma to jak optymalizacja… ;)
komentarz 4 lutego 2016 przez eliano Gaduła (3,640 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 niezalogowany

transform: rotate

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 Szeryf (90,690 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 2018 przez niezalogowany

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 2018 przez Eimens Maniak (69,240 p.)

Dodaj 

font-family: FontAwesome;
komentarz 22 lutego 2018 przez niezalogowany
Bez zmian
komentarz 22 lutego 2018 przez Eimens Maniak (69,240 p.)

Bo to Fontello a nie FontAwesome xD

Spróbuj to: 

font-family: "entypo-fontello";
komentarz 22 lutego 2018 przez niezalogowany
Dalej nic
komentarz 22 lutego 2018 przez niezalogowany
Już sobie poradziłam dziękuję
komentarz 22 lutego 2018 przez Kondzio Mądrala (5,230 p.)
Zawsze możesz się podzielić jak sobie poradziłaś :P przydatna rzecz

Podobne pytania

0 głosów
2 odpowiedzi 368 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez mrpietrek Nowicjusz (180 p.)
0 głosów
2 odpowiedzi 339 wizyt
pytanie zadane 17 sierpnia 2015 w HTML i CSS przez Rogulix Obywatel (1,850 p.)
0 głosów
2 odpowiedzi 332 wizyt
pytanie zadane 14 sierpnia 2015 w HTML i CSS przez Rogulix Obywatel (1,850 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...