Veebisait ilma ikoonideta näeb välja nagu 2005. aasta tekstimüür. Aga ikoonide joonistamine Photoshopis ja sprite'idega jändamine pole lõbus, eriti kui sa pole disainer.

Font Awesome on seda probleemi lahendanud alates 2012. aastast: see on tasuta teek, mis sisaldab üle 2000 vektorikooni, mis käituvad nagu tavaline tekst. Muuda CSS-is värvi ja ikoon muudab värvi. Suurenda fondi suurust ja see skaleerub ilma pikslitumise või hägususeta.

Praktikas piisab tasuta versioonist menüüde, nuppude ja sotsiaalmeedia jaoks. Kui vajad duotone ja üle 30 000 ikooni, on olemas Pro alates $60 aastas. Allpool on kolm viisi Font Awesome'i lisamiseks WordPressi: alates kõige lihtsamast kuni käsitsi paigaldamiseni neile, kes functions.php faili ei karda.

💡 Kiirülevaade:

• Paigalda ametlik Font Awesome'i plugin WordPressi kataloogist; see võtab minuti ega nõua koodimuudatusi
• Käsitsi juhtimiseks ühenda Font Awesome CDN-i või Kiti kaudu oma alamteema functions.php failis
• Kui kasutad Elementorit, on ikoonid juba sisse ehitatud ja eraldi pluginat pole vaja
• Pärast ühendamist muuda ikooni suurust, värvi ja animatsiooni CSS-i või valmisklasside kaudu

Mis on Font Awesome

Font Awesome on ikoonifont: tähtede asemel sisaldab see ikoonisümboleid. Brauser renderdab need vektorgraafikana, nii et servad jäävad teravaks igal ekraanil ja igas mõõtkavas. Pole vaja PNG-sid, sprite'e ega srcset-i.

Teek jaguneb kaheks osaks. Tasuta versioon sisaldab viit stiili: Solid, Regular, Brands, Duotone ja Sharp. Pro lisab Thin, Light ja kümned tuhanded ikoonid, pluss võimaluse laadida oma SVG-sid Kiti kaudu. Tüüpilise visiitkaardisaidi või blogi jaoks katab Free valdava enamuse ülesannetest: nooled, sotsiaalmeedia, otsing, ostukorv, märkeruudud.

Peamine eelis rasterikoonide ees on täielik kontroll CSS-i kaudu. Värv, suurus, vari, pööramine, animatsioon: kõik seatakse klassidega ilma graafilise toimetamiseta.

1. Meetod: ametlik plugin (soovitatav)

Kõige ohutum tee on paigaldada ametlik Font Awesome'i plugin WordPress.org-is. Selle annab välja sama meeskond, kes loob teeki ennast. Plugin uueneb sünkroonis uute ikooniväljalasetega ega sõltu sinu teemast.

Kuidas paigaldada:

Mine Plugins → Add New. Otsinguribale trüki „font awesome" ja vajuta Enter.

Klõpsa Install Now, seejärel Activate.

Valmis. Pärast aktiveerimist ilmub Settings menüüsse Font Awesome'i kirje, kus saad lülitada ikooniallikat (CDN või Kit), lubada ühilduvuse versiooniga neli ja käivitada konfliktide skanneri.

Plugin lisab plokiredaktorisse eraldi „Font Awesome Icon" ploki. Klõpsa sellele ja avaneb otsing üle kogu teegi. Vali ikoon, klõpsa „Insert" ja see ilmub teksti SVG-na. Stiilimine toimub otse ploki külgribal: suurus, värv, pööramine.

Klassikalise redaktori jaoks töötab lühikood:

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

Või puhas HTML:

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

Kui sul on Pro konto, loo komplekt aadressil fontawesome.com, kopeeri API token ja kleebi see pluginaseadetesse. Pärast seda näitab ikoonivalija ka Pro ikoone.

Meetod 2: käsitsi paigaldamine functions.php kaudu

See meetod on neile, kes soovivad kontrollida kõiki saidile laaditavaid ressursse või vältida lisapistikprogramme. See toimib alamteema kaudu, nii et peateema uuendamine ei kustuta sinu muudatusi.

Loo alamteema

Kaustas wp-content/themes/ loo kataloog järelliitega -child (näiteks astra-child). Selle sees loo kaks faili.

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
}

Mine jaotisesse Välimus → Teemad ja aktiveeri alamteema.

Ühenda Font Awesome CDN-i kaudu

Lisa see kood oma alamteema faili functions.php:

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
}

See haak tõmbab tasuta versiooni cdnjs CDN-ist, mis on kõige usaldusväärsem avalik CDN FA 6 jaoks. Number 6.7.2 on versioon 2026. aasta juuni seisuga; kontrolli kehtivat versiooni cdnjs paketi lehel ja asenda see uusimaga.

Alternatiiv: komplekt Font Awesome'ilt

Komplekt annab juurdepääsu Pro ikoonidele ja laadib automaatselt ainult lehel kasutatavad stiilid, mis tähendab vähem ebavajalikke kilobaitte.

Registreeru Font Awesome'i veebisaidil, loo komplekt, kopeeri manustamiskood ja kleebi see oma alamteema faili header.php enne </head>:

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

Komplekti miinuseks on see, et tasuta pakett on piiratud 10 000 lehevaatamisega kuus. Suurema liiklusega saidi puhul kasuta kas CDN-i või Pro versiooni.

Sisseehitatud teemaredaktor (Välimus → Teemafailide redaktor) võimaldab functions.php otse halduspaneelilt redigeerida. Siiski on turvalisem töötada FTP või hostingu failihalduri kaudu: kirjaviga PHP koodis lõhub saidi ja ilma failidele juurdepääsuta pole sul võimalust seda taastada.

Meetod 3: Elementori või mõne teise leheehitaja kaudu

Kui kasutad juba Elementorit, ei ole sul eraldi Font Awesome’i pistikprogrammi vaja; leheehitaja sisaldab seda teeki kohe algusest peale.

Igas vidinas, millel on ikoon (Ikoon, Ikoonikast, Ikooniloend), klõpsa ikoonil ja avaneb teek, kus saab otsida kõigi tasuta stiilide seast. Värv, suurus, vari ja hõljumisefektid seadistatakse külgribal ilma ühegi CSS-i reata.

Sama kehtib SeedProdi, Beaver Builderi ja Divi kohta. Kontrolli oma leheehitaja seadeid: peaaegu kõik populaarsed visuaalsed WordPressi leheehitajad sisaldavad Font Awesome’i juba oma tuumas.

Kuidas ikoonistiile muuta

Pärast Font Awesome’i ühendamist juhid ikoone ainult klasside ja CSS-i kaudu. SVG-failide otsene muutmine ei ole vajalik.

Suurus

Ikooni suurus määratakse valmisklasside abil. Üks klass teeb ikooni kolmandiku võrra suuremaks, teine kahekordistab selle, kolmas kolmekordistab ja nii edasi kuni kümnekordse suurenduseni. Kõikide klasside täpsed väärtused leiad Font Awesome’i veebisaidilt.

Näide kolmekordseks suurendatud ikoonist:

Näide kolmekordseks suurendatud ikoonist:

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

Pööramine ja peegeldamine

• fa-rotate-90, 90° pööre
• fa-rotate-180, 180° pööre
• fa-rotate-270, 270° pööre
• fa-flip-horizontal, horisontaalne peegeldus
• fa-flip-vertical, vertikaalne peegeldus

Animatsioon

Kaks võimalust, mõlemad klasside kaudu:

• fa-spin, sujuv pöörlemine (sobib laadimisindikaatoritele)
• fa-pulse, kaheksaastmeline pöörlemine (pulseeriv efekt)

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

Värv

Ikooni värv päritakse ülemtekstilt. Enda värvi määramiseks kasuta CSS-i reeglit:

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

Lihtsaim viis sellise CSS-i lisamiseks on Välimus → Kohanda → Täiendav CSS. Muudatused rakenduvad kohe ja on reaalajas nähtavad.

Ikoon läbi pseudoelemendi

Kui ikoon peaks kinnituma elemendi külge ilma lisamärgendita, kasuta CSS-is ::before või ::after:

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

Kood \f08e on ikooni Unicode'i tunnus. Selle leiad konkreetse ikooni lehelt aadressil fontawesome.com, kus see on nime all kirjas.

Kust ikoone saada

Ava fontawesome.com/icons, trüki otsingusse märksõna ja vali stiil. Ikooni lehelt leiad HTML-i lõigu, Unicode'i ja saadaolevate stiilide loendi. Kopeeri ja kleebi sinna, kus vaja.

Märkus videojuhendi kohta

Kui eelistad lugemisele vaatamist, siis siin on juhend Font Awesome'i ikoonide lisamiseks WordPressi menüüsse:

Pärast vaatamist tule teksti juurde tagasi: allpool on nüansid, mida videos ei käsitletud.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean Font Awesome'i eest maksma?

Tasuta versioon katab valdava enamuse saitide vajadused: 2000+ ikooni viies stiilis, sealhulgas brändiikoonid (Facebook, Twitter, Instagram ja sajad teised). Pro maksab alates $60 aastas ja lisab Thin, Light, Sharp perekonnad, Duotone kõigis stiilides ning võimaluse laadida üles oma SVG faile. Maksmine on mõistlik, kui müüte ikoone toote osana või vajate konkreetselt duotone stiilis ikoone. WordPress.org-is olev Font Awesome'i plugin on täiesti tasuta; Pro ikoonid ühendatakse API Tokeni abil samades plugina seadetes ning midagi pole vaja eraldi osta ega paigaldada.

Millise ühendusviisi peaksin valima?

Algajatele ja tüüpilistele saitidele sobib ametlik plugin. See paigaldub kahe klõpsuga, sellel on sisseehitatud ikooniotsing redaktoris ja konfliktide skanner. Käsitsi paigaldamine CDN-i kaudu on õigustatud, kui minimeerite pluginate arvu oma saidil ja teate täpselt, millisesse faili wp_enqueue_style lisada. Font Awesome'i Kit on kompromiss: lihtne ühendada ilma pluginata, kuid tasuta limiidiga 10 000 kuvamist.

Mida teha, kui ikoonid ei kuvata?

Esmalt käivitage Font Awesome'i plugina seadetes konfliktituvastuse skanner. Kõige sagedamini on probleem selles, et teema või mõni teine plugin laeb oma Font Awesome'i versiooni, põhjustades versioonikonflikti. Skanner leiab konflikti allika ja plugin pakub selle blokeerimist. Teine levinud juhtum on süntaksiviga: kontrollige, kas kasutate prefiksit fa-solid, mitte fa (mis on vana neljanda versiooni süntaks).

Kas ma saan Font Awesome'i kasutada ilma WordPressita?

Jah, Font Awesome ei ole WordPressiga seotud. Ühendage CDN-i link mis tahes HTML-dokumendi <head> sektsiooni ja sisestage ikoonid <i class="fa-solid fa-name"></i> sildiga. See töötab Reacti, Vue, Laraveli, tavalise HTML-i ja isegi PDF-generaatoritega. Aadressil fontawesome.com/docs on juhised kümnete platvormide jaoks.

Miks on Font Awesome parem kui teised ikooniteegid?

Kaks peamist argumenti: kogukonna suurus ja ühilduvus. Font Awesome'i kasutavad miljonid saidid, seega on dokumentatsioon tõlgitud kümnetesse keeltesse ja vastused mis tahes probleemidele on otsingu abil sekunditega leitavad. Teiseks, ametlik WordPressi plugin automaatse konfliktide lahendamisega: seda ei paku ei Material Icons ega Bootstrap Icons.

Kas see on vaeva väärt: mida oma ülesande jaoks valida

Kui olete siiani lugenud, säästab allolev tabel teie aega:

Kontrollige, et pärast ühendamist kuvatakse ikoone korrektselt erinevates brauserites ja mobiilseadmetes. Kui märkate vilkumist või ikoonide asendumist, käivitage konfliktide skanner plugina seadete jaotisest „Troubleshoot". Probleem on peaaegu alati lahendatav ühe nupuvajutusega.