Conectarea și utilizarea fonturilor de pictograme
Serviciile care oferă ansambluri gratis de fonturi gratuite, gata făcute, sunt suficiente, în timp ce o varietate de icoane în ele pot satisface aproape orice nevoie atunci când creează un site sau proiectează un blog. În acest articol vom vorbi despre cum să conectați un font de pictograme și să-l utilizați atunci când creați un site Web.
Cele două resurse cele mai populare sunt Font Awesome și Fontello. primul (și cel mai important) - sunt gratuite; în al doilea rând - Font Awesome - oferă publicului link-ul de descărcare directă pentru fontul de la gazda, care este, nu trebuie să folosească lui sau caută găzduire terță parte pentru fișierele necesare, Fontello poate asambla propriul font încărcat pe pictograma site-ului în formatul .svg sau selectați din setul general de exact acelea care sunt necesare în acest caz, mai degrabă decât să descărcați tot ceea ce este.
Cum se conectează un font de pictogramă la un site
Există în prezent trei metode de conectare:
1. Dacă este disponibil, utilizați o legătură directă (publică) directă cu serviciul de găzduire pe care doriți să îl găzduiți în interiorul secțiunii
. mai bine sau înainte de închidere . acesta este modul în care va merge.Pentru Font Awesome, cea mai recentă versiune a link-ului arată astfel:
2. Descărcați arhiva cu toate fișierele necesare, extrageți conținutul dosarelor CSS și Fonturi, plasați fișierele extrase pe gazda site-ului dvs. în dosarele corespunzătoare și trimiteți-le în secțiunea
- dați calea numai la dosar:
- conectați la distanță fișierele cu CSS din dosarul corespunzător:
3. După descărcarea arhivei cu fișierele, extrageți numai conținutul folderului Fonturi și conectați fontul pictogramei folosind regula CSS @ font-face:
# 64; font-face font-family: "fontello";
src: url ('.. calea către fișier / fontello.eot');
src: url ('.. calea către fișier / fontello.woff') format ('woff'),
url ('.. calea către fișier / fontello.ttf') format ("truetype"),
url ('.. calea către fișier / fontello.svg # fontello') format ('svg');
font-weight: normal;
font-style: normal;
>
Cum se utilizează fontul pictogramei pe site
Fiecare simbol selectat are un nume și un cod, le puteți vedea atât pe pagina oficială a site-ului, cât și pe pagina demo din arhiva descărcată. Numele, dacă este compatibil, este, de asemenea, o clasă suplimentară a elementului pentru care este necesară o pictogramă, codul fiind folosit ca simbol al simbolului UTF. Metodele de adăugare a caracterelor la pagină depind de opțiunea de conectare a fontului.
Dacă utilizați a doua opțiune - conectați fontul utilizând fișierele CSS. este posibil să adăugați caractere folosind atât clasa, cât și codul:
1. Creați un element gol cu clasa de pictograme și adăugați-l în fața blocului dorit:
2. Adăugați o clasă cu numele caracterului la elementul dorit:
3. Adăugați la CSS un pseudo-element pentru un element cu o pictogramă care va conține codul UTF al caracterului dorit și indicați fontul utilizat (în acest exemplu, Fontello):
ul li a :: înainte de conținut: '\ e80a';
font-familie: "fontello";
font-style: normal;
font-weight: normal;
>
Dacă utilizați a treia opțiune pentru a conecta fontul pictogramelor - numai fișierele de fonturi. apoi, pentru a putea adăuga icoane pe însușirea de clasă numele corespunzător în CSS aveți nevoie pentru a face desen sau model suplimentar pentru a stabili o conexiune la fontul acestor elemente, și pentru fiecare punct de simbol asociat:
[class ^ = "icon -"] :: înainte,
[class = = "icon -"] :: înainte de font-family: "fontello";
font-style: normal;
font-weight: normal;
>
.icon-doc-inv :: înainte de conținutul: '\ e801';
>
.icon-mail-alt :: înainte de conținut: '\ e805';
>
dar puteți face fără ea, cum ar fi:
/ * Se vor adăuga pictograme * /
.icon-doc-text-inv :: înainte
ul li a :: înainte
- va funcționa oricum.