Font Awesome 6: Potpuni pregled
- 1 Kako instalirati font fenomenalno
- 1. metoda 1.
- 2. metoda 2.
- 2 Kako koristiti fent fenomenalne ikone
- 1 standardne ikone
- 2 velike ikone
- 3 Ikone fiksne širine
- 4 ikone za listu
- 5 uokvirena ikona i citati
- 6 animiranih ikona
- 7 transformisanih 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
- Boja ikone
- Često Postavljana Pitanja
Font Awesome je zbirka skalabilnih vektorskih ikona. Ikone se mogu formatirati pomoću Svojstva CSS-a, postavite njihovu boju, veličinu, sjenu i još mnogo toga. Font Verzija 5.5.0 uključuje 605 ikona.
1 Kako instalirati font fenomenalno
1. metoda 1.
Koristite verziju FONT-AWESOME.CSS datoteke dodavanjem sljedećeg koda na<head> odjeljak:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Jednom kada je font povezan, možete koristiti ikone na vašoj web lokaciji.
2. metoda 2.
Preuzmite font iz font awesome . Otpakirajte arhivu i prenesite dvije mape iz arhive na server sajta - CSS i fontovi. Ako već imate mape s takvim imenima na vašoj web lokaciji, tada samo morate dodati datoteke iz preuzetih mapa na njih.
Možete koristiti punu ili minijaturu 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 fent fenomenalne 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 {content: "\ f015"; / * Dodaj ikonu kuće * / porodica font: fontawesome; boja: #aaaaaa; margin-desno: 10px;1 standardne ikone
FONT AWESOME dizajniran je za upotrebu sa inline elementima. Da biste dodali ikone, prvo trebate postaviti klasu FA na<i> ili<span> Element.
Za dodavanje odabrane ikone prije ili nakon elementa, prazan<i></i> ili<span></span> Element se dodaje u element koji je dodijeljen klasa ikone, 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 njen spremnik, koristite Fa-LG (33% povećanje), 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> Biblioteka</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplikacije</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Postavke</a ></li></ul>4 ikone za listu
Koristite Fa-ul i FA-LI časove za zamjenu zadanih metaka u a<ul>...</ul> lista bezbroj.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Stavka za listu</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Stavka za listu</li> <li><i class="fa-li fa fa-square"></i>Stavka za listu</li></ul>5 uokvirena ikona i citati
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 sjedi Amet, sastavljanje adipiscing elit. Donec, dn Purus Konge, Posuere Libero u mjestu, Porta Sapien. U Sed Elit lektusu. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Konge Sapien.</p>6 animiranih ikona
Dodajte Fa-spin, fa-puls, fa-osvježavanje, klase FA-COG-a za postavljanje ikona za predenje. 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 transformisanih ikona
Za rotiranje ili okretanje ikona, koristite vežbe za vetar 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-podešavanje - \ f042;Fa-sidro - \ f13d;
Fa-arhiva - \ f187;
Fa-strelice - \ f047;
Fa-zvjezdica - \ f069;
FAAT - \ F1FA;
Fa-ravnoteža - \ F24e;
Fa-ban - \ F05e;
Fa-banka - \ f19c;
Fa-barkod - \ f02a;
Fa-battery - prazna - \ f244;
FA-Battery-pola - \ F242;
Fa-baterija - \ F243;
Fa-baterija-tri četvrtine - \ f241;
FA-Battery-Full - \ F240;
FA krevet - \ f236;
FA-pivo - \ f0fc;
FA-BELL - \ F0F3;
FA-Bell-Slash - \ F1F6;
Fa-dvogled - \ f1e5;
Fa-rođendan-kolač - \ f1fd;
FA-vijak - \ f0e7;
Fa-bomba - \ f1e2;
Fa-knjiga - \ f02d;
Za rotiranje ili okretanje ikona, koristite vežbe za vetar i fa-flip- *.
4 povezana resursa
Pored fantastične kolekcije FONT, možete koristiti i druge ikone.
Fontello.FONTELLO ima veliku kolekciju različitih fontova ikona. Možete odabrati ikone koje volite i preuzeti ih na računar.
Ikona temelja.Fondacija ikona je još jedna ikona kolekcija fontova iz programera Fondacijskog okvira. Pored standardnih ikona, stranica sadrži okrugle ikone, ikone društvenih medija i još mnogo toga.
Ikone materijala.Ikone materijala su Googleove ujedinjene ravne ikone koje utjelovljuju jednostavnost percepcije. Ikone su optimizirani za prekrasan prikaz na svim uobičajenim platformama i za sve rezolucije ekrana.
Kolekcija fonta ikona sadrži 750+ ikona. Najlakši način za instaliranje kolekcije na vašoj web stranici je koristiti ikone poput Google Web fontova. Da biste to učinili, sljedeći kod je uključen u oznaku stranice:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Da bi se pravilno prikazivao font u pretraživačima, element koji će koristiti ikonu font ima klasu materijala ikona:
.materijal-ikone {fontova porodica: 'Ikone materijala'; Težina fonta: Normalni stil fonta: Normalna veličina fonta: 24px; / * Preferirana veličina ikona * / displej: inline-blok; širina: 1em; Visina: 1Em; Visina linije: 1; Tekst-transformacija: nema; Razmak slova: Normalna Word-Wrap: Normalno; Bijelo-prostor: NowRap; Smjer: ltr; -Mebkit-Fontovi-Loaming: antialiased; / * Podržani od strane svih pregledača WebKit * / Rendering TEXT: OptimizeLegivost; / * Safari i hromirana podrška * / -Moz-OSX-FONT-FONT: GREYSCALE; / * Firefox podrška. * / Podešavanja fontova: 'liga'; / * Tj. Podrška. * /}Same ikone dodaju se koristeći<I class=''material-ikone''>ligatura ili HTML kod ikone</i> Oznaka, na primjer:
<i class="material-ikone">account_balance_wallet</i><i class="material-ikone"></i>Ligatura razumije sve moderne preglednike, tj. Počevši od verzije 10. Kôd ikone se automatski generira, za to je potrebno lijevo klik na ikonu i kopirati predloženi izgled.
Veličina ikone
Veličina ikone is controlled by additional classes:
.materijal-ikone.md-18 {fontova: 18px;} / * za<i class="material-ikone md-18"></i> * /.materijal-ikone.md-24 {fontova: 24px;} / * za<i class="material-ikone md-24"></i> * /.materijal-ikone.md-36 {fontova: 36px;} / * za<i class="material-ikone md-36"></i> * /.materijal-ikons.md-48 {fontova: 48px;} / * za<i class="material-ikone md-48"></i> * /Boja ikone
Boja ikona također se postavlja pomoću dodatnih klasa:
.material-ikone.md-tamno {boja: rgba (0, 0, 0, 0.54);} / *<i class="material-ikone md-dark"></i> * /.Material-ikone.md-svjetlo {boja: RGBA (255, 255, 255, 1);} / *<i class="material-ikone md-light"></i> * /.materijal-ikons.md-tark.md-neaktivan {boja: rgba (0, 0, 0, 0.26);} / *<i class="material-ikone md-dark md-inactive"></i> * /.Materijal-Icons.MD-Light.MD-Neactive {Boja: 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:
.materijal-ikone.Indigo {boja: # 1A237E;} / *<i class="material-ikone indigo"></i> * /Često Postavljana Pitanja
- Šta je font fenomenalno u jednostavnim uvjetima?
- U suštini je to font sa ikonama koji se mogu dodati bilo kojem elementu web stranica kako bi se poboljšala njegova vidljivost i dizajn. Kolekcija se sastoji od nekoliko stotina ikona pogodnih za bilo koji zadatak i svrhu.Više informacija o ovoj vezi
Michel Pinson je turistički entuzijast i tvorac sadržaja. Spajanje strasti prema obrazovanju i istraživanju, on je isključio za dijeljenje znanja i nadahnjujući druge kroz zarobljeni obrazovni sadržaj. Dovodeći svijet bliže osnaživanjem pojedinca sa globalnom stručnošću i osjećajem lutanja.
