Verkkosivusto ilman kuvakkeita näyttää tekstimassalta vuodelta 2005. Mutta kuvakkeiden piirtäminen Photoshopissa ja spritejen kanssa säätäminen ei ole hauskaa, varsinkaan jos et ole suunnittelija.

Font Awesome on ratkaissut tätä ongelmaa vuodesta 2012 lähtien: se on ilmainen kirjasto, jossa on yli 2000 vektorikuvaketta, jotka käyttäytyvät kuin tavallinen teksti. Vaihda väriä CSS:ssä ja kuvake vaihtaa väriä. Suurenna fonttikokoa ja se skaalautuu ilman pikselöitymistä tai sumentumista.

Käytännössä ilmainen versio riittää valikoihin, painikkeisiin ja some-kuvakkeisiin. Jos tarvitset duotone-kuvakkeita ja yli 30 000 kuvaketta, tarjolla on Pro alkaen 60 dollaria vuodessa. Alla on kolme tapaa lisätä Font Awesome WordPressiin: yksinkertaisimmasta manuaaliseen asennukseen niille, jotka eivät pelkää functions.php-tiedostoa.

💡 Pikaopas:

• Asenna virallinen Font Awesome -lisäosa WordPressin hakemistosta; se vie minuutin eikä vaadi koodimuutoksia
• Manuaalista hallintaa varten yhdistä Font Awesome CDN:n tai Kitin kautta lapsiteemasi functions.php-tiedostossa
• Jos käytät Elementoria, kuvakkeet ovat jo sisäänrakennettuina eikä erillistä lisäosaa tarvita
• Yhdistämisen jälkeen muuta kuvakkeen kokoa, väriä ja animaatiota CSS:n tai valmiiden luokkien avulla

Mikä Font Awesome on

Font Awesome on ikonifontti: kirjainten sijaan se sisältää kuvakesymboleita. Selain renderöi ne vektorigrafiikkana, joten reunat pysyvät terävinä millä tahansa näytöllä ja missä tahansa koossa. Ei PNG-kuvia, spritejä tai srcset-määrittelyjä.

Kirjasto jakautuu kahteen osaan. Ilmainen versio sisältää viisi tyyliä: Solid, Regular, Brands, Duotone ja Sharp. Pro tuo mukanaan Thin- ja Light-tyylit sekä kymmeniä tuhansia kuvakkeita, plus mahdollisuuden ladata omia SVG-tiedostoja Kitin kautta. Tyypilliselle käyntikorttisivustolle tai blogille Free-versio kattaa valtaosan tarpeista: nuolet, some-kuvakkeet, haun, ostoskorin, valintaruudut.

Suurin etu bittikarttakuvakkeisiin verrattuna on täysi hallinta CSS:n kautta. Väri, koko, varjo, kierto, animaatio: kaikki asetetaan luokilla ilman graafista muokkausta.

Tapa 1: virallinen lisäosa (suositeltu)

Turvallisin reitti on asentaa virallinen Font Awesome -lisäosa WordPress.orgista. Sen on julkaissut sama tiimi, joka luo itse kirjaston. Lisäosa päivittyy tahdissa uusien kuvakejulkaisujen kanssa eikä ole riippuvainen teemastasi.

Asennusohjeet:

Mene kohtaan Lisäosat → Lisää uusi. Kirjoita hakupalkkiin "font awesome" ja paina Enter.

Klikkaa Asenna nyt ja sitten Ota käyttöön.

Valmista. Aktivoinnin jälkeen Asetukset-valikkoon ilmestyy Font Awesome -kohta, jossa voit vaihtaa kuvakelähdettä (CDN tai Kit), ottaa käyttöön yhteensopivuuden version neljä kanssa ja ajaa ristiriitatarkistimen.

Lisäosa lisää lohkoeditoriin erillisen "Font Awesome -kuvake" -lohkon. Klikkaa sitä, niin koko kirjaston kattava haku avautuu. Valitse kuvake, klikkaa "Lisää", ja se ilmestyy tekstiin SVG-muodossa. Tyylittely tapahtuu suoraan lohkon sivupalkissa: koko, väri, kierto.

Klassisessa editorissa toimii shortcode:

1
[icon name="download" prefix="fa-solid"]

Tai puhdasta HTML:ää:

1
<i class="fa-solid fa-download"></i>

Jos sinulla on Pro-tili, luo Kit osoitteessa fontawesome.com, kopioi API Token ja liitä se lisäosan asetuksiin. Tämän jälkeen kuvakevalitsin näyttää myös Pro-kuvakkeet.

Tapa 2: manuaalinen asennus functions.php:n kautta

Tämä tapa on niille, jotka haluavat hallita jokaista sivustolle ladattavaa resurssia tai välttää ylimääräisiä lisäosia. Se toteutetaan lapsiteeman kautta, jotta pääteeman päivitys ei pyyhi muutoksiasi.

Luo lapsiteema

Luo wp-content/themes/-kansioon hakemisto, jonka pääte on -child (esimerkiksi astra-child). Luo sen sisälle kaksi tiedostoa.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Siirry kohtaan Ulkoasu → Teemat ja ota lapsiteema käyttöön.

Yhdistä Font Awesome CDN:n kautta

Lisää tämä koodi lapsiteemasi functions.php-tiedostoon:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Tämä koukku hakee ilmaisversion cdnjs CDN:stä, joka on luotettavin julkinen CDN FA 6:lle. Numero 6.7.2 on versio kesäkuussa 2026; tarkista ajantasainen versio cdnjs-pakettisivulta ja korvaa uusimmalla.

Vaihtoehto: Kit Font Awesomelta

Kit tarjoaa pääsyn Pro-kuvakkeisiin ja lataa automaattisesti vain sivulla käytetyt tyylit, mikä vähentää turhia kilotavuja.

Rekisteröidy Font Awesomen verkkosivustolla, luo Kit, kopioi upotuskoodi ja liitä se lapsiteemasi header.php-tiedostoon ennen </head>-tagia:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

Kitin huono puoli on, että ilmaistaso on rajoitettu 10 000 sivunäyttöön kuukaudessa. Sivustolle, jolla on enemmän liikennettä, käytä joko CDN:ää tai Pro-versiota.

Sisäänrakennetun teemaeditorin (Ulkoasu → Teematiedostoeditori) avulla voit muokata functions.php-tiedostoa suoraan hallintapaneelista. On kuitenkin turvallisempaa työskennellä FTP:n tai palveluntarjoajan tiedostonhallinnan kautta: kirjoitusvirhe PHP-koodissa kaataa sivuston, ja ilman tiedostojen käyttöoikeutta sinulla ei ole keinoa palauttaa sitä.

Tapa 3: Elementorin tai muun sivunrakentajan kautta

Jos käytät jo Elementoria, et tarvitse erillistä Font Awesome -lisäosaa; sivunrakentaja sisältää kirjaston valmiina.

Missä tahansa widgetissä, jossa on kuvake (Icon, Icon Box, Icon List), klikkaa kuvaketta, niin kirjasto avautuu ja voit hakea kaikista Free-tyyleistä. Väri, koko, varjo ja hover-efektit määritetään sivupalkissa ilman yhtäkään CSS-riviä.

Sama pätee SeedProdiin, Beaver Builderiin ja Diviin. Tarkista sivunrakentajasi asetukset: lähes kaikki suositut WordPressin visuaaliset rakentajat sisältävät Font Awesomen valmiiksi.

Miten kuvaketyylejä vaihdetaan

Kun Font Awesome on yhdistetty, hallitset kuvakkeita pelkästään luokkien ja CSS:n avulla. SVG-tiedostojen suoraa muokkausta ei tarvita.

Koko

Kuvakkeen koko asetetaan valmiilla luokilla. Yksi luokka tekee kuvakkeesta kolmanneksen suuremman, toinen kaksinkertaistaa sen, kolmas kolminkertaistaa ja niin edelleen aina kymmenkertaiseen kasvuun asti. Kaikkien luokkien tarkat arvot löydät Font Awesomen sivustolta.

Esimerkki kolminkertaiseksi suurennetusta kuvakkeesta:

Esimerkki kolminkertaiseksi suurennetusta kuvakkeesta:

1
<i class="fa-solid fa-download fa-3x"></i>

Kierto ja peilaus

• fa-rotate-90, 90° kierto
• fa-rotate-180, 180° kierto
• fa-rotate-270, 270° kierto
• fa-flip-horizontal, vaakapeilaus
• fa-flip-vertical, pystypeilaus

Animaatio

Kaksi vaihtoehtoa, molemmat luokkien kautta:

• fa-spin, tasainen pyörintä (sopii latausanimaatioihin)
• fa-pulse, kahdeksan askeleen pyörintä (sykkivä efekti)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Väri

Kuvakkeen väri periytyy ylätason tekstistä. Jos haluat asettaa oman, käytä CSS-sääntöä:

1
.fa-download {
2
    color: #27ae60;
3
}

Helpoin tapa lisätä tällainen CSS on Ulkoasu → Mukauta → Lisä-CSS. Muutokset astuvat voimaan heti ja näkyvät reaaliajassa.

Kuvake pseudo-elementin kautta

Kun kuvake pitää liittää elementtiin ilman ylimääräistä merkkausta, käytä CSS:ssä ::before- tai ::after-pseudo-elementtiä:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Koodi \f08e on kuvakkeen Unicode-tunniste. Löydät sen kyseisen kuvakkeen sivulta osoitteessa fontawesome.com, jossa se on listattuna nimen alla.

Mistä kuvakkeita saa

Avaa fontawesome.com/icons, kirjoita hakusana hakuun ja valitse tyyli. Kuvakkeen sivulta löydät HTML-pätkän, Unicoden ja listan saatavilla olevista tyyleistä. Kopioi ja liitä tarvittaviin kohtiin.

Huomio video-ohjeesta

Jos pidät enemmän katsomisesta kuin lukemisesta, tässä on ohje Font Awesome -kuvakkeiden lisäämisestä WordPress-valikkoon:

Palattuasi videon jälkeen takaisin tekstiin: alla on vivahteita, joita videolla ei käsitellä.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö Font Awesomesta maksaa?

Ilmainen versio kattaa valtaosan sivustojen tarpeet: yli 2000 kuvaketta viidessä tyylissä, mukaan lukien brändikuvakkeet (Facebook, Twitter, Instagram ja sadat muut). Pro maksaa alkaen 60 $ vuodessa ja tuo mukanaan Thin-, Light- ja Sharp-perheet, Duotone-kuvakkeet kaikissa tyyleissä sekä omien SVG-tiedostojen lataamisen. Maksaminen on järkevää, jos myyt kuvakkeita osana tuotetta tai tarvitset nimenomaan duotone-kuvakkeita. WordPress.orgissa oleva Font Awesome -lisäosa on täysin ilmainen; Pro-kuvakkeet yhdistetään API-tokenin avulla saman lisäosan asetuksissa, eikä mitään tarvitse ostaa tai asentaa erikseen.

Mikä yhdistämistapa minun kannattaa valita?

Aloittelijoille ja tavallisille sivustoille virallinen lisäosa. Se asentuu kahdella klikkauksella, sisältää sisäänrakennetun kuvakehaun editorissa ja konfliktiskannerin. Manuaalinen asennus CDN:n kautta on perusteltua, jos karsit lisäosia sivustoltasi ja tiedät tarkalleen, mihin tiedostoon wp_enqueue_style lisätään. Font Awesomen Kit on kompromissi: helppo yhdistää ilman lisäosaa, mutta ilmaisversiossa on 10 000 näyttökerran raja.

Mitä teen, jos kuvakkeet eivät näy?

Suorita ensin Conflict Detection Scanner Font Awesome -lisäosan asetuksissa. Useimmiten ongelma johtuu siitä, että teema tai toinen lisäosa lataa oman versionsa Font Awesomesta, mikä aiheuttaa versioristiriidan. Skanneri löytää ristiriidan lähteen, ja lisäosa tarjoaa sen estämistä. Toinen yleinen tapaus on syntaksivirhe: tarkista, että käytät etuliitettä fa-solid etkä fa (joka on vanhan version neljä syntaksi).

Voinko käyttää Font Awesomea ilman WordPressiä?

Kyllä, Font Awesome ei ole sidottu WordPressiin. Yhdistä CDN-linkki minkä tahansa HTML-dokumentin <head>-osioon ja lisää kuvakkeet <i class="fa-solid fa-name"></i> -tagilla. Se toimii Reactin, Vuen, Laravelin, tavallisen HTML:n ja jopa PDF-generaattoreiden kanssa. Osoitteessa fontawesome.com/docs on ohjeet kymmenelle alustalle.

Miksi Font Awesome on parempi kuin muut kuvakekirjastot?

Kaksi pääargumenttia: yhteisön koko ja yhteensopivuus. Font Awesomea käyttävät miljoonat sivustot, joten dokumentaatio on käännetty kymmenelle kielelle ja vastaukset ongelmiin löytyvät sekunneissa haun avulla. Toiseksi, virallinen WordPress-lisäosa automaattisella ristiriitojen ratkaisulla: tätä eivät tarjoa Material Icons eivätkä Bootstrap Icons.

Onko vaivan arvoista: mitä valita omaan tehtävääsi

Jos luit tänne asti, alla oleva taulukko säästää aikaasi:

Tarkista yhdistämisen jälkeen, että kuvakkeet näkyvät oikein eri selaimissa ja mobiililaitteilla. Jos havaitset välkkymistä tai kuvakkeiden vaihtumista, suorita konfliktiskanneri lisäosan asetusten "Troubleshoot"-osiosta. Ongelma ratkeaa melkein aina yhdellä napin painalluksella.