Šriftas nuostabus 6: visa apžvalga
- 1 Kaip įdiegti nuostabų šriftą
- 1 metodas.
- 2 metodas.
- 2 Kaip naudoti nuostabias šrifto piktogramas
- 1 standartinės piktogramos
- 2 didelės piktogramos
- 3 fiksuoto pločio piktogramos
- 4 piktogramų sąraše
- 5 įrėmintos piktogramos ir citatos
- 6 animacinės piktogramos
- 7 transformuotos piktogramos
- 8 kombinuotos piktogramos
- 3 Font Awesome 4.5.0 collection, classes ircss code to insert using the content property
- 4 susiję šaltiniai
- Piktogramos dydis
- Piktogramos spalva
- Dažnai Užduodami Klausimai
„Font Awesome“ yra keičiamų vektorinių piktogramų kolekcija. Piktogramos gali būti suformatuotos naudojant CSS ypatybes, nustatykite jų spalvą, dydį, šešėlį ir daug daugiau. Šrifto 5.5.0 versijoje yra 605 piktogramų.
1 Kaip įdiegti nuostabų šriftą
1 metodas.
Naudokite failo versiją šriftą-awesome.css, pridėdami šį kodą prie<head> skyrius:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Prijungus šriftą, galite naudoti savo svetainės piktogramas.
2 metodas.
Atsisiųskite šriftą iš FONT Awesome . Išpakuokite archyvą ir įkelkite du aplankus iš archyvo į svetainės serverį - CSS ir šriftus. Jei jau turite aplankus su tokiais pavadinimais savo svetainėje, jums tereikia pridėti failus iš atsisiųstų aplankų prie jų.
Galite naudoti visą ar minifikuotą failo versiją:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kaip naudoti nuostabias šrifto piktogramas
Piktogramas galima pridėti prie tinklalapio dviem būdais: nustatant tinkamas klases<i> ir<span> elements, arbaby adding them to the desired element using the :before, :after pseudo-elements irthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Prieš {turinys: "\ f015";/ * pridėti namų piktogramą */font-family: fontawesome; spalva: #aaaaaa; maržos dešinė: 10px;};}1 standartinės piktogramos
„Font Awesome“ yra skirtas naudoti su inline elementais. Norėdami pridėti piktogramas, pirmiausia turite nustatyti FA klasę į<i> arba<span> elementas.
Norėdami pridėti pasirinktą piktogramą prieš arba po elemento, tuščias<i></i> arba<span></span> Elementas pridedamas prie elemento, kuriam priskiriama piktogramų klasė, taip pat papildoma klasė, pratęsianti stilių.
<i class="fa fa-camera-retro"></i>2 didelės piktogramos
Norėdami padidinti ikonos dydį, palyginti su jos konteineriu, naudokite FA-LG (33% padidėjimą), FA-2X, FA-3X, FA-4X, FA-5X klases.
<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 fiksuoto pločio piktogramos
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation arbalists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Namai</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteka</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Programos</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Nustatymai</a ></li></ul>4 piktogramų sąraše
Naudokite FA-UL ir FA-LI klases, kad pakeistumėte numatytąsias kulkas a<ul>…</ul> žygeivių sąrašas.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Sąrašo elementas</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Sąrašo elementas</li> <li><i class="fa-li fa fa-square"></i>Sąrašo elementas</li></ul>5 įrėmintos piktogramos ir citatos
Use the fa-border class to set the border for the icon. The pull-right irpull-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 elitas. „Donec Nec PURUS COPUE“, „Posuere Libero“, Porta Sapien. „Sed Elit Lectus“. SED LACUS ELIT, SEMPER VITAE FELIS ID, SODALES COCKUE SAPIEN.</p>6 animacinės piktogramos
Pridėkite „FA-Spin“, „FA-pulse“, „FA-Refresh“, „FA-COG“ klases, kad nustatytumėte verpimo piktogramas. Animacija nepalaikoma 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 transformuotos piktogramos
Norėdami pasukti ar apversti piktogramas, naudokite FA-ROTATE-* ir FA-FLIP-* klases.
<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 kombinuotos piktogramos
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, irfa-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 ircss code to insert using the content property
Žiniatinklio programų piktogramos Fa -rust - \ f042;Fa -chor - \ f13d;
Fa -archive - \ f187;
Fa -arrows - \ f047;
Fa -Aasterisk - \ f069;
Faat - \ f1fa;
FA balanso skalė-\ f24e;
Fa -ban - \ f05e;
Fa -bankas - \ f19c;
Fa -barkodas - \ f02a;
Fa-battery-glety-\ f244;
Fa-battery-half-\ f242;
Fa-Battery-Quarter-\ f243;
Fa-battery-trys ketvirčiai-\ f241;
Fa-battery-pilnas-\ f240;
Fa -lov - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binoculars - \ f1e5;
Fa-birthday-cake-\ f1fd;
Fa -boltas - \ f0e7;
Fa -bomba - \ f1e2;
Fa -book - \ f02d;
Norėdami pasukti ar apversti piktogramas, naudokite FA-ROTATE-* ir FA-FLIP-* klases.
4 susiję šaltiniai
Be „Font Awesome“ kolekcijos, taip pat galite naudoti ir kitus piktogramų šriftus.
FonteLlo.fontello turi didelę įvairių piktogramų šriftų kolekciją. Galite pasirinkti jums patinkančias piktogramas ir atsisiųsti jas į savo kompiuterį.
Fondo piktograma.Foundation Icon yra dar viena piktogramų šrifto kolekcija iš „The Fondo Framework“ kūrėjų. Be standartinių piktogramų, svetainėje yra apvalios piktogramos, socialinės žiniasklaidos piktogramos ir dar daugiau.
Medžiagos piktogramos.Medžiagos piktogramos yra vieningos „Google“ plokščios piktogramos, įkūnijančios paprastą suvokimą. Piktogramos yra optimizuotos gražiam ekranui visose įprastose platformose ir visoms ekrano skiriamosioms dalims.
„Icon Font“ kolekcijoje yra 750 ir daugiau piktogramų. Lengviausias būdas įdiegti kolekciją savo svetainėje yra naudoti tokias piktogramas kaip „Google Web“ šriftai. Norėdami tai padaryti, šis kodas yra įtrauktas į puslapio žymėjimą:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Norėdami teisingai rodyti šriftą naršyklėse, elementas, kuris naudos piktogramos šriftą, pateikiamas „Material-Icons“ klasė:
. Medžiagos-piktogramos {font-family: 'medžiagos piktogramos'; Šrifto svoris: normalus šrifto stilius: normalus šrifto dydis: 24 piks.; / * Pageidaujama piktogramos dydis */ ekranas: blokas; plotis: 1EM; Aukštis: 1EM; Linijos aukštis: 1; teksto transformacija: nėra; Atsparumas raidėms: normalus žodžių riba: normalus; Baltoji erdvė: NowRap; Kryptis: LTR; -webkit-font-mmošėjimas: antialiased; / * Palaikomos visos „WebKit“ naršyklės */ Teksto perdavimas: optimizavimas; / * „Safari“ ir „Chrome“ palaikymas */ -MOZ-OSX-Font-Mmoothing: pilkos spalvos; /* „Firefox“ palaikymas. */ „Font-Feature-Settings“: „Liga“; /* Ty palaikymas. */}Pačios piktogramos pridedamos naudojant<I class=''material-piktogramos''>Ligature arba HTML piktogramos kodas</i> Žyma, pavyzdžiui:
<i class="material-piktogramos">Account_balance_wallet</i><i class="material-piktogramos"></i>Ligūrą supranta visos šiuolaikinės naršyklės, ty - pradedant nuo 10 versijos. Ikonos kodas generuojamas automatiškai, tam reikia kairiojo spustelėti piktogramos vaizdą ir nukopijuoti siūlomą išvaizdą.
Piktogramos dydis
Piktogramos dydis is controlled by additional classes:
.Material-piktogramos.md-18 {font-size: 18px;} /* for<i class="material-piktogramos md-18"></i> */.Material-piktogramos.md-24 {font-size: 24px;} /* for<i class="material-piktogramos md-24"></i> */.Material-piktogramos.md-36 {font-size: 36px;} /* for<i class="material-piktogramos md-36"></i> */.Material-piktogramos.md-48 {font-size: 48px;} /* for<i class="material-piktogramos md-48"></i> */Piktogramos spalva
Ikonų spalva taip pat nustatoma naudojant papildomas klases:
.Material-piktogramos.md-dark {color: rgba (0, 0, 0, 0,54);} /*<i class="material-piktogramos md-dark"></i> */.Medžiagos-piktogramos.md-šviesa {spalva: rgba (255, 255, 255, 1);} /*<i class="material-piktogramos md-light"></i> */.Material-piktogramos.md-dark.md-inaktive {color: rgba (0, 0, 0, 0,26);} /*<i class="material-piktogramos md-dark md-inactive"></i> * /.Material-piktogramos.md-light.md-inaktive {color: rgba (255, 255, 255, 0,3);} /*<i class="material-piktogramos md-light md-inactive">veidas</i> */Norėdami nustatyti pasirinktinę spalvą, turite pridėti klasę, kuri apibrėžia, pavyzdžiui, piktogramos spalvą:
.Material-Icons.indigo {Spalva: #1a237e;} /*<i class="material-piktogramos indigo"></i> */Dažnai Užduodami Klausimai
- Kas yra nuostabi, paprasta prasme?
- Iš esmės tai yra šriftas su piktogramomis, kurias galima pridėti prie bet kurio tinklalapio elemento, kad padidintumėte jo matomumą ir dizainą. Kolekciją sudaro keli šimtai piktogramų, tinkančių bet kuriai užduotims ir tikslui.Daugiau informacijos apie šią nuorodą
Michel Pinson yra kelionių entuziastų ir turinio kūrėjas. Susikerdamas aistrai švietimui ir tyrinėjimui, jis yra skirtas dalintis žiniomis ir įkvėpti kitus žavėdamasi edukaciniu turiniu. Suartinant pasaulį suteikiant įgalinant asmenis, turinčius pasaulinės patirties, ir klaidžiojimo jausmą.
