Font anotyisa 6: kuongorora kwakazara
- 1 Maitiro ekuisa font anotyisa
- Nzira 1.
- Nzira 2.
- 2 Maitiro Ekushandisa Font Allones All Icons
- 1 zviyero zvidhori
- 2 zvifananidzo zvidiki
- 3 yakagadziriswa zvidhori zvidhori
- 4 Icons for Lullated rondedzero
- 5 mifananidzo yakavezwa nemavara
- 6 Zviratidzo zvidhori
- 7 Shanduko INCONS
- 8 manhamba ezvibvumirano
- 3 Font Awesome 4.5.0 collection, classes uyecss code to insert using the content property
- 4 Zvekuenderana Zviwanikwa
- Icon icon
- Icon colour
- Mibvunzo Inowanzo Bvunzwa
Font AWESOME kuunganidzwa kweiyo inotsvaira vector icons. Icons inogona kuumbwa uchishandisa CSS zvivakwa, seta ruvara rwavo, saizi, mumvuri uye zvimwe zvakawanda. Font Shanduro 5.5.0 inosanganisira 605 Icons.
1 Maitiro ekuisa font anotyisa
Nzira 1.
Shandisa iyo font-inoshamisa.css shanduro yefaira nekuwedzera iyo inotevera kodhi kune<head> Chikamu:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Kamwe chete font yakabatana, unogona kushandisa zvifananidzo pane yako saiti.
Nzira 2.
Download the font font kubva muzana font awiyo %%. Bvisa iyo Archive uye Isa mafolda maviri kubva muzvinyorwa kune saiti server - css uye fonts. Kana iwe watove nemafolda nemazita akadai pane yako saiti, ipapo iwe unongoda kuwedzera mafaera kubva kune yakadhindwa mafolda kwavari.
Iwe unogona kushandisa iyo yakazara yakazara kana yadyarwa shanduro yefaira:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Maitiro Ekushandisa Font Allones All Icons
Icons inogona kuwedzerwa kune peji rewebhu nenzira mbiri: nekuisa makirasi akakodzera e<i> uye<span> elements, kanaby adding them to the desired element using the :before, :after pseudo-elements uyethe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> LI: Asati A: "\ F015"; / * Wedzera Imba Icon * / Font-Mhuri: Ruvara: #aaaaa; margin-kurudyi: 10PX;}1 zviyero zvidhori
Font AWESOME yakagadzirirwa kushandiswa nezvinhu zvinotevera zvinhu. Kuti uwedzere zvidhori, iwe unotanga kuisa iyo iyo iyo iyo kirasi kune iyo<i> kana<span> chinhu.
Kuti uwedzere icon yakasarudzwa pamberi kana mushure meiyo chinhu, isina chinhu<i></i> kana<span></span> Element inowedzerwa kune iyo chinhu, iyo inopihwa kirasi icon, pamwe nekirasi yekuwedzera iyo inosvika pakutora styling.
<i class="fa fa-camera-retro"></i>2 zvifananidzo zvidiki
Kuti uwedzere kukura kweiyo ic ical yerecal kumudziyo wayo, shandisa FA-LG (33% Kuwedzera), FA-2X, FA-3X, FA-4X Makirasi.
<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 yakagadziriswa zvidhori zvidhori
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation kanalists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Imba</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Raibhurari</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Zvishandiso</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Zvirongwa</a ></li></ul>4 Icons for Lullated rondedzero
Shandisa iyo FA-UL uye FA-LA-LI Makirasi ekutsiva mabara emahara mu<ul>...</ul> Lullated rondedzero.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Nyora chinhu</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Nyora chinhu</li> <li><i class="fa-li fa fa-square"></i>Nyora chinhu</li></ul>5 mifananidzo yakavezwa nemavara
Use the fa-border class to set the border for the icon. The pull-right uyepull-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 kugara amet, consetetur adipiscing elit. DROC NEC PURUS CONUE, Posuere Libero In, Porta Sipoen. MuSEL ELIT lectus. Sed Lacus Elit, Semper Vitae Felis ID, sodales Cruue Sapien.</p>6 Zviratidzo zvidhori
Wedzera iyo FA-SPIN, FA-Pulse, F-Refresh, F-Cog Makirasi ekumisikidza mifananidzo inosemesa. Mifananidzo haina kutsigirwa muIE8 - 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 Shanduko INCONS
Kuti utenderedze kana kufungidzira mifananidzo, shandisa FATE- * uye FA-Flip- Kirasi.
<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 manhamba ezvibvumirano
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, uyefa-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 uyecss code to insert using the content property
Icons yeWebhu maficha Fa-gadzirisa - \ f042;FA-Anchor - \ F13D;
F-Archive - \ F187;
Fabrows - \ f047;
F-asterisk - \ f069;
FAAT - \ F1FA;
F-Balance-chiyero - \ f44e;
FA-Ban - \ F05E;
F-Bank - \ f19C;
F-Barcode - \ f02a;
F-Battery-isina-chinhu - \ f24;
F-Battery-hafu - \ F242;
F-Battery-quarter - \ f24;
F-Battery-matatu-matatu-makota - \ f241;
F-Battery-yakazara - \ F240;
F-mubhedha - \ F236;
F-Beer - \ f0FC;
F-Bell - \ F0F3;
F-Bell-Slash - \ F1F6;
F-Binoculars - \ F1E5;
FA-Birthday-keke - \ F1FD;
F-Bolt - \ F0e7;
F-BOMB - \ F1E2;
F-Book - \ f02d;
Kuti utenderedze kana kufungidzira mifananidzo, shandisa FATE- * uye FA-Flip- Kirasi.
4 Zvekuenderana Zviwanikwa
Pamusoro peiyo font inotyisa kuunganidzwa, iwe unogona kushandisa mamwe maofisi ex icon futi.
Fontello.fontello ine yakakura muunganidzwa wezvakasiyana-siyana econ fonts. Iwe unogona kusarudza zvidhori iwe unofarira uye uvatore pakombuta yako.
Icon icon.% Kuwedzera kune yakajairika mifananidzo, iyo saiti inoratidzira mifananidzo inotenderera, mifananidzo yezvemagariro, uye zvimwe.
zvitsva mifananidzo.Zvinyorwa zvezvinyorwa izvo zvakabatana zveGoogle maFlat Icons izvo zvinoratidzika zvakanaka zvekunzwisisa. Icons yakagadzirirwa kuratidzwa kwakanaka pane ese maPolitomu ese uye kune ese screen resolution.
Iyo icon Font Kuunganidzwa ine 750+ Icons. Nzira iri nyore yekuisa muunganidzwa pane yako webhusaiti ndeye kushandisa zvIcons seGoogle Webhu Fonts. Kuti uite izvi, iyo inotevera kodhi inosanganisirwa mune iyo peji peji peji:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Kuti unyatso ratidza font muBracks, chinhu icho chisingashandise icon
.matir-mIcons {Font-mhuri: 'mifananidzo yezvinhu'; Font-uremu: zvakajairika font-maitiro: zvakajairika font-size: 24px; / * Yakasarudzika icon size * / kuratidza: Inline-block; upamhi: 1; Kureba: 1; mutsara-kukwirira: 1; Zvinyorwa-chinja: Hapana; Tsamba-kupatsanura: Zvakajairika izwi-kuputira: zvakajairika; White-Space: ANDRAP; Kutungamirirwa: Ltr; -webkit-font-smoothing: Indialy; / * Inotsigirwa neese webkit bhurawuza * / zvinyorwa-kududzira: OptimizelELOGULLE; / * Safari uye Chrome Tsigiro * / -moz-Osx-Font-Smoothing: Gryycale; / * Firefox rutsigiro. * / Font-Feature-Zvirongwa: 'Liga'; / * Kureva rutsigiro. * /}Zvifananidzo ivo vanowedzerwa vachishandisa<I class=''material-Icons''>Ligature kana HTML kodhi yeiyo icon</i> Tag, semuenzaniso:
<i class="material-Icons">Akaunti_balance_wallet</i><i class="material-Icons"></i>Iyo ligature inonzwisiswa neyese mabhuku emazuva ano, kutanga kubva shanduro 10. Iyo icon code inogadzirwa otomatiki, nekuda kweizvozvo iwe unofanirwa kusiya-tinya pane icon mufananidzo uye tekopa iyo inotaridzika.
Icon icon
Icon icon is controlled by additional classes:
.Material-Icons.md-18 {font-size: 18px;} / * ye<i class="material-Icons md-18"></i> * /.Material-Icons.md-24 {font-size: 24px;} / * ye<i class="material-Icons md-24"></i> * /.material-Icons.md-36 {font-size: 36px;} / * ye<i class="material-Icons md-36"></i> * /.Material-Icons.md-48 {font-size: 48px;} / * ye<i class="material-Icons md-48"></i> * /Icon colour
Ruvara rwezvifananidzo rwunoiswawo uchishandisa mamwe makirasi:
.material-Icons.md-yakasviba {ruvara: Rgba (0, 0, 0, 0.54);} / * / *<i class="material-Icons md-dark"></i> * /.material-Icons.md-mwenje {ruvara: rgba (255, 255, 255,} / * / *<i class="material-Icons md-light"></i> * /.Material-Icons.md-yakasviba.md-isingashande {ruvara: Rgba (0, 0, 0, 0.26);} / * / *<i class="material-Icons md-dark md-inactive"></i> * /.Material-Icons.md-mwenje.md-isingashande {ruvara: Rgba (255, 255, 255, * / *<i class="material-Icons md-light md-inactive">Chiso</i> * /Kuti uise ruvara rwetsika, iwe unofanirwa kuwedzera kirasi inotsanangura ruvara rwe icon, semuenzaniso:
.material-Icons.indigo {ruvara: # 1a237e;} / *<i class="material-Icons indigo"></i> * /Mibvunzo Inowanzo Bvunzwa
- Chii chinonzi font zvinotyisa mumitemo yakapusa?
- Mukukosha, iyo font ine zvidhori zvinogona kuwedzerwa kune chero peji rewebhu peji rekusimudzira kuoneka kwayo uye dhizaini. Iko kuunganidza kune mazana emazana emazana icons yakakodzera chero basa uye chinangwa.Ruzivo rwakawanda pane iyi link
Michel Pinhon mutambo wekufamba nechido uye zviri pachena. Kubatanidza chido chedzidzo uye kuongorora, iye anenge achigovana kugovana ruzivo uye anokurudzira vamwe kuburikidza nezvirevo zvekudzidzisa. Kuunza nyika iri pedyo pamwe nekupa simba vanhu vane hunyanzvi hwepasi rose uye pfungwa yekudzungaira.
