Font Awesome 6: Mapitio kamili
- 1 Jinsi ya kufunga fonti ya kushangaza
- Njia 1.
- Njia ya 2.
- 2 Jinsi ya kutumia icons za kushangaza
- Icons 1 za kawaida
- 2 Icons kubwa
- 3 Icons za upana
- Icons 4 za orodha iliyojaa
- Icons 5 zilizoandaliwa na nukuu
- Icons 6 za michoro
- 7 Icons zilizobadilishwa
- Icons 8 za mchanganyiko
- 3 Font Awesome 4.5.0 collection, classes nacss code to insert using the content property
- 4 Rasilimali zinazohusiana
- Saizi ya ikoni
- Rangi ya ikoni
- Maswali Yanayoulizwa Mara Kwa Mara
Fonti ya kushangaza ni mkusanyiko wa icons mbaya za vector. Icons zinaweza kutengenezwa kwa kutumia mali ya CSS, kuweka rangi yao, saizi, kivuli na mengi zaidi. Toleo la font 5.5.0 ni pamoja na icons 605.
1 Jinsi ya kufunga fonti ya kushangaza
Njia 1.
Tumia toleo la faili la font-awesome.css kwa kuongeza nambari ifuatayo kwenye<head> Sehemu:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Mara font imeunganishwa, unaweza kutumia icons kwenye wavuti yako.
Njia ya 2.
Pakua font kutoka%ya font ya kushangaza%. Fungua kumbukumbu na upakia folda mbili kutoka kwenye jalada hadi seva ya tovuti - CSS na fonti. Ikiwa tayari unayo folda zilizo na majina kama haya kwenye wavuti yako, basi unahitaji tu kuongeza faili kutoka kwa folda zilizopakuliwa kwao.
Unaweza kutumia toleo kamili au la kuchimbwa la faili:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Jinsi ya kutumia icons za kushangaza
Icons zinaweza kuongezwa kwenye ukurasa wa wavuti kwa njia mbili: kwa kuweka madarasa yanayofaa kwa<i> na<span> elements, auby adding them to the desired element using the :before, :after pseudo-elements nathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: kabla ya {yaliyomo: "\ f015";/ * ongeza ikoni ya nyumbaniIcons 1 za kawaida
Fonti ya kushangaza imeundwa kutumiwa na vitu vya ndani. Ili kuongeza icons, kwanza unahitaji kuweka darasa la FA kwa<i> au<span> Element.
Kuongeza ikoni iliyochaguliwa kabla au baada ya kitu, tupu<i></i> au<span></span> Kipengee kimeongezwa kwa kitu hicho, ambacho kimepewa darasa la icon, na pia darasa la ziada ambalo linapanua maridadi.
<i class="fa fa-camera-retro"></i>2 Icons kubwa
Kuongeza ukubwa wa icon jamaa kwenye chombo chake, tumia FA-LG (ongezeko la 33%), FA-2X, FA-3X, FA-4X, darasa la 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 Icons za upana
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation aulists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Nyumbani</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Maktaba</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Maombi</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Mipangilio</a ></li></ul>Icons 4 za orodha iliyojaa
Tumia madarasa ya FA-UL na FA-LI kuchukua nafasi ya risasi chaguo-msingi katika<ul>Kama</ul> Orodha iliyojaa.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Orodha ya bidhaa</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Orodha ya bidhaa</li> <li><i class="fa-li fa fa-square"></i>Orodha ya bidhaa</li></ul>Icons 5 zilizoandaliwa na nukuu
Use the fa-border class to set the border for the icon. The pull-right napull-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, consectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero katika, Porta Sapien. Katika sed elit lectus. Sed Lacus Elit, Semper Vitae Felis Id, Sodales Congue Sapien.</p>Icons 6 za michoro
Ongeza FA-spin, FA-pulse, FA-Refresh, madarasa ya FA-cog kuanzisha icons zinazozunguka. Uhuishaji hauhimiliwi katika 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 Icons zilizobadilishwa
Ili kuzungusha au kugeuza icons, tumia darasa la FA-Rotate-* na 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>Icons 8 za mchanganyiko
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, nafa-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 nacss code to insert using the content property
Icons kwa matumizi ya wavuti FA -kurekebisha - \ F042;FA -Anchor - \ F13d;
Fa -archive - \ F187;
FA -Arrows - \ F047;
FA -ASTERISK - \ F069;
Faat - \ f1fa;
FA-Balance-Scale-\ F24E;
Fa -ban - \ f05e;
FA -Bank - \ F19c;
FA -Barcode - \ F02A;
Fa-bettery-tupu-\ f244;
Fa-bettery-nusu-\ f242;
Fa-bettery-robo-\ f243;
Fa-battery-tatu-robo-\ F241;
Fa-bettery-kamili-\ f240;
Fa -kitanda - \ f236;
FA -Beer - \ F0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -binoculars - \ F1E5;
FA-birthday-keki-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
Fa -kitabu - \ f02d;
Ili kuzungusha au kugeuza icons, tumia darasa la FA-Rotate-* na FA-Flip-*.
4 Rasilimali zinazohusiana
Mbali na mkusanyiko wa kushangaza wa fonti, unaweza kutumia fonti zingine za icon pia.
Fontello.Fontello ina mkusanyiko mkubwa wa fonti tofauti za icon. Unaweza kuchagua icons unazopenda na kuzipakua kwa kompyuta yako.
Icon ya msingi.% Mbali na icons za kawaida, tovuti ina icons pande zote, icons za media za kijamii, na zaidi.
icons za nyenzo.Icons za nyenzo ni icons za gorofa za Google ambazo zinajumuisha urahisi wa utambuzi. Icons zinaboreshwa kwa onyesho zuri kwenye majukwaa yote ya kawaida na kwa maazimio yote ya skrini.
Mkusanyiko wa fonti ya ikoni una icons 750+. Njia rahisi ya kusanikisha mkusanyiko kwenye wavuti yako ni kutumia icons kama fonti za wavuti za Google. Ili kufanya hivyo, nambari ifuatayo imejumuishwa kwenye alama ya ukurasa:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Ili kuonyesha kwa usahihi font katika vivinjari, kitu ambacho kitatumia fonti ya icon hupewa darasa la nyenzo-icons:
.material-icons {font-familia: 'icons za nyenzo'; Uzani wa herufi: mtindo wa kawaida wa fonti: saizi ya kawaida ya font: 24px; / * Saizi ya icon inayopendelea */ kuonyesha: inline-block; Upana: 1em; Urefu: 1em; urefu wa mstari: 1; Nakala-mabadiliko: Hakuna; Barua-nafasi: Neno-kawaida la kawaida: kawaida; Nafasi nyeupe: Sasarap; Miongozo: ltr; -Webkit-font-laini: antialiased; / * Inayoungwa mkono na vivinjari vyote vya WebKit */ utoaji wa maandishi: OptimizeLegibility; / * Safari na msaada wa Chrome */ -moz-osx-font-laini: Grayscale; /* Msaada wa Firefox. */ font-fainali-mpangilio: 'liga'; /* Ie msaada. */}Icons zenyewe zinaongezwa kwa kutumia<I class=''material-icons''>Ligature au HTML nambari ya ikoni</i> Tag, kwa mfano:
<i class="material-icons">ACCOUNT_BALANCE_WALLET</i><i class="material-icons"></i>Ligature inaeleweka na vivinjari vyote vya kisasa, yaani - kuanzia toleo la 10. Nambari ya ikoni hutolewa kiatomati, kwa hii unahitaji kubonyeza kushoto kwenye picha ya icon na kunakili sura iliyopendekezwa.
Saizi ya ikoni
Saizi ya ikoni is controlled by additional classes:
.material-icons.md-18 {font-size: 18px;} /* kwa<i class="material-icons md-18"></i> */.material-icons.md-24 {font-size: 24px;} /* kwa<i class="material-icons md-24"></i> */.material-icons.md-36 {font-size: 36px;} /* kwa<i class="material-icons md-36"></i> */.material-icons.md-48 {font-size: 48px;} /* kwa<i class="material-icons md-48"></i> */Rangi ya ikoni
Rangi ya icons pia imewekwa kwa kutumia madarasa ya ziada:
.material-icons.md-giza {rangi: rgba (0, 0, 0, 0.54);} /*<i class="material-icons md-dark"></i> */.material-icons.md-light {rangi: rgba (255, 255, 255, 1);} /*<i class="material-icons md-light"></i> */.material-icons.md-dark.md-haifanyi kazi {rangi: rgba (0, 0, 0, 0.26);} /*<i class="material-icons md-dark md-inactive"></i> * /.material-icons.md-light.md-haifanyi kazi {rangi: rgba (255, 255, 255, 0.3);} /*<i class="material-icons md-light md-inactive">uso</i> */Ili kuweka rangi ya kawaida, unahitaji kuongeza darasa ambalo linafafanua rangi ya ikoni, kwa mfano:
.material-icons.indigo {rangi: #1a237e;} /*<i class="material-icons indigo"></i> */Maswali Yanayoulizwa Mara Kwa Mara
- Je! Fonti ni ya kushangaza kwa maneno rahisi?
- Kwa asili, ni font na icons ambazo zinaweza kuongezwa kwa kitu chochote cha ukurasa wa wavuti ili kuongeza mwonekano wake na muundo. Mkusanyiko huo una icons mia kadhaa zinazofaa kwa kazi na kusudi lolote.Maelezo zaidi juu ya kiungo hiki.
Michel Pinson ni msaidizi wa kusafiri na muundaji wa yaliyomo. Kuunganisha shauku ya elimu na utafutaji, alijitolea kushiriki maarifa na kuhamasisha wengine kupitia kuvutia maudhui ya kielimu. Kuleta ulimwengu karibu na kuwezesha watu na utaalam wa ulimwengu na hali ya kuzunguka.
