Kuvakefonttit ovat mahtavia sivustollesi: miksi

Mainos

Olet kuullut kuvakkeista ja olet melkein varmasti kuullut fontteista, mutta mikä on Kuvake fontti? Tänään näytän sinulle, mitä kuvakefonttit ovat ja kuinka voit käyttää niitä elävöittämään verkkosivustoasi. Aloitetaan.

Mitä kuvakefonttit ovat?

Kuvakefonttit ovat täsmälleen samat kuin “tavalliset” fontit - ne määrittelevät kappaleen ulkoasun ja tunteen. Täällä on suuri ero siinä, että kuvakefonttit eivät sisällä kirjaimia ja numeroita, vaan symboleja ja kuvakkeita. Tämä voi olla hämmentynyt, sillä mikä hyvä fontti on, jos et voi kirjoittaa kirjeitä äidillesi!

Kuvake fontteja käytetään ensisijaisesti verkkosivustojen tyyliin. Koska ne ovat vektoripohjaisia, niitä voidaan muuttaa, siirtää, muotoilla ja muuttaa käyttämällä CSS 5 vauvan vaihetta CSS: n oppimiseen ja Kick-Ass CSS -oritsijaksi tulemiseenCSS on tärkein muutosverkkosivut, jotka ovat nähneet viimeisen vuosikymmenen aikana, ja se tasoitti tietä tyylien ja sisällön erottamiseen. XHTML määrittelee nykyaikaisella tavalla semanttisen rakenteen ... Lue lisää

. Tämä tarjoaa valtavan edun perinteisiin suunnittelumenetelmiin, kuten kuviin. Suuren määrän kuvakkeita voidaan näyttää ja muuttaa vain muutamalla koodirivillä. Sinun ei tarvitse muokata kuvia, avata Photoshopia tai lähettää uusia tiedostoja - kirjoitat vain koodin.

Päästä alkuun

Minä käytän Fontti mahtava näille esimerkeille, mutta teoriaa voidaan soveltaa moniin muihin fonttipakkauksiin.

Tässä on aloitus HTML:

Tämä on HTML-määrän vähimmäismäärä, joka tarvitaan verkkosivun luomiseen. En selitä suurta osaa siitä, koska olemme käsittäneet sen oppaassamme kuinka luoda verkkosivusto.

Tärkein linja on seuraava:

Tämä lataa Font Awesome -tyylitaulukon siitä CDN. Ilman tätä linjaa verkkosivustosi ei tiedä, mikä Font Awesome on, joten se on melko tärkeää. Tämä tyylitaulukko hoitaa kaiken vaikean Web-kirjasinten upottamisen työn ja yleensä tekee siitä paljon helpompaa.

Font Awesome -kuvakkeet määritetään CSS-luokkiin, jotka lisätään minä tunnisteita. Nämä valittiin, koska niihin ei ole liitetty mitään selainta tai oletusmääriteltyä muotoilua, joten kuvakkeesi eivät saa kaikkia sekaisin. Vaihtoehtoisesti voit lisätä luokkia jänneväli tunnisteita, mutta se sotkee ​​HTML-koodiasi.

Tässä on peruskäyttö. Laita tämä sisälle ruumis tunnisteet:

 Oma ensimmäinen kuvake

Näyttää siltä, ​​miltä se näyttää:

Kuinka helppoa se oli? Hajotamme sen. Font Awesome -sovellukseen tarvitaan kaksi luokkaa. Ensimmäistä kutsutaan fa, joka tarkoittaa Font Awesome. Tätä tarvitaan jokaiselle kuvakkeelle riippumatta siitä, mitä valitset. Toinen luokka määrittelee tietyn kuvakkeen, jota haluat käyttää - tämä voi olla mikä tahansa, lentokone, henkilö tai luottokortti. Tämä on myös etuliitteellä fa, ja koska tämä on rataskuvake, sen nimi on FA-Cog. Voit tarkastella luetteloa kaikista kuvakkeet Font Awesome heidän verkkosivuillaan.

Yritä vaihtaa kuvake hampaasta toiseen.

Menossa syvemmälle

Kun tiedät perusasiat, on aika joutua edistyneisiin temppuihin.

Jos et halua kirjoittaa omaa CSS: ää, voit käyttää Font Awesome -sovellukseen rakennettuja tyylejä. Monissa luokissa voit tehdä kuvakkeista suurempia:

Toinen hyödyllinen luokka, jota käytetään FA-spin. Tämä saa sinut kuvakkeista kiertämään, ja kun ne yhdistetään aiempiin kokoluokkiin, voit tuottaa hienoja tehosteita. Tässä on koodi:

Tässä on tulos:

Kuvakkeita on helppo kiertää - käytä fa-kiertää luokka:

Lopussa oleva numero määrittelee kuvakkeen pyörimisasteet, mutta et saa sitä pois. Olet rajoitettu 90, 180tai 270.

Viimeinen temppu, jonka voit tehdä, on pinoaminen. fa-pino luokan avulla voit yhdistää kaksi tai useampia kuvakkeita yhdessä. Tässä on koodi:

Näyttää siltä, ​​miltä se näyttää:

Kun aloitat kaikkien näiden erilaisten luokkien yhdistämisen, mahdollisuudet ovat todella rajattomat.

Mukautettu CSS

Koska kuvakefonttit ovat vain fontteja, voit tyyliä ne CSS: llä samalla tavalla kuin mitä tahansa muuta elementtiä. Pienen CSS3: n käyttö voi mennä pitkälle:

Tässä kuvakkeen HTML:

Tässä on CSS:

@ avainkehykset liikkuvat {{marginaalista vasemmalle: 0; } - {marginaali-vasen: 400px; } } .bike {animaation nimi: siirrä; animaation kesto: 4 s; }

Tämä CSS on melko yksinkertainen, mutta sillä on suuri vaikutus. Tämä ei kuitenkaan ole CSS-opetusohjelma, joten kannattaa ehkä oppia CSS 10 yksinkertaista CSS-koodimallia, jotka voit oppia 10 minuutissaHaluatko tietää enemmän CSS: n käytöstä? Kokeile aluksi näitä CSS-koodimerkkejä, ja käytä sitten niitä omille verkkosivuillesi. Lue lisää jos haluat tietää enemmän sisäisestä toiminnasta.

Voit tehdä erityisiä asioita, jos todella haluat:

Tämä stutters vähän, jotta Web-tiedoston kokoa voidaan pienentää. Tässä on HTML:

Tässä on CSS:

@ avainkehykset haalistuvat {alkaen {opasiteetti: 0; } - {opasiteetti: 1; } } .person {opasiteetti: 0; animaation nimi: haalistu; } # p1 {väri: punainen; animaation kesto: 2 s; } # p2 {väri: oranssi; animaation kesto: 4 s; } # p3 {väri: vihreä; animaation kesto: 6 s; } # p4 {animaation kesto: 8 s; }

Edellisen esimerkin tapaan tämä käyttää CSS3-animaatioita. Animaatio nimeltään häivyttää luodaan, ja jokainen henkilökuvake toteuttaa tämän animaation vaihtelevalla ajoituksella. Näiden kuvakkeiden ja CSS3: n avulla on paljon potentiaalia huijata.

Siinä kaikki tältä päivältä. Sinun pitäisi nyt pystyä käyttämään Icon Fonts -sovellusta verkkosivustosi elvyttämiseen! Jos et ole vielä niin varma taitoistasi, tutustu näihin CSS-mallisivustot 11 CSS-mallisivua: Älä aloita tyhjästä!Verkossa on saatavana tuhansia ilmaisia ​​CSS-malleja, jotka kaikki omaksuvat nykyaikaisia ​​suunnittelutrendejä ja tekniikoita. Voit käyttää niitä alkuperäisessä muodossaan tai muokata niitä tekemään niistä omia. Lue lisää tai nämä YouTube-kanavat aloittaaksesi Haluatko oppia Web-suunnittelua? 7 YouTube-kanavaa aloittamiseenYouTube tarjoaa tuhansia videoita ja kanavia verkkosivujen suunnittelun aloittelijoille. Tässä tarkastellaan joitain parhaimmista aloittamiseen. Lue lisää web-suunnittelulla.

Oppitko tänään jotain uutta? Mikä on suosikkikuvakkeen fontti? Kerro meille alla olevissa kommenteissa!