Ce este un font pentru pictograme?
Fontul pentru Icon este același font. Cu toate acestea, în loc de litere și cifre, ele conțin simboluri și semne speciale. Puteți să le creați prin CSS în același mod ca și cu textul simplu.
Pro și contra
Există multe avantaje ale înlocuirii imaginilor raster cu fonturi iconice. Iată câteva dintre ele:
- înregistrarea prin CSS;
- natura vectorului vă permite să le scalați cu ușurință la orice dimensiune fără a pierde calitatea;
- o cerere HTTP în loc de câteva, spre deosebire de imaginile raster;
- încărcare rapidă datorită dimensiunilor mici;
- suport pentru browserul larg, inclusiv IE6.
Acest lucru înseamnă că fonturile cu pictograme sunt un panaceu? Nu, desigur, nu. Aceasta este o tehnică excelentă pe care o puteți utiliza în proiectarea proiectului, însă există câteva minusuri în utilizarea acestora. De exemplu, dacă doriți să afișați o imagine complexă, nu o simplă pictogramă, atunci pictograma font nu este cea mai bună soluție.
De asemenea, de regulă, ele pot fi afișate într-o singură culoare, dacă nu utilizați trucuri CSS. În plus, pot fi create anumite pictograme pentru dimensiuni specifice, de exemplu 16 × 16, 32 × 32, 48 × 48, etc. Dacă dintr-un motiv anume modificați dimensiunea la 25 × 25, rezultatul poate fi neclar.
Merită menționat faptul că, în plus față de fonturile iconice, există o altă soluție populară: SVG. Utilizarea lor poate rezolva unele probleme. De exemplu, puteți utiliza mai mult de o culoare.
Apoi vom analiza două biblioteci de fonturi:
Vom lua în considerare, de asemenea, patru exemple diferite de utilizare a fonturilor cu pictograme.
Font Awesome
Font Awesome este o bibliotecă care conține 439 de icoane. Este absolut gratuit atât pentru uz personal, cât și pentru uz comercial. Inițial, a fost dezvoltată pentru Bootstrap, dar o puteți utiliza separat.
Lucrul cu Font Awesome
Cea mai ușoară modalitate de conectare a fontului Awesome este conectarea prin intermediul CDN. Dacă lucrați offline, va trebui să descărcați un set de pictograme.
De asemenea, trebuie să conectați fonturile CSS și generate în diferite formate.
Pentru a utiliza icoanele, trebuie să le plasați în interiorul elementului span sau i. Apoi, trebuie să le alocați două clase: fa plus a doua clasă, care trebuie să se potrivească cu numele pictogramei, de exemplu fa-home. Aici puteți găsi numele tuturor icoanelor disponibile.
Mai multe informații și numeroase exemple pot fi găsite pe această pagină.
Acum, să aruncăm o privire la câteva exemple.
Font minunat. Exemplul nr. 1
În primul exemplu, vom crea un meniu vertical. Mai întâi plasăm icoanele în interiorul elementului i și dublem dimensiunea acestora utilizând clasa predefinită fa-2x. Apoi face-le folosind CSS.
HTML va arăta astfel:
Font minunat. Exemplul # 2
HTML pentru o pictogramă va arăta astfel:
CSS pentru icoane de styling:
Font minunat. Exemplul # 3
HTML și CSS sunt similare cu cele precedente. Rezultatul.
IcoMon icoane
IcoMoon este un alt font popular pentru pictograme. De data aceasta putem alege dintre două pachete: una cu sursă deschisă, o altă primă. Informații mai detaliate pot fi găsite aici. În funcție de pachetul selectat, numărul și formatul pictogramelor disponibile vor fi diferite. De exemplu, într-un pachet gratuit 450 de icoane, într-o taxă plătită de 1266.
IcoMoon oferă, de asemenea, o aplicație online. unde puteți găsi și descărca mai mult de 3500 de icoane. În această aplicație, puteți efectua operații de bază: rotiți, schimbați culorile și multe altele.
În plus, aveți posibilitatea de a importa propriile icoane și de a crea propriile fonturi de pictograme.
Lucrul cu IcoMoon
Pachetul pe care îl alegeți include imagini în diferite formate (SVG, PSD, AI). După descărcarea icoanelor, trebuie să conectați CSS și folderul de fonturi generat.
Pentru a utiliza pictogramele IcoMoon, trebuie să le plasați în interiorul elementului Span. Apoi, trebuie să atribuiți o clasă care trebuie să se potrivească cu numele pictogramei dorite, de exemplu icon-home. De asemenea, puteți personaliza numele pictogramelor în fila Preferințe.
IcoMoon. exemplu
Am plasat icoane în interiorul elementelor de span. și a face folosind CSS.
HTML pentru două icoane arată astfel:
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: