Fonturile cu pictograme sunt minunate pentru site-ul dvs.: Iată de ce

Publicitate

Ați auzit despre icoane și aproape sigur ați auzit de fonturi, dar ce este un Icon Font? Astăzi vă voi arăta care sunt fonturile pictogramelor și cum le puteți utiliza pentru a vă îmbunătăți site-ul. Să începem.

Ce sunt fonturile Icon?

Fonturile cu pictograme sunt exact aceleași cu fonturile „obișnuite” - ele definesc aspectul unui aspect de text. Marea diferență este că fonturile de pictograme nu conțin litere și cifre, ci simboluri și pictograme. S-ar putea să vă confundați cu asta, cât de bun este un font dacă nu puteți scrie scrisori mamei voastre!

Fonturile cu pictograme sunt utilizate în principal pentru stilul site-urilor web. Deoarece sunt bazate pe vector, ele pot fi redimensionate, mutate, stilate și modificate folosind CSS 5 pași pentru a învăța CSS și a deveni un vrăjitor CSS Kick-AssCSS este cea mai importantă pagină web de schimbare cea mai importantă înregistrată în ultimul deceniu și a deschis calea pentru separarea stilului și conținutului. În mod modern, XHTML definește structura semantică ... Citeste mai mult

. Acest lucru oferă un avantaj uriaș față de metodele de design tradiționale, cum ar fi imaginile. Aspectul unui număr mare de icoane poate fi modificat doar cu câteva linii de cod. Nu trebuie să editați imagini, să deschideți Photoshop sau să încărcați fișierele noi - doar scrieți cod.

Noțiuni de bază

Voi folosi Font minunat pentru aceste exemple, însă teoria poate fi aplicată la multe alte pachete de fonturi.

Iată HTML-ul de început:

Aceasta este cantitatea minimă de HTML necesară pentru a produce o pagină web. Nu voi explica majoritatea, așa cum am descris-o în ghidul nostru din cum se face un site web.

Cea mai importantă linie este următoarea:

Aceasta încarcă fișa de stil Font Awesome de la CDN. Fără această linie, site-ul dvs. web nu ar ști ce este Font Awesome, așa că este destul de important. Această foaie de stil gestionează toată munca grea de încorporare a fonturilor web și, în general, face lucrurile mult mai ușoare pentru tine.

Icoanele de tip Font Awesome sunt definite de clasele CSS adăugate la eu Etichete. Acestea au fost alese întrucât nu au nici un browser sau stilul definit în mod implicit, astfel încât pictogramele dvs. nu vor fi încurcate. Alternativ, puteți adăuga clasele la deschidere etichete, dar asta se încurcă în HTML.

Iată utilizarea de bază. Puneți asta în interiorul dvs. corp Etichete:

 Prima mea icoană

Iată cum arată:

Cât de ușor a fost asta? Să o dărâmăm. Există două clase necesare pentru ca Font Awesome să funcționeze. Primul este numit fa, care înseamnă Font Awesome. Acest lucru este necesar pentru orice pictogramă, indiferent de cea pe care o utilizați. A doua clasă specifică pictograma particulară pe care doriți să o utilizați - aceasta poate fi orice, un avion, o persoană sau un card de credit. De asemenea, acest lucru este prefixat cu fa, și deoarece aceasta este o pictogramă cog, numele acesteia este fa-Cog. Puteți vedea o listă cu toate pictograme în Font Fantastic pe site-ul lor web.

Încercați să schimbați pictograma de pe cog în alta.

Mergând mai adânc

După ce știți elementele de bază, este timpul pentru câteva trucuri avansate.

Dacă nu doriți să vă scrieți propriul CSS, puteți utiliza stilurile încorporate chiar în Font Awesome. Există multe clase pe care le puteți utiliza pentru a crește pictogramele:

O altă clasă utilă este utilizarea fa spin-. Acest lucru vă va face să rotiți pictogramele și, atunci când sunt combinați cu clasele anterioare de mărime, puteți produce efecte frumoase. Iată codul:

Iată rezultatul:

Este ușor să rotiți pictogramele - utilizați butonul fa-rotire clasă:

Numărul de la sfârșit definește gradele de rotație pentru pictogramă, dar nu este dus. Ești limitat 90, 180, sau 270.

Un ultim truc pe care îl puteți face este stivuirea. fa-stack clasa vă permite să combinați două sau mai multe pictograme împreună. Iată codul:

Iată cum arată:

Odată ce începeți să combinați toate aceste diverse clase, posibilitățile sunt într-adevăr nesfârșite.

CSS personalizat

Deoarece fonturile pictogramelor sunt doar fonturi, le puteți stila cu CSS la fel ca orice alt element. Utilizarea unui CSS3 mic poate parcurge un drum lung:

Iată HTML-ul pentru această pictogramă:

Iată CSS:

@keyframes se deplasează {de la {margin-left: 0; } la {margine-stânga: 400px; } } .bike {animație-nume: mutare; animatie-durata: 4s; }

Acest CSS este destul de de bază, dar are un impact mare. Totuși acesta nu este un tutorial CSS, așa că poate doriți învață CSS 10 exemple simple de cod CSS pe care le puteți învăța în 10 minuteDoriți să aflați mai multe despre utilizarea CSS? Încercați aceste exemple de cod CSS de bază pentru a începe, apoi aplicați-le pe propriile pagini web. Citeste mai mult dacă doriți să aflați mai multe despre funcționările interioare.

Puteți face unele lucruri speciale dacă doriți cu adevărat:

Aceasta bâlbâie puțin pentru a reduce dimensiunea fișierului pentru web. Iată HTML-ul:

Iată CSS:

@keyframes se estompează {de la {opacitate: 0; } la {opacitate: 1; } } .person {opacitate: 0; animatie-nume: fade; } # p1 {culoare: roșu; animație-durată: 2s; } # p2 {culoare: portocaliu; animatie-durata: 4s; } # p3 {culoare: verde; animatie-durata: 6s; } # p4 {animatie-durata: 8s; }

Ca și exemplul precedent, acesta folosește animații CSS3. O animație numită decolorare este creată și fiecare pictogramă de persoană implementează această animație cu calendarul diferit. Există un potențial foarte mare de a salva cu aceste pictograme și CSS3.

Asta este totul pentru ziua de azi. Acum ar trebui să poți folosi Fonturi Icon pentru a-ți amenaja site-ul! Dacă încă nu sunteți atât de sigur de abilitățile dvs., verificați acestea Site-uri de șabloane CSS 11 site-uri de șabloane CSS: Nu începeți de la zgârieturi!Există mii de șabloane CSS gratuite disponibile online, toate care includ tendințele și tehnologiile moderne de design. Le puteți folosi în forma lor originală sau le puteți personaliza pentru a le face propriile voastre. Citeste mai mult sau acestea Canalele YouTube pentru a începe Vrei să înveți web design? 7 canale YouTube pentru a vă începeYouTube are mii de videoclipuri și canale pentru începători în designul web. Aici ne uităm la unele dintre cele mai bune pentru a începe. Citeste mai mult cu design web.

Ai învățat ceva nou astăzi? Care este fontul dvs. Icon Icon preferat? Spuneți-ne în comentariile de mai jos!