Font Awesome 6: Koko arvostelu
- 1 Kuinka asentaa fontti mahtava
- Menetelmä 1.
- Menetelmä 2.
- 2 Kuinka käyttää fontti mahtavia kuvakkeita
- 1 vakiokuvake
- 2 suurta kuvaketta
- 3 kiinteää leveäkuvaketta
- 4 kuvaketta luokiteltuun luetteloon
- 5 kehystettyä kuvaketta ja lainausta
- 6 animaatiokuvaketta
- 7 muunnettua kuvaketta
- 8 yhdistelmäkuvaketta
- 3 Font Awesome 4.5.0 collection, classes jacss code to insert using the content property
- 4 liittyvää resurssia
- Kuvakkeen koko
- Kuvakeväri
- Usein Kysyttyjä Kysymyksiä
Font Awesome on kokoelma skaalautuvia vektorikuvakkeita. Kuvakkeet voidaan muotoilla CSS -ominaisuuksilla, asettaa niiden väri, koko, varjo ja paljon muuta. Fonttiversio 5.5.0 sisältää 605 kuvaketta.
1 Kuinka asentaa fontti mahtava
Menetelmä 1.
Käytä tiedoston font-Awesome.css-versiota lisäämällä seuraava koodi<head> osa:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Kun fontti on kytketty, voit käyttää sivustosi kuvakkeita.
Menetelmä 2.
Lataa fontti Font Awesome . Pakkauta arkisto ja lataa kaksi kansiota arkistosta sivustopalvelimelle - CSS ja Fonts. Jos sinulla on jo kansioita, joilla on tällaiset nimet sivustollasi, sinun on vain lisättävä tiedostoja ladattuista kansioista niihin.
Voit käyttää tiedoston täydellistä tai pieniä versiota:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kuinka käyttää fontti mahtavia kuvakkeita
Kuvakkeet voidaan lisätä verkkosivulle kahdella tavalla: asettamalla asianmukaiset luokat<i> ja<span> elements, taiby adding them to the desired element using the :before, :after pseudo-elements jathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: ennen {sisältöä: "\ f015";/ * Lisää kotikuvake */font-perhe: fontAwesome; väri: #aaaaaa; marginaali-oikeat: 10px;}1 vakiokuvake
Font Awesome on suunniteltu käytettäväksi sisäisten elementtien kanssa. Kuvakkeiden lisäämiseksi sinun on ensin asetettava FA -luokka<i> tai<span> elementti.
Valittu kuvakkeen lisääminen ennen elementtiä tai sen jälkeen, tyhjä<i></i> tai<span></span> Elementti lisätään elementtiin, jolle on osoitettu kuvakkeen luokka, samoin kuin lisäluokka, joka laajentaa muotoilua.
<i class="fa fa-camera-retro"></i>2 suurta kuvaketta
Kuvakkeen koon lisäämiseksi suhteessa sen säiliöön käyttämällä FA-LG: tä (33%: n lisäys), FA-2X, FA-3X, FA-4X, FA-5X-luokat.
<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 kiinteää leveäkuvaketta
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation tailists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Koti</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Kirjasto</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Sovellukset</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> asetukset</a ></li></ul>4 kuvaketta luokiteltuun luetteloon
Korvaa oletusluodit a<ul>Niin</ul> ranskalaiset viivat.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>luettelokuva</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>luettelokuva</li> <li><i class="fa-li fa fa-square"></i>luettelokuva</li></ul>5 kehystettyä kuvaketta ja lainausta
Use the fa-border class to set the border for the icon. The pull-right japull-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 istuva, Consicteturing Adipciscing Elit. Donec NEC Purus Congue, Posuere Libero, Porta Sapien. SED ELIT LECTUS. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animaatiokuvaketta
Lisää FA-Spin, FA-Pulse, FA-paluu, FA-COG-luokat asettamaan kehruukuvakkeet. Animaatiota ei tueta IE8 - IE9: ssä.
<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 muunnettua kuvaketta
Kierrä tai kääntää kuvakkeita käyttämällä FA-ROTATE-* ja FA-FLIP-* -luokkia.
<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 yhdistelmäkuvaketta
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, jafa-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 jacss code to insert using the content property
Verkkosovellusten kuvakkeet Fa -adjust - \ f042;Fa -ankkori - \ f13d;
Fa -kaarta - \ f187;
Fa -armows - \ f047;
Fa -sterisk - \ f069;
Faat - \ f1fa;
FA-tasapaino-\ F24E;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-netri-\ f244;
Fa-battery-half-\ f242;
Fa-aukko-neljäsosa-\ f243;
Fa-battery-kolme neljäsosaa-\ f241;
Fa-battery-FULL-\ f240;
FA -BED - \ F236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binokulaarit - \ f1e5;
Fa-Birthday-kakku-\ f1fd;
FA -pultti - \ F0E7;
Fa -pommi - \ f1e2;
Fa -kirja - \ f02d;
Kierrä tai kääntää kuvakkeita käyttämällä FA-ROTATE-* ja FA-FLIP-* -luokkia.
4 liittyvää resurssia
Font Awesome -kokoelman lisäksi voit käyttää myös muita kuvakefontteja.
Fontello.Fontello on suuri kokoelma erilaisia kuvakefontteja. Voit valita haluamasi kuvakkeet ja ladata ne tietokoneellesi.
Säätiökuvake.FONASTTION ICON on toinen kuvakkeen fontikokoelma säätiökehyksen kehittäjiltä. Vakiokuvakkeiden lisäksi sivustolla on pyöreitä kuvakkeita, sosiaalisen median kuvakkeita ja paljon muuta.
materiaalikuvakkeet.Materiaalikuvakkeet ovat Googlen yhtenäisiä litteitä kuvakkeita, jotka ilmentävät havainnon helppoa. Kuvakkeet on optimoitu kauniille näytölle kaikilla yhteisillä alustoilla ja kaikkiin näytön tarkkuuksiin.
Kuvake -kirjasinkokoelma sisältää 750+ kuvaketta. Helpoin tapa asentaa kokoelma verkkosivustollesi on käyttää kuvakkeita, kuten Google Web -fontteja. Tätä varten seuraava koodi sisältyy sivun merkinnään:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Kirjastin oikein näyttämiseksi selaimissa elementti, joka käyttää kuvakkeen fonttia, annetaan Material-Icons-luokka:
.Materiaali-Icons {font-perhe: 'materiaalikuvakkeet'; Fontti-paino: Normaali fonttityyli: Normaali kirjasinkoko: 24px; / * Edullinen kuvakkeen koko */ Näyttö: Inline-lohko; Leveys: 1em; Korkeus: 1em; Line-korkeus: 1; tekstinsiirto: Ei mitään; Kirjeiden välinen: Normaali sana-kääre: Normaali; Valkoinen tila: Nowrap; suunta: ltr; -Webkit-Font-Smoothing: antialiased; / * Kaikkien WebKit-selainten tukemat */ tekstinsuojaus: optimizelegibility; / * Safari- ja kromituki */ -Moz-OSX-Font-Smoothing: GrayScale; /* Firefox -tuki. */ font-ominaisuudet: 'liga'; /* Eli tuki. */}Itse kuvakkeet lisätään käyttämällä<I class=''material-kuvakkeet''>kuvakkeen ligatuuri tai html -koodi</i> Tunniste, esimerkiksi:
<i class="material-kuvakkeet">Account_balance_wallet</i><i class="material-kuvakkeet"></i>Kaikki nykyaikaiset selaimet ymmärtävät ligatuurin, ts. Versiosta 10 alkaen 10. Kuvakekoodi luodaan automaattisesti, jotta sinun on napsauttaa vasemmistokuvakuva ja kopioida ehdotettu ilme.
Kuvakkeen koko
Kuvakkeen koko is controlled by additional classes:
.Material-Icons.md-18 {font-size: 18px;} /* for<i class="material-kuvakkeet md-18"></i> */.Material-Icons.md-24 {font-size: 24px;} /* for<i class="material-kuvakkeet md-24"></i> */.Material-Icons.MD-36 {font-size: 36px;} /* for<i class="material-kuvakkeet md-36"></i> */.Material-Icons.MD-48 {font-size: 48px;} /* for<i class="material-kuvakkeet md-48"></i> */Kuvakeväri
Kuvakkeiden väri on myös asetettu lisäluokkien avulla:
.Material-Icons.Md-Dark {väri: rgba (0, 0, 0, 0,54);} /*<i class="material-kuvakkeet md-dark"></i> */.Material-Icons.Md-Light {väri: rgba (255, 255, 255, 1);} /*<i class="material-kuvakkeet md-light"></i> */.Material-Icons.md-dark.md-inaktiivinen {väri: rgba (0, 0, 0, 0,26);} /*<i class="material-kuvakkeet md-dark md-inactive"></i> * /.Material-Icons.md-light.md-inaktiivinen {väri: rgba (255, 255, 255, 0,3);} /*<i class="material-kuvakkeet md-light md-inactive">kasvot</i> */Mukautetun värin asettamiseksi sinun on lisättävä luokka, joka määrittelee esimerkiksi kuvakkeen värin:
.Material-Icons.Indigo {väri: #1A237E;} /*<i class="material-kuvakkeet indigo"></i> */Usein Kysyttyjä Kysymyksiä
- Mikä fontti on mahtavaa yksinkertaisesti?
- Pohjimmiltaan se on fontti, jossa on kuvakkeita, jotka voidaan lisätä mihin tahansa verkkosivuelementtiin sen näkyvyyden ja suunnittelun parantamiseksi. Kokoelma koostuu useista sadasta kuvakkeista, jotka sopivat mihin tahansa tehtävään ja tarkoitukseen.Lisätietoja tästä linkistä
Michel Pinson on matkaharrastaja ja sisällön luoja. Yhdistämällä intohimo koulutukseen ja tutkimukseen, hän oli sitoutunut jakamaan tietoa ja inspiroimaan muita kiehtovan koulutussisällön avulla. Maailman tuominen lähemmäksi valtuuttamalla yksilöitä, joilla on globaali asiantuntemus ja Wanderlust -tunne.
