Font Awesome 6: Potpuni pregled
- 1 Kako instalirati font super
- Metoda 1.
- Metoda 2.
- 2 Kako koristiti fontove fantastične ikone
- 1 standardne ikone
- 2 velike ikone
- 3 ikone fiksne širine
- 4 ikone za popisu s metkom
- 5 uokvirenih ikona i citata
- 6 animiranih ikona
- 7 transformiranih ikona
- 8 kombiniranih ikona
- 3 Font Awesome 4.5.0 collection, classes icss code to insert using the content property
- 4 Povezana resursa
- Veličina ikone
- Ikona boja
- Često Postavljana Pitanja
Font Awesome je zbirka skalabilnih vektorskih ikona. Ikone se mogu oblikovati pomoću CSS svojstava, postaviti njihovu boju, veličinu, sjenu i još mnogo toga. FONT verzija 5.5.0 uključuje 605 ikona.
1 Kako instalirati font super
Metoda 1.
Upotrijebite verziju datoteke font-awesome.css dodavanjem sljedećeg koda u<head> odjeljak:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Nakon što je font povezan, ikone možete koristiti na vašoj web lokaciji.
Metoda 2.
Preuzmite font iz FONT AWESOME . Raspakirajte arhivu i prenesite dvije mape iz arhive na poslužitelj web mjesta - CSS i fontovi. Ako već imate mape s takvim imenima na vašoj web lokaciji, tada morate samo dodati datoteke iz preuzete mape.
Možete koristiti cijelu ili mini verziju datoteke:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kako koristiti fontove fantastične ikone
Ikone se mogu dodati na web stranicu na dva načina: Postavljanjem odgovarajućih klasa za<i> i<span> elements, iliby adding them to the desired element using the :before, :after pseudo-elements ithe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: prije {sadržaj: "\ f015";/ * Dodaj ikonu kućne ikone */font-obitelj: fontawesome; boja: #AAAAAA; margin-desno: 10px;}1 standardne ikone
Font Awesome dizajniran je za korištenje s inline elementima. Da biste dodali ikone, prvo morate postaviti klasu FA na<i> ili<span> element.
Da biste dodali odabranu ikonu prije ili nakon elementa, prazan<i></i> ili<span></span> Element se dodaje elementu, kojem je dodijeljena klasa ikona, kao i dodatna klasa koja proširuje stil.
<i class="fa fa-camera-retro"></i>2 velike ikone
Da biste povećali veličinu ikone u odnosu na njegov spremnik, koristite FA-LG (povećanje od 33%), FA-2X, FA-3X, FA-4X, FA-5X 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 ikone fiksne širine
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation ililists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Dom</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Knjižnica</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Prijava</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Postavke</a ></li></ul>4 ikone za popisu s metkom
Koristite klase FA-UL i FA-LI da biste zamijenili zadane metke u a<ul>...</ul> Popis s metkom.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Popis stavka</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Popis stavka</li> <li><i class="fa-li fa fa-square"></i>Popis stavka</li></ul>5 uokvirenih ikona i citata
Use the fa-border class to set the border for the icon. The pull-right ipull-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, consecetur adipiscing elit. Donec Nec Purus Congus, Posuere Libero u, Porta Sapien. U sed elit lectusu. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animiranih ikona
Dodajte FA-Spin, Fa-pulse, Fa-Refresh, FA-COG klase za postavljanje ikona predenja. Animacija nije podržana u 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 transformiranih ikona
Za rotiranje ili okretanje ikona, koristite klase FA-rotate-* i 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 kombiniranih ikona
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, ifa-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 icss code to insert using the content property
Ikone za web aplikacije Fa -adjast - \ f042;Fa -arhor - \ f13d;
Fa -arhiv - \ f187;
Fa -arows - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
Falance-skala-\ f24e;
Fa -ban - \ f05e;
Fa -bakk - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-prazan-\ f244;
Fa-battery-pola-\ f242;
Fa-battery-quarter-\ f243;
Fa-battery-tri četvrtine-\ f241;
Fa-battery-puna-\ f240;
FA -BED - \ f236;
FA -BEER - \ F0FC;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binokulari - \ f1e5;
Fa-birthday-kolač-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomba - \ f1e2;
Fa -knjiga - \ f02d;
Za rotiranje ili okretanje ikona, koristite klase FA-rotate-* i fa-flip-*.
4 Povezana resursa
Pored kolekcije FONT AWESOME, možete koristiti i druge fontove ikona.
Fontello.Fontello ima veliku kolekciju različitih ikonskih fontova. Možete odabrati ikone koje vam se sviđaju i preuzeti ih na svoje računalo.
Ikona temelja.ICON FONDACIJA je još jedna zbirka fontova ikona od programera FONDACIJE Okvir. Pored standardnih ikona, web mjesto sadrži okrugle ikone, ikone društvenih medija i još mnogo toga.
ikone materijala.Materijalne ikone su Googleove objedinjene ravne ikone koje utjelovljuju jednostavnost percepcije. Ikone su optimizirane za prekrasan prikaz na svim uobičajenim platformama i za sve rezolucije zaslona.
Kolekcija fonta ikona sadrži 750+ ikona. Najlakši način instaliranja kolekcije na vašoj web lokaciji je korištenje ikona poput Google Web Fontova. Da biste to učinili, sljedeći kôd je uključen u oznaku stranice:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Da bi se pravilno prikazao font u preglednicima, element koji će koristiti ikonu fonta dobiva se klasa materijala-ikone:
.Material-ikone {font-obitelj: 'materijalne ikone'; Font-težina: normalan font-stil: normalna veličina fonta: 24px; / * Preferirana veličina ikone */ zaslon: inline-blok; Širina: 1em; Visina: 1em; Line-visina: 1; Tekst-transformacija: nijedan; Razmak slova: normalan omot riječi: normalno; Bijeli prostor: Nowrap; Smjer: LTR; -WebKit-rent-gnjavi: antialiasirani; / * Podržani svi preglednici WebKit */ RENDERSKI TEXT: Optimizelegibilnost; / * Safari i Chrome Podrška */ -moz-Osx-font-gladak: siva slova; /* Podrška Firefox -a. */ SETCHENTS FEATURE: 'liga'; /* IE podrška. */}Same se ikone dodaju pomoću<I class=''material-ikone''>ligatura ili html kod ikone</i> Oznaka, na primjer:
<i class="material-ikone">account_balance_wallelet</i><i class="material-ikone"></i>Ligaturu razumiju svi moderni preglednici, tj. Počevši od verzije 10. Kod ikona se generira automatski, jer to morate lijevo kliknuti na slici ikone i kopirati predloženi izgled.
Veličina ikone
Veličina ikone is controlled by additional classes:
.material-ikone.md-18 {font-size: 18px;} /* za<i class="material-ikone md-18"></i> */.material-ikone.md-24 {font-size: 24px;} /* za<i class="material-ikone md-24"></i> */.material-ikone.md-36 {font-size: 36px;} /* za<i class="material-ikone md-36"></i> */.material-ikone.md-48 {font-size: 48px;} /* za<i class="material-ikone md-48"></i> */Ikona boja
Boja ikona također se postavlja pomoću dodatnih klasa:
.material-ikone.md-tamk {color: rgba (0, 0, 0, 0,54);} /*<i class="material-ikone md-dark"></i> */.Material-ikone.md light {color: rgba (255, 255, 255, 1);} /*<i class="material-ikone md-light"></i> */.material-ikone.md-tark.md-inaktivan {color: rgba (0, 0, 0, 0,26);} /*<i class="material-ikone md-dark md-inactive"></i> * /.material-ikone.md light.md-inaktivno {color: rgba (255, 255, 255, 0,3);} /*<i class="material-ikone md-light md-inactive">lice</i> */Da biste postavili prilagođenu boju, morate dodati klasu koja definira boju ikone, na primjer:
.Material-ikone.indigo {Color: #1A237E;} /*<i class="material-ikone indigo"></i> */Često Postavljana Pitanja
- Što je font strašno u jednostavnom smislu?
- U osnovi, to je font s ikonama koje se mogu dodati bilo kojem elementu web stranice kako bi se poboljšala njegova vidljivost i dizajn. Zbirka se sastoji od nekoliko stotina ikona pogodnih za bilo koji zadatak i svrhu.Više informacija o ovoj vezi
Michel Pinson je ljubitelj putovanja i tvorac sadržaja. Spajajući strast prema obrazovanju i istraživanju, uputio je da dijeli znanje i nadahnjujući druge kroz očaravajuće obrazovne sadržaje. Okupljajući svijet osnaživanjem pojedinaca s globalnom stručnošću i osjećajem lutanja.
