Cló uamhnach 6: Athbhreithniú iomlán
- 1 Conas cló uamhnach a shuiteáil
- Modh 1.
- Modh 2.
- 2 Conas deilbhíní Awesome cló a úsáid
- 1 deilbhíní caighdeánacha
- 2 deilbhín mhóra
- 3 deilbhín leithead seasta
- 4 deilbhín le haghaidh liosta bulleted
- 5 deilbhíní agus luachana frámaithe
- 6 deilbhín beoite
- 7 deilbhíní claochlaithe
- 8 deilbhín teaglaim
- 3 Font Awesome 4.5.0 collection, classes iscss code to insert using the content property
- 4 Acmhainní Gaolmhara
- Méid an deilbhín
- Dath icon
- Ceisteanna Coitianta
Is bailiúchán de deilbhíní veicteoir inscálaithe é Font Awesome. Is féidir deilbhíní a fhormáidiú ag baint úsáide as airíonna CSS, a dath, a méid, a scáth agus a lán eile a leagan síos. Cuimsíonn Leagan Cló 5.5.0 605 deilbhín.
1 Conas cló uamhnach a shuiteáil
Modh 1.
Bain úsáid as an leagan font-awesome.css den chomhad tríd an gcód seo a leanas a chur leis an<head> ROINN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Nuair a bhíonn an cló ceangailte, is féidir leat na deilbhíní a úsáid ar do shuíomh.
Modh 2.
Íoslódáil an cló ó Font Awesome . Díphacáil an chartlann agus uaslódáil dhá fhillteán ón gcartlann go dtí an freastalaí láithreáin - CSS agus clónna. Má tá fillteáin agat cheana féin le hainmneacha den sórt sin ar do shuíomh, ansin ní gá duit ach comhaid a chur leis na fillteáin íoslódáilte chucu.
Is féidir leat an leagan iomlán nó mionathraithe den chomhad a úsáid:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Conas deilbhíní Awesome cló a úsáid
Is féidir deilbhíní a chur le leathanach gréasáin ar dhá bhealach: trí na ranganna cuí a shocrú don<i> is<span> elements, nóby adding them to the desired element using the :before, :after pseudo-elements isthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: roimh {ábhar: "f015";1 deilbhíní caighdeánacha
Tá Font Awesome deartha le húsáid le heilimintí inlíne. D'fhonn deilbhíní a chur leis, ní mór duit an rang FA a chur ar an gcéad dul síos<i> nó<span> eilimint.
Chun an deilbhín roghnaithe a chur leis roimh an eilimint nó ina dhiaidh, folamh<i></i> nó<span></span> Cuirtear eilimint leis an eilimint, a shanntar rang deilbhín dó, chomh maith le rang breise a leathnaíonn an styling.
<i class="fa fa-camera-retro"></i>2 deilbhín mhóra
Chun méid deilbhín a mhéadú i gcoibhneas lena choimeádán, bain úsáid as na ranganna 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 deilbhín leithead seasta
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation nólists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Áit</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Leabharlann</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Feidhmithe</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Socruithe</a ></li></ul>4 deilbhín le haghaidh liosta bulleted
Bain úsáid as na ranganna FA-ul agus FA-li chun na hurchair réamhshocraithe a athsholáthar in a<ul>…</ul> Liosta Bulleted.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Mír Liosta</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Mír Liosta</li> <li><i class="fa-li fa fa-square"></i>Mír Liosta</li></ul>5 deilbhíní agus luachana frámaithe
Use the fa-border class to set the border for the icon. The pull-right ispull-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, CESTECTUTUR ADIPISCING ELIT. Donec NEC Purus Congue, Libero posuere i, Porta Sapien. I SED Elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 deilbhín beoite
Cuir na ranganna FA-SPIN, FA-PULSE, FA-Refresh, FA-COG chun deilbhíní sníomh a bhunú. Ní thacaítear le beochan in 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 deilbhíní claochlaithe
Chun deilbhíní a rothlú nó a shmeach, bain úsáid as na ranganna FA-Rotate-* agus 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 deilbhín teaglaim
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, isfa-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 iscss code to insert using the content property
Deilbhíní le haghaidh feidhmchlár gréasáin FA -Adjust - F042;FA -aniste - f13d;
FA -Archive - F187;
FA -Arrows - F047;
FA -Asterisk - F069;
FAAT - F1FA;
Scála-scála-f24e;
FA -BAN - F05E;
FA -Bank - f19c;
FA -Barcode - F02A;
FA-Battery-Empty-F244;
FA-BATERY-HALF-F242;
FA-Beattery-Queter-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;
Císte lá breithe-f1fd;
FA -BOLT - F0E7;
FA -Bomb - F1E2;
FA -Book - f02d;
Chun deilbhíní a rothlú nó a shmeach, bain úsáid as na ranganna FA-Rotate-* agus FA-Flip-*.
4 Acmhainní Gaolmhara
Chomh maith leis an mbailiúchán uamhnach cló, is féidir leat clónna icon eile a úsáid freisin.
Fontello.Tá bailiúchán mór de chlónna deilbhín éagsúla ag Fontello . Is féidir leat na deilbhíní is mian leat a roghnú agus iad a íoslódáil chuig do ríomhaire.
Deilbhín Fondúireachta.Is bailiúchán cló deilbhín eile é ó fhorbróirí an chreata Fondúireachta. Chomh maith le deilbhíní caighdeánacha, tá deilbhíní cruinn, deilbhíní sna meáin shóisialta, agus níos mó sa suíomh.
deilbhíní ábhartha.Is iad na deilbhíní ábhartha deilbhíní cothrom aontaithe Google a chuimsíonn éascaíocht an dearcadh. Déantar deilbhíní a bharrfheabhsú le haghaidh taispeána álainn ar gach ardán coitianta agus le haghaidh gach rúin scáileáin.
Tá 750+ deilbhín sa bhailiúchán cló icon. Is é an bealach is éasca chun bailiúchán a shuiteáil ar do láithreán gréasáin ná deilbhíní a úsáid mar Google Web Clónna. Chun é seo a dhéanamh, tá an cód seo a leanas san áireamh sa Page Markup:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Chun an cló a thaispeáint i gceart i mbrabhsálaithe, tugtar an aicme ábhair-Icons don ghné a úsáidfidh an cló deilbhín:
. Cló-mheáchan: gnáth-stíl an chló: gnáthmhéid an chló: 24px; / * Méid an deilbhín is fearr */ taispeáint: bloc inlíne; Leithead: 1em; Airde: 1em; Líne Líne: 1; Téacs-Transform: Dada; Spás litreach: gnáth-wrap focal: gnáth; Spás bán: Nowrap; Treo: LTR; -Webkit-font-smúdála: Antialaiated; / * Tacaithe ag gach brabhsálaí WebKit */ Téacs-Téacs: Optimizelegibility; / * Tacaíocht Safari agus Chrome */ -Moz-OSX-Font-Smúdála: Grayscale; /* Tacaíocht Firefox. */ Settings Font-Feola: 'Liga'; /* Ie tacaíocht. */}Cuirtear na deilbhíní iad féin leis an<I class=''material-icon''>cód ligature nó html den deilbhín</i> Clib, mar shampla:
<i class="material-icon">cuntas_balance_wallet</i><i class="material-icon"></i>Tuigeann gach brabhsálaí nua -aimseartha an ligature, ie - ag tosú ó leagan 10. Gintear an cód deilbhín go huathoibríoch, mar seo ní mór duit cliceáil ar an íomhá deilbhín agus an cuma a mholtar a chóipeáil.
Méid an deilbhín
Méid an deilbhín is controlled by additional classes:
.material-icon.md-18 {font-mhéid: 18px;} /* le haghaidh<i class="material-icon md-18"></i> */.material-icon.md-24 {font-mhéid: 24px;} /* le haghaidh<i class="material-icon md-24"></i> */.material-icon.md-36 {font-mhéid: 36px;} /* le haghaidh<i class="material-icon md-36"></i> */.material-icon.md-48 {font-mhéid: 48px;} /* le haghaidh<i class="material-icon md-48"></i> */Dath icon
Socraítear dath na n -deilbhíní freisin ag úsáid ranganna breise:
.<i class="material-icon md-dark"></i> */.<i class="material-icon md-light"></i> */.material-icon.md-dark.md-neamhghníomhach {dath: rgba (0, 0, 0, 0.26);} /*<i class="material-icon md-dark md-inactive"></i> * /.Material-Icons.md-light.md-neamhghníomhach {dath: rgba (255, 255, 255, 0.3);} /*<i class="material-icon md-light md-inactive">dánacht</i> */Chun dath saincheaptha a shocrú, ní mór duit rang a chur leis a shainmhíníonn dath an deilbhín, mar shampla:
.Material-cons.indigo {dath: #1a237e;} /*<i class="material-icon indigo"></i> */Ceisteanna Coitianta
- Cad é Font Awesome i dtéarmaí simplí?
- Go bunúsach, is cló é le deilbhíní ar féidir é a chur le haon eilimint leathanach gréasáin chun a infheictheacht agus a dhearadh a fheabhsú. Is éard atá sa bhailiúchán ná roinnt céad deilbhín atá oiriúnach d'aon tasc agus cuspóir.Tuilleadh eolais ar an nasc seo
Is díograiseoir taistil agus cruthaitheoir ábhair é Michel Pinson. Agus é ag cumasc paisean don oideachas agus don taiscéalaíocht, bhí sé in ann eolas a roinnt agus daoine eile a spreagadh trí ábhar oideachais a spreagadh. An domhan a thabhairt níos gaire dá chéile trí dhaoine aonair a bhfuil saineolas domhanda acu a chumhachtú agus braistint wanderlust.
