Kā viegli pievienot ikonas fontus WordPress tēmai

Vai vēlaties savā WordPress vietnē pievienot ikonu fontus? Nesen viens no mūsu lasītājiem jautāja, kas ir vienkāršākais veids, kā pievienot ikonu fontus viņu WordPress tēmai?


Ikonu fonti ļauj pievienot vektoru (maināmus) ikonas, nepalēninot vietnes darbību. Tie tiek ielādēti tāpat kā tīmekļa fonti, un tos var veidot, izmantojot CSS.

Šajā rakstā mēs jums parādīsim, kā soli pa solim viegli pievienot ikonu fontus WordPress tēmai.

Ikonu fontu izmantošana ar jebkuru WordPress motīvu

Kas ir ikonu fonti un kāpēc tos vajadzētu izmantot?

Ikonu fonti burtu un ciparu vietā satur simbolus vai piktogrammas. Šīs piktogrammas var viegli pievienot vietnes saturam un mainīt izmērus, izmantojot CSS. Salīdzinot ar ikonām, kuru pamatā ir attēls, fontu ikonas ir daudz ātrākas, kas palīdz uzlabot jūsu kopējo WordPress vietnes ātrumu.

Ikonu fontu priekšskatījums

Ikonu fontus var izmantot, lai parādītu parasti izmantotās ikonas. Piemēram, varat tos izmantot iepirkumu grozā, lejupielādes pogās, funkciju lodziņos, dāvanu konkursā un pat WordPress navigācijas izvēlnēs.

Ir pieejami vairāki bezmaksas un atvērtā koda ikonu fonti, kuriem ir simtiem skaistu ikonu.

Faktiski katrai WordPress instalācijai ir pievienots bezmaksas dashicons ikonas fontu komplekts. Šīs ikonas tiek izmantotas WordPress administratora izvēlnē un citos WordPress administratora apgabalos.

Daži citi populāri ikonu fonti ir:

  • Fonts satriecošs
  • Generikoni
  • IcoMoon
  • Lineāri
  • Materiālu ikonas, ko izveidojis Google
  • Vietvārdu projekts

Šīs apmācības nolūkos mēs izmantosim fontu satriecošu. Tas ir vispopulārākais pieejamais bezmaksas un atvērtā koda ikonu fonts. Mēs izmantojam FontAwesome WPBeginner vietnē, kā arī mūsu WordPress spraudņus, piemēram, OptinMonster, WPForms, RafflePress utt..

Šajā rokasgrāmatā mēs aplūkosim trīs veidus, kā WordPress pievienot ikonu fontus. Jūs varat izvēlēties labāko risinājumu.

Ikonu fontu pievienošana WordPress, izmantojot spraudņus

Ja esat iesācēja līmeņa lietotājs, kurš tikai mēģina savām ziņām vai lapām pievienot dažas ikonas, šī metode jums ir piemērota. Jums nevajadzēs modificēt motīvu failus, un visur savā vietnē varēsit izmantot ikonu fontus.

Vispirms jums jāinstalē un jāaktivizē WordPress spraudnis Font Awesome. Lai iegūtu sīkāku informāciju, skatiet mūsu soli pa solim, kā instalēt WordPress spraudni.

Pēc aktivizēšanas spraudnis ļauj jūsu tēmai sniegt fontu satriecošu atbalstu. Tagad jūs varat rediģēt jebkuru WordPress ziņu vai lapu un izmantot ikonas saīsni šādi:

[ikonas nosaukums = ”raķete”]

Jūs varat izmantot šo īskodu kopā ar citu tekstu vai pats par sevi tam paredzētajā īskodu blokā.

Ikonas fonta īso kopa pievienošana programmā WordPress

Pēc pievienošanas varat priekšskatīt savu ziņu vai lapu, lai redzētu, kā ikona izskatīsies aktīvā vietnē. Tā tas izskatījās mūsu testa vietnē.

Ikonas priekšskatījums

Arī rindkopas blokā pats varat pievienot fonta ikonas saīsni, kur bloka iestatījumus var izmantot, lai palielinātu ikonas lielumu.

Palieliniet ikonas lielumu

Palielinot teksta lielumu, tas teksta redaktorā var izskatīties dīvaini. Tas notiek tāpēc, ka īsais kods bloka redaktorā automātiski nemainās par ikonas fontu.

Lai redzētu, kā izskatās faktiskais ikonas lielums, ziņā vai lapā būs jānoklikšķina uz priekšskatījuma pogas.

Ikonas fonts ir palielināts

Varat arī izmantot ikonas saīsnes kodu kolonnās un izveidot šādu funkciju lodziņus:

Ikonu fontu izmantošana funkciju lodziņos

2. Ikonu fontu izmantošana ar WordPress Page Builder

Populārākajiem WordPress lapu veidotāju spraudņiem ir iebūvēts ikonu fontu atbalsts. Tas ļauj ērti izmantot ikonu fontus galvenajās lapās, kā arī citos vietnes apgabalos.

Bebru būvētājs

Beaver Builder ir labākais WordPress lapu veidotāju spraudnis tirgū. Tas ļauj WordPress ērti izveidot pielāgotus lapu izkārtojumus, nerakstot nevienu kodu.

Beaver Builder komplektā ir skaistas ikonas un gatavi lietošanai moduļi, kurus varat vienkārši vilkt un nomest savā ziņā un lapās.

Beaver Builder ikonu moduļi

Jūs varat izveidot ikonu grupas, pievienot vienu ikonu un pārvietot tās labi novietotās rindās un kolonnās. Bez CSS rakstīšanas varat arī izvēlēties savas krāsas, fonu, atstarpi un piemales.

Rediģējiet ikonu fontus Beaver Builder

Izmantojot Beaver Builder izstrādājumu Themer, jūs pat varat izveidot pilnīgi pielāgotas WordPress motīvus, nerakstot nevienu kodu.

Elementor Pro

Elementor ir vēl viens populārs WordPress lapu veidotāju spraudnis. Tas nāk arī ar vairākiem elementiem, kas ļauj izmantot ikonu fontus, ieskaitot elementu Icon.

Elementora ikona

Varat vienkārši vilkt un nomest ikonu jebkur un izmantot to ar rindām, kolonnām un tabulām, lai izveidotu skaistas lapas.

Arī citiem populāriem lapu veidotājiem, piemēram, Divi un Visual Composer, ir pilnīgs ikonu fontu atbalsts.

3. Ikonu fontu pievienošana WordPress manuāli ar kodu

Kā jau iepriekš minējām, ikonu fonti ir tikai fonti un tos var pievienot jūsu vietnei tāpat kā jūs pievienotu jebkurus pielāgotos fontus.

Daži ikonu fonti, piemēram, Font Awesome, ir pieejami no CDN serveriem visā tīmeklī, un tos var tieši saistīt no jūsu WordPress motīva.

Varat arī augšupielādēt visu fontu direktoriju mapē WordPress motīvā un pēc tam izmantot šos fontus stila lapā.

Tā kā šai apmācībai mēs izmantojam fontu satriecošu, tas parādīs, kā jūs varat to pievienot, izmantojot abas metodes.

1. metode:

Šī manuālā metode ir diezgan vienkārša.

Vispirms jums jāapmeklē vietne Font Awesome un jāievada sava e-pasta adrese, lai iegūtu iegulšanas kodu.

Iegūstiet fonta satriecošu iegulšanas kodu

Tagad pārbaudiet, vai iesūtnē nav e-pasta ziņojuma no Font Awesome ar iegulšanas kodu. Nokopējiet un ielīmējiet šo iegulšanas kodu WordPress motīva header.php failā tieši pirms taga.

Jūsu iegulšanas kods būs viena rinda, kas iegūs fontu satriecošo bibliotēku tieši no saviem CDN serveriem. Tas izskatīsies apmēram šādi:

Šī metode ir visvienkāršākā, taču tā var izraisīt konfliktus ar citiem spraudņiem.

Labāka pieeja būtu pareizi ielādēt JavaScript WordPress, izmantojot iebūvēto kodināšanas mehānismu.

Tā vietā, lai izveidotu saiti uz stila lapu no motīva galvenes veidnes, motīva funkcijāphph failā vai vietnei specifiskā spraudnī varat pievienot šo kodu.

funkcija wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, masīvs (), ‘1.0.0’, taisnība);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

2. metode:

Otrā metode nav vienkāršākā, taču tā ļaus jums savā vietnē mitināt fontu satriecošos ikonu fontus..

Vispirms jums jāapmeklē vietne Font Awesome, lai datorā lejupielādētu fontu paketi.

Lejupielādējiet datorā ikonas fontu

Vienkārši lejupielādējiet ikonu fontus un izsaiņojiet pakotni.

Tagad jums būs jāpieslēdzas WordPress mitināšanai, izmantojot FTP klientu, un jādodas uz WordPress motīva direktoriju..

Tur jāizveido jauna mape un jānosauc tās fonti. Tālāk jums jāielādē ikonu fontu mapes saturs savā tīmekļa mitināšanas servera fontu direktorijā.

Ikonu fontu augšupielāde WordPress motīvā

Tagad jūs esat gatavs ielādēt ikonu fontus savā WordPress motīvā. Vienkārši pievienojiet šo kodu sava motīva function.php failam vai vietnei specifiskā spraudnī.

funkcija wpb_load_fa () {

wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-awesome.min.css’);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Jūs esat veiksmīgi ielādējis fontu satriecošu savā WordPress motīvā.

Tagad nāk tā daļa, kurā jūs pievienosit faktiskās ikonas WordPress motīvam, ziņām vai lapām.

Ikonu fontu manuāla parādīšana WordPress

Dodieties uz vietni Font Awesome, lai skatītu visu pieejamo ikonu sarakstu. Noklikšķiniet uz jebkuras ikonas, kuru vēlaties izmantot, un jūs varēsit redzēt ikonas nosaukumu.

Ikonas nosaukums
Nokopējiet ikonas nosaukumu un izmantojiet to WordPress.

Šo ikonu motīva stila lapā varat stilizēt šādi:

.fa-bultiņa-alt-aplis-uz augšu {
fonta lielums: 50 pikseļi;
krāsa: # FF6600;
}

Varat arī kombinēt dažādas ikonas kopā un vienlaikus tās noformēt. Piemēram, pieņemsim, ka vēlaties parādīt saišu sarakstu ar blakus esošām ikonām. Jūs varat tos ietīt zem elementa ar noteiktu klasi.

Mājas
Bibliotēka
Lietojumprogrammas
Iestatījumi

Tagad jūs varat tos ieveidot motīva stila lapā šādi:

.ikonas-grupa-vienums i {
krāsa: # 333;
fonta lielums: 50 pikseļi;
}
.ikonas-grupa-vienums i: virziet kursoru {
krāsa: # FF6600
}

Mēs ceram, ka šis raksts palīdzēja jums uzzināt, kā viegli pievienot ikonu fontus WordPress tēmai. Varat arī apskatīt mūsu apmācību par to, kā WordPress pievienot attēlu ikonas ar navigācijas izvēlnēm.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map