Viikon VALO #190

Font Awesome

Font Awesome on kirjasintyyppinä jaettava kokoelma kuvakkeita web-käyttöön.

Font Awesome on kokoelma skaalautuvia yksivärisiä kuvakkeita, jotka on koostettu kirjasintyypiksi eli fontiksi. Fonttitiedosto sisältää 439 erilaista kuvaketta. Fonttitiedostojen lisäksi paketissa on mukana tyylitiedostot, joiden avulla kuvakkeita on helppo käyttää www-sivun tai web-sovelluksen tekemisessä. Kirjasimina ja CSS-tyylisääntöinä esitettyjen kuvakkeiden käyttö ei vaadi JavaScriptiä, niiden koko on täysin skaalattavissa ja niiden ulkoasu on tyyliteltävissä muun sivuston tyylin mukaisesti. CSS-tyylisäännöillä voi esimerkiksi määritellä kirjasimina esitettyjen kuvakkeiden kokoa, väriä, varjostuksia ja muita ominaisuuksia, joita ei kuvina esitetyille kuvakkeille voi määritellä. Font Awesomen kuvakkeet eivät myöskään häiritse ruudunlukuohjelmia, kuten jotkin muun muotoiset kuvakkeet saattavat tehdä, vaan ovat niille "näkymättömiä".

Itse fontti on saatavilla viitenä erilaisena tiedostomuotona: OTF, EOT, SVG, TTF ja WOFF. Näitä voidaan käyttää webbifonttina, eli linkittää käytettäväksi www-sivulla tai web-sovelluksessa. Lisäksi ainakin TrueType-tyyppistä fonttia (TTF) voi käyttää myös työpöytäohjelmissa, jos se on asennettu tietokoneen kirjasinvalikoimaan. Fonttitiedostojen lisäksi paketissa mukana olevalla CSS-tyylitiedostolla kuvakkeet saa käyttöön www-sivulla tai web-sovelluksessa käyttämällä valmiiksi määriteltyjä CSS-luokkia. Näillä halutut kuvakkeet saadaan näkymään oikeissa paikoissa oikean kokoisina ja käyttämällä kuvakkeen nimeä.

Kuvakkeita voi käyttää toki myös suoraan kirjasinmerkkeinä, mutta tällä tavalla halutun merkin koodin löytäminen on jonkin verran hankalampaa kuin valmiiksi nimettyä CSS-luokkaa käyttämällä. Kuvakkeen voi lisätä sivulle yksinkertaisesti lisäämällä HTML-koodiin jonkin inline-tagin, kuten span ja lisäämällä sille luokan, joka koostuu fa-etuliitteestä sekä kuvakkeen nimestä. Esimerkiksi fa-camera-retro. Kuvakkeiden kokoa on mahdollista skaalata muun tekstin suhteen käyttämällä sopivaa luokkaa. Esimerkiksi viisinkertaiseksi skaalaamiseen käytetään luokkaa: fa-5x.

Kuvakkeita voi käyttää erilaisissa yhteyksissä, kuten listakuvakkeina, kappaleen aloittavana kuvakkeina tai vaikka pyörivinä kuvakkeina. Font Awesome -kuvakkeet toimivat myös hyvin esimerkiksi Bootstrap-komponenttien kanssa. Lisää esimerkkejä löytyy Font Awesomen esimerkkisivulta.

Kotisivu

http://fontawesome.io

Lisenssi

Fontit: SIL OFL 1.1

CSS- ja LESS-koodi: MIT

Dokumentaatio: CC-BY 3.0

Huom! Joukossa on myös joidenkin brändien tuotemerkkejä, jotka kuuluvat niiden omistajille.

Toimii seuraavilla alustoilla

Kaikki

Esimerkkejä käytöstä

http://fontawesome.io/examples/

Luettelo kaikista kuvakkeista

http://fontawesome.io/icons/

Teksti: Pesasa
Kuvakaappaukset: Pesasa