Font minunat 6: recenzie completă
- 1 cum să instalezi font minunat
- Metoda 1.
- Metoda 2.
- 2 Cum se folosește icoane minunate font
- 1 pictograme standard
- 2 pictograme mari
- 3 pictograme cu lățime fixă
- 4 pictograme pentru lista cu buletin
- 5 pictograme și citate încadrate
- 6 pictograme animate
- 7 pictograme transformate
- 8 pictograme combinate
- 3 Font Awesome 4.5.0 collection, classes șicss code to insert using the content property
- 4 resurse conexe
- Dimensiunea pictogramei
- Culoarea pictogramei
- Întrebări Frecvente
Font Awesome este o colecție de pictograme vectoriale scalabile. Pictogramele pot fi formatate folosind proprietățile CSS, setează culoarea, dimensiunea, umbra și multe altele. Versiunea de font 5.5.0 include 605 pictograme.
1 cum să instalezi font minunat
Metoda 1.
Utilizați versiunea font-awesome.css a fișierului adăugând următorul cod la<head> secțiune:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">După ce fontul este conectat, puteți utiliza pictogramele de pe site -ul dvs.
Metoda 2.
Descărcați fontul din font minunat . Dezactivați arhiva și încărcați două foldere din arhivă către serverul site -ului - CSS și fonturi. Dacă aveți deja foldere cu astfel de nume pe site -ul dvs., atunci trebuie doar să adăugați fișiere din folderele descărcate la ele.
Puteți utiliza versiunea completă sau minificată a fișierului:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Cum se folosește icoane minunate font
Pictogramele pot fi adăugate la o pagină web în două moduri: prin setarea claselor corespunzătoare pentru<i> și<span> elements, sauby adding them to the desired element using the :before, :after pseudo-elements șithe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: înainte {conținut: "\ f015";/ * Adăugați pictograma acasă */font-family: fontawesome; color: #aaaaaa; marginea-dreapta: 10px;}1 pictograme standard
Font Awesome este conceput pentru a fi utilizat cu elemente inline. Pentru a adăuga pictograme, mai întâi trebuie să setați clasa FA la<i> sau<span> element.
Pentru a adăuga pictograma selectată înainte sau după element, un gol<i></i> sau<span></span> Elementul este adăugat la element, căruia i se atribuie o clasă de pictograme, precum și o clasă suplimentară care extinde stilul.
<i class="fa fa-camera-retro"></i>2 pictograme mari
Pentru a crește dimensiunea unei pictograme în raport cu recipientul său, utilizați clasele FA-LG (33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 pictograme cu lățime fixă
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation saulists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Acasă</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliotecă</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplicații</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Setări</a ></li></ul>4 pictograme pentru lista cu buletin
Utilizați clasele FA-UL și FA-LI pentru a înlocui gloanțele implicite într-un<ul>...</ul> listă cu puncte.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Element de listă</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Element de listă</li> <li><i class="fa-li fa fa-square"></i>Element de listă</li></ul>5 pictograme și citate încadrate
Use the fa-border class to set the border for the icon. The pull-right șipull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor Sit amet, contectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero în, Porta Sapien. În sed elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodles Congue Sapien.</p>6 pictograme animate
Adăugați clasele FA-Spin, FA-Pulse, FA-Refresh, FA-Cog pentru a configura pictograme de filare. Animația nu este acceptată în IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 pictograme transformate
Pentru a roti sau a răstoala pictogramele, utilizați clasele FA-ROTAT-* și FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 pictograme combinate
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, șifa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes șicss code to insert using the content property
Pictograme pentru aplicații web FA -ADJUST - \ F042;Fa -ancor - \ f13d;
Fa -archive - \ f187;
Fa -Arrows - \ f047;
Fa -sesterisk - \ f069;
Faat - \ f1fa;
FA-Balance-scală-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
FA -BARCODE - \ F02A;
Fa-battery-go-goned-\ f244;
FA-BATTERY-JHALF-\ F242;
FA-BATTERY-STARTER-\ F243;
FA-BATTERY-trei-sferturi-\ f241;
FA-BATTERY-FULL-\ F240;
Fa -pat - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -binocluls - \ f1e5;
FA-Birthday-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
Fa -book - \ f02d;
Pentru a roti sau a răstoala pictogramele, utilizați clasele FA-ROTAT-* și FA-FLIP-*.
4 resurse conexe
Pe lângă colecția Font Awesome, puteți utiliza și alte fonturi de pictograme.
Fontello.Fontello are o colecție mare de diverse fonturi de pictograme. Puteți selecta pictogramele care vă plac și le puteți descărca pe computer.
Pictograma fundației.Fundația Icon este o altă colecție de fonturi de icoane de la dezvoltatorii cadrului fundației. Pe lângă pictogramele standard, site -ul prezintă pictograme rotunde, pictograme de social media și multe altele.
pictograme materiale.Pictogramele materiale sunt pictogramele plate unificate ale Google care întruchipează ușurința percepției. Pictogramele sunt optimizate pentru afișare frumoasă pe toate platformele comune și pentru toate rezoluțiile ecranului.
Colecția de fonturi pictogramă conține peste 750 de pictograme. Cel mai simplu mod de a instala o colecție pe site -ul dvs. web este să utilizați pictograme precum fonturile Google Web. Pentru a față acest lucru, următorul cod este inclus în marcajul paginii:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Pentru a afișa corect fontul în browsere, elementul care va utiliza fontul pictogramei este dat clasa Material-ICons:
.Material-ICons {font-family: 'pictograme materiale'; Font-Weight: Normal Font-stil: dimensiunea normală a fontului: 24px; / * Dimensiunea pictogramei preferate *///////// afișare: inline-bloc; Lățimea: 1EM; înălțime: 1EM; Linie-înălțime: 1; Text-Transform: Niciuna; Spațiu de litere: Word-WRAP normal: normal; Spațiu alb: Nowrap; Direcția: LTR; -Webkit-font-smoothing: antialiased; / * Suportat de toate browserele Webkit *///////// Text-Rendering: Optimizelegitibility; / * Safari și Chrome Support *///////// -moz-OSX-font-Smoothing: Grayscale; /* Suport Firefox. *///////// font-feature-settings: 'liga'; /* Adică suport. */////////}Icoanele în sine sunt adăugate folosind<I class=''material-Icoane''>ligatura sau codul HTML al pictogramei</i> Etichetă, de exemplu:
<i class="material-Icoane">cont_balance_wallet</i><i class="material-Icoane"></i>Ligatura este înțeleasă de toate browserele moderne, adică - începând de la versiunea 10. Codul pictogramei este generat automat, pentru aceasta trebuie să fațăți clic pe stânga pe imaginea pictogramei și să copiați aspectul sugerat.
Dimensiunea pictogramei
Dimensiunea pictogramei is controlled by additional classes:
.material-Icoane.md-18 {size font: 18px;} /* pentru<i class="material-Icoane md-18"></i> */////////.material-Icoane.md-24 {size font: 24px;} /* pentru<i class="material-Icoane md-24"></i> */////////.material-Icoane.md-36 {font-size: 36px;} /* pentru<i class="material-Icoane md-36"></i> */////////.material-Icoane.md-48 {font-size: 48px;} /* pentru<i class="material-Icoane md-48"></i> */////////Culoarea pictogramei
Culoarea pictogramelor este, de asemenea, setată folosind clase suplimentare:
.material-Icoane.md-Dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-Icoane md-dark"></i> */////////.material-Icoane.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-Icoane md-light"></i> */////////.material-Icoane.md-Dark.md-inactiv {color: rgba (0, 0, 0, 0.26);} /*<i class="material-Icoane md-dark md-inactive"></i> * / /.material-Icoane.md-light.md-inactiv {color: rgba (255, 255, 255, 0.3);} /*<i class="material-Icoane md-light md-inactive">față</i> */////////Pentru a seta o culoare personalizată, trebuie să adăugați o clasă care să definească culoarea pictogramei, de exemplu:
.material-Icoane.indigo {color: #1a237e;} /*<i class="material-Icoane indigo"></i> */////////Întrebări Frecvente
- Ce este font minunat în termeni simpli?
- În esență, este un font cu pictograme care pot fi adăugate la orice element de pagină web pentru a -și îmbunătăți vizibilitatea și designul. Colecția constă din câteva sute de pictograme potrivite pentru orice sarcină și scop.Mai multe informații despre acest link
Michel Pinson este un pasionat de călătorii și un creator de conținut. Fuzionând pasiunea pentru educație și explorare, el nu este obținut să împărtășească cunoștințe și să -i inspire pe ceilalți prin captivarea conținutului educațional. Aducerea lumii mai aproape prin împuternicirea persoanelor cu expertiză globală și un sentiment de rătăcire.
