Font Galing 6: Buong pagsusuri
Ang Font Galing ay isang koleksyon ng mga scalable vector icon. Ang mga icon ay maaaring mai -format gamit ang mga katangian ng CSS, itakda ang kanilang kulay, laki, anino at marami pa. Ang bersyon ng font 5.5.0 ay may kasamang 605 mga icon.
1 Paano mag -install ng kamangha -manghang font
Paraan 1.
Gumamit ng bersyon ng font-great.css ng file sa pamamagitan ng pagdaragdag ng sumusunod na code sa<head> Seksyon:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Kapag nakakonekta ang font, maaari mong gamitin ang mga icon sa iyong site.
Paraan 2.
I -download ang font mula sa font kahanga -hangang . I -unpack ang archive at mag -upload ng dalawang folder mula sa archive hanggang sa server ng site - CSS at font. Kung mayroon ka nang mga folder na may mga nasabing pangalan sa iyong site, kailangan mo lamang magdagdag ng mga file mula sa mga nai -download na folder sa kanila.
Maaari mong gamitin ang buo o minified na bersyon ng file:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Paano gamitin ang mga kamangha -manghang mga icon ng font
Maaaring maidagdag ang mga icon sa isang web page sa dalawang paraan: sa pamamagitan ng pagtatakda ng naaangkop na mga klase para sa<i> at<span> elements, oby adding them to the desired element using the :before, :after pseudo-elements atthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: bago ang {nilalaman: "\ f015";/ * magdagdag ng icon ng bahay */font-pamilya: fontawesome; kulay: #aaaaaa; margin-kanan: 10px;}1 karaniwang mga icon
Ang kamangha -manghang font ay idinisenyo upang magamit sa mga elemento ng inline. Upang magdagdag ng mga icon, kailangan mo munang itakda ang klase ng FA sa<i> o<span> elemento.
Upang idagdag ang napiling icon bago o pagkatapos ng elemento, isang walang laman<i></i> o<span></span> Ang elemento ay idinagdag sa elemento, na itinalaga ng isang klase ng icon, pati na rin ang isang karagdagang klase na nagpapalawak ng estilo.
<i class="fa fa-camera-retro"></i>2 Malaking mga icon
Upang madagdagan ang laki ng isang icon na may kaugnayan sa lalagyan nito, gamitin ang FA-LG (33% na pagtaas), FA-2X, FA-3X, FA-4X, FA-5X na mga klase.
<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 Nakapirming mga icon ng lapad
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation olists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Library</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Mga Aplikasyon</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Mga setting</a ></li></ul>4 na mga icon para sa listahan ng bullet
Gamitin ang mga klase ng FA-UL at FA-LI upang mapalitan ang mga default na bala sa a<ul>…</ul> Listahan ng Bullet.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Ilista ang item</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Ilista ang item</li> <li><i class="fa-li fa fa-square"></i>Ilista ang item</li></ul>5 naka -frame na mga icon at quote
Use the fa-border class to set the border for the icon. The pull-right atpull-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 In, Porta Sapien. Sa sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>6 animated icon
Idagdag ang FA-spin, fa-pulse, fa-refresh, mga klase ng fa-cog upang mai-set up ang mga icon ng pag-ikot. Ang animation ay hindi suportado sa 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 Binagong mga icon
Upang paikutin o i-flip ang mga icon, gamitin ang mga klase ng fa-rotate-* at 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 Mga icon ng kumbinasyon
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, atfa-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 atcss code to insert using the content property
Mga icon para sa mga aplikasyon sa web Fa -adjust - \ f042;Fa -anchor - \ f13d;
Fa -archive - \ f187;
FA -Arrows - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
Fa-balanse-scale-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
FA-Battery-Empty-\ F244;
Fa-battery-half-\ f242;
FA-Battery-Quarter-\ F243;
FA-Battery-Three-Quarters-\ F241;
FA-Battery-Full-\ F240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -BINOCULARS - \ F1E5;
Fa-birthday-cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomba - \ f1e2;
Fa -book - \ f02d;
Upang paikutin o i-flip ang mga icon, gamitin ang mga klase ng fa-rotate-* at fa-flip-*.
4 na mga kaugnay na mapagkukunan
Bilang karagdagan sa kamangha -manghang koleksyon ng font, maaari mo ring gamitin ang iba pang mga font ng icon.
Fontello.Ang Fontello ay may malaking koleksyon ng iba't ibang mga font ng icon. Maaari mong piliin ang mga icon na gusto mo at i -download ang mga ito sa iyong computer.
Icon ng pundasyon.Ang Icon ay isa pang koleksyon ng font ng Icon mula sa mga nag -develop ng Foundation Framework. Bilang karagdagan sa mga karaniwang mga icon, ang site ay nagtatampok ng mga bilog na icon, mga Icon ng social media, at marami pa.
Mga icon ng materyal.Ang mga materyal na icon ay pinag -isang mga icon ng Google na pinag -isa na kadalian ng pang -unawa. Ang mga icon ay na -optimize para sa magagandang pagpapakita sa lahat ng mga karaniwang platform at para sa lahat ng mga resolusyon sa screen.
Ang koleksyon ng font ng icon ay naglalaman ng 750+ mga icon. Ang pinakamadaling paraan upang mag -i -install ng isang koleksyon sa iyong website ay ang paggamit ng mga icon tulad ng Google Web font. Upang gawin ito, ang sumusunod na code ay kasama sa markup ng pahina:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Upang maipakita nang tama ang font sa mga browser, ang elemento na gagamitin ng icon font ay bibigyan ng klase ng materyal-mga icon:
.material-mga icon {font-family: 'materyal na mga icon'; Font-Weight: Normal na Font-Style: Normal na Font-size: 24px; / * Ginustong laki ng icon */ display: inline-block; lapad: 1em; Taas: 1em; Linya-Timbang: 1; Text-Transform: Wala; Letter-spacing: normal na Word-Wrap: Normal; White-Space: Nowrap; Direksyon: LTR; -Webkit-font-smoothing: antialiased; / * Suportado ng lahat ng mga browser ng Webkit */ text-rendering: optimizelegibility; / * Suporta sa safari at chrome */ -moz-osx-font-smoothing: grayscale; /* Suporta sa Firefox. */ font-feature-settings: 'liga'; /* IE Suporta. */}Ang mga icon mismo ay idinagdag gamit ang<I class=''material-mga icon''>ligature o html code ng icon</i> tag, halimbawa:
<i class="material-mga icon">Account_Balance_Wallet</i><i class="material-mga icon"></i>Ang ligature ay nauunawaan ng lahat ng mga modernong browser, ibig sabihin - simula sa bersyon 10. Ang icon code ay awtomatikong nabuo, para dito kailangan mong mag -kaliwa sa imahe ng icon at kopyahin ang iminungkahing hitsura.
Laki ng icon
Laki ng icon is controlled by additional classes:
.material-mga icon.md-18 {font-size: 18px;} /* para sa<i class="material-mga icon md-18"></i> */.material-mga icon.md-24 {font-size: 24px;} /* para sa<i class="material-mga icon md-24"></i> */.material-mga icon.md-36 {font-size: 36px;} /* para sa<i class="material-mga icon md-36"></i> */.material-mga icon.md-48 {font-size: 48px;} /* para sa<i class="material-mga icon md-48"></i> */Kulay ng Icon
Ang kulay ng mga icon ay nakatakda din gamit ang mga karagdagang klase:
.material-mga icon.md-dark {kulay: rgba (0, 0, 0, 0.54);} /*<i class="material-mga icon md-dark"></i> */.material-mga icon.md-light {kulay: rgba (255, 255, 255, 1);} /*<i class="material-mga icon md-light"></i> */.material-mga icon.md-dark.md-inactive {kulay: rgba (0, 0, 0, 0.26);} /*<i class="material-mga icon md-dark md-inactive"></i> * /.material-mga icon.md-light.md-inactive {kulay: rgba (255, 255, 255, 0.3);} /*<i class="material-mga icon md-light md-inactive">mukha</i> */Upang magtakda ng isang pasadyang kulay, kailangan mong magdagdag ng isang klase na tumutukoy sa kulay ng icon, halimbawa:
.material-cons.indigo {kulay: #1a237e;} /*<i class="material-mga icon indigo"></i> */Madalas Na Nagtanong
- Ano ang kahanga -hangang font sa mga simpleng term?
- Sa esensya, ito ay isang font na may mga icon na maaaring maidagdag sa anumang elemento ng web page upang mapahusay ang kakayahang makita at disenyo nito. Ang koleksyon ay binubuo ng ilang daang mga icon na angkop para sa anumang gawain at layunin.Higit pang impormasyon sa link na ito
