Icon Fonturi sunt minunate pentru site-ul dvs. Iată de ce

Ați auzit de icoane și aproape că ați auzit de fonturi, dar ce este Icon Font? Astăzi vă voi arăta ce sunt fonturile de pictograme și cum le puteți folosi pentru a vă îmbogăți site-ul. Să începem.

Ce sunt Fonturile Iconului?

Fonturile de pictograme sunt exact aceleași “regulat” fonturi - ele definesc aspectul și simțul unei bucăți de text. Marea diferență aici este că fonturile de pictograme nu conțin litere și numere, ci simboluri și pictograme. Ați putea fi confundat de acest lucru, deoarece ce bun este un font dacă nu puteți scrie scrisori mamei voastre!

Fonturile de pictograme sunt utilizate în principal pentru a modela site-urile web. Pe măsură ce acestea sunt bazate pe vector, ele pot fi redimensionate, mutate, șterse și modificate folosind CSS 5 Pași de Baby pentru a învăța CSS și a deveni un Kick-Ass CSS Sorcerer 5 Pași pentru a învăța CSS și a deveni un Kick-Ass CSS Sorcerer CSS este cele mai importante pagini web de schimbare pe care le-au văzut în ultimul deceniu și au pregătit calea separării stilului și conținutului. În mod modern, XHTML definește structura semantică ... Citește mai mult. Acest lucru oferă un avantaj imens față de metodele tradiționale de proiectare, cum ar fi imaginile. Aspectul și simțul unui număr mare de pictograme pot fi modificate doar cu câteva linii de cod. Nu trebuie să editați nici o imagine, să deschideți Photoshop sau să încărcați fișierele noi - doar scrieți cod.

Noțiuni de bază

Voi folosi Font Awesome pentru aceste exemple, dar teoria poate fi aplicată și pentru multe alte pachete de fonturi.

Iată HTML-ul demarorului:

Aceasta este cantitatea minimă de HTML necesară pentru a produce o pagină web. Nu voi explica majoritatea, așa cum am menționat în ghidul nostru despre cum să faceți un site web.

Linia cea mai importantă este următoarea:

Aceasta încarcă foaia de stil Avansat de pe CDN. Fără această linie, site-ul dvs. nu ar ști ce este Font Awesome, deci este foarte important. Această foaie de stil se ocupă de toată munca grea de a încorpora fonturile web și, în general, vă ușurează lucrurile mult mai ușor.

Font Pictogramele minunate sunt definite de clasele CSS adăugate la eu Etichete. Acestea au fost alese deoarece nu au atașat niciun browser sau stil definit implicit, astfel încât icoanele dvs. să nu se încurce. Alternativ, puteți adăuga clasele la deschidere tag-uri, dar acest lucru nu contravine HTML-ul.

Iată utilizarea de bază. Pune-o înăuntrul tău corp Etichete:

 Prima mea pictogramă

Iata cum arata:

Cât de ușor a fost asta? Să-l rupem. Există două clase necesare pentru ca Font Awesome să funcționeze. Primul este numit fa, care reprezintă Font Awesome. Acest lucru este necesar pentru orice pictogramă, indiferent de cea pe care o utilizați. Clasa a doua specifică pictograma particulară pe care doriți să o utilizați - acesta ar putea fi orice, un avion, o persoană sau un card de credit. Aceasta este de asemenea prefixată cu fa, și deoarece aceasta este o pictogramă cog, numele său este fa-Cog. Puteți vedea o listă cu toate pictogramele în Font Awesome pe site-ul lor web.

Încercați să schimbați pictograma din ceașcă în oricare altă.

Mergând mai adânc

Odată ce cunoașteț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 construite chiar în Font Awesome. Există mai multe clase pe care le puteți folosi pentru a face icoanele mai mari:

O altă clasă folositoare este fa spin-. Acest lucru vă va face să vă rotiți pictogramele și, combinate cu clasele de mărime anterioare, puteți produce unele efecte drăguțe. Iată codul:

Iată rezultatul:

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

Numărul de la capăt definește gradele de rotație ale pictogramei, dar nu vă duceți departe. Ești limitat la 90, 180, sau 270.

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

Iata cum arata:

Odată ce începeți să combinați toate aceste clase diferite, posibilitățile sunt cu adevărat nesfârșite.

CSS personalizat

Deoarece sunt fonturile de pictograme doar fonturi, le puteți modela cu CSS exact așa cum ați face orice alt element. Folosind un pic CSS3 poate merge un drum lung:

Iată codul HTML pentru acea pictogramă:

Iată CSS:

@frame-cheie se deplasează din marginea-stânga: 0;  la margin-left: 400px;  .bike animation-name: muta; animație-durată: 4s; 

Acest CSS este destul de fundamental, dar are un impact mare. Acest lucru nu este un tutorial CSS deși, așa că poate doriți să învățați CSS Pașii următori pe drumul spre a deveni un master CSS Jedi Pașii următori pe drumul spre a deveni CSS Jedi Master CSS este absolut una dintre cele mai importante tehnologii din jur pe internet astăzi, și în timp ce majoritatea oamenilor recunosc că cunosc un mic HTML, suntem în general clueless despre CSS. Ultima dată când te-am prezentat ... Citește mai mult dacă vrei să afli mai multe despre lucrările interioare.

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

Acest lucru stutter un pic pentru a reduce dimensiunea fișierului pentru web. Iată HTML:

Iată CSS:

@frame-cheie se estompează din opacity: 0;  la opacity: 1; . persoană opacity: 0; animație-nume: fade;  # p1 culoare: roșu; durata animației: 2s;  # p2 culoare: portocaliu; animație-durată: 4s;  # p3 culoare: verde; durata animatiei: 6 s;  # p4 durată de animație: 8s; 

Ca și în exemplul precedent, aceasta folosește animațiile CSS3. A sunat o animație decolorare este creată și pictograma fiecărei persoane implementează această animație cu diferite sincronizări. Există multe potențialuri de a face sălbatic cu aceste icoane și CSS3.

Asta e tot pentru ziua de azi. Acum ar trebui să puteți folosi Fonturile de Icon pentru a vă îmbogăți site-ul! Dacă nu sunteți atât de sigur de abilitățile dvs. încă, verificați aceste site-uri de șabloane CSS 11 Site-uri șablon CSS: Nu începeți de la zero! 11 site-uri șablon CSS: Nu începe de la zero! Există mii de șabloane gratuite CSS disponibile online, toate cuprinzând tendințele și tehnologiile de design moderne. Aveți posibilitatea să le utilizați în forma lor originală sau să le personalizați pentru a le face proprii. Citește mai multe sau aceste canale YouTube pentru a începe Vrei să înveți Web Design? 7 canale YouTube pentru a vă începe să doriți să învățați Web Design? 7 canale YouTube pentru a începe dvs. YouTube are mii de videoclipuri și canale pentru începători în domeniul web designului. Aici ne uităm la unele dintre cele mai bune pentru a începe. Citește mai mult cu designul web.

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

Explorați mai multe despre: CSS, HTML, Web Design.