Erilaisia ikoneja näkee jokaisella sivustolla. Netti on pullollaan erilaisia ikoneita, mutta monesti niiden käyttöehdot saattavat kieltää esimerkiksi käytön kaupallisella sivustolla. Tällä kertaa käymme läpi, miten käyttää Font Awesome -ikoneita WordPress-sivustolla. Font Awesome -ikoneita voi käyttää myös kaupallisella sivustolla ilmaiseksi.

Font Awesome tarjoaa kirjoitushetkellä yli 350 ikonia käytettäväksi vapaasti. Tämän lisäksi tässä artikkelissa näytetty ratkaisu ottaa mukaansa myös Font Awesome More -ikonit, joiden myötä ikoneja on yhteensä noin 400. Ikonilistasta voi katsoa, mitä kaikkia ikoneita Font Awesome tarjoaa (Font Awesome Moren ikonilista).

Font Awesome More Icons

Ikonien käyttöönotto onnistuu Font Awesome More Icons -lisäosalla. Lisäosan asennuksen ja aktivoinnin jälkeen ikoneita voi lisätä suoraan WordPressin sisältöeditorissa Glyphs-pudotusvalikosta.

font-awesome-ikonit-editorissa

Artikkelin kirjoitushetkellä lisäosa käyttää vielä vanhempia Font Awesome 3.2.1 ikoneita. Luultavasti jossakin kohtaa lisäosa alkaa tukea uudempia 4.0 version ikoneita.

Kun ikonin valitsee pudotusvalikosta, editoriin lisätään automaattisesti lyhytkoodi.

font-awesome-lyhytkoodi

font-awesome-youtube-esimerkki

Lyhytkoodille on olemassa muutama lisäparametri. Näitä ovat size, title ja space. Size määrittelee ikonin koon. Vaihtoehtoja ovat large, 2x, 3x ja 4x. Title lisää ikoniin otsaketekstin, joka näkyy kun hiiren kanssa osuu ikonin päälle. Ikonin oheen lisätään automaattisesti tyhjä välilyönti. Välilyönnin voi poistaa määrittelemällä space=”false”. Esimerkki:

CSS

Font Awesome -ikonit ovat itse asiassa fontteja, joten niitä voi tyylitellä vapaasti CSS-määritteillä. CSS:n avulla voi määrittää fonteille räätälöidyn koon ja väriä voi myös vaihtaa. Asettamalla sivuston CSS-tiedostoon esimerkiksi seuraavan määritteen, kaikki ikonit ovatkin sinisen värisiä.

font-awesome-youtube-esimerkki-sininen

Kirjoittaja Timo Leiniö

Olen WP-oppaan perustaja ja päätoimittaja. Työskentelen päivittäin erilaisten verkkosovelluksiin liittyvien haasteiden parissa Sofokuksella. Vapaa-ajalla minut löytää todennäköisesti kalastamasta tai pelaamasta biljardia.

Keskustele ja kysy

Lisää uusi kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *