Ako ľahko pridať ikonu písma vo svojom WordPress Téma

Chcete na svoju stránku WordPress pridať fonty ikon? Jeden z našich čitateľov sa nedávno pýtal, aký je najjednoduchší spôsob, ako do svojej témy WordPress pridať ikonové písma?


Ikony písiem vám umožňujú pridávať vektorové (zmeniteľné) ikony bez spomalenia vášho webu. Sú načítané ako webové písma a môžu sa štylovať pomocou CSS.

V tomto článku vám ukážeme, ako ľahko pridať písma ikon do svojej témy WordPress, krok za krokom.

Používanie ikonových písiem s akýmkoľvek motívom WordPress

Čo sú to fonty ikon a prečo by ste ich mali používať?

Ikony písiem obsahujú namiesto písmen a číslic symboly alebo piktogramy. Tieto piktogramy je možné ľahko pridať k obsahu webovej stránky a zmeniť ich veľkosť pomocou CSS. Ikony písiem sú v porovnaní s obrázkovými ikonami oveľa rýchlejšie, čo pomáha s celkovou rýchlosťou webovej stránky WordPress.

Ukážka písma ikon

Písmo ikon možno použiť na zobrazenie bežne používaných ikon. Môžete ich napríklad použiť s nákupným košíkom, tlačidlami na stiahnutie, boxmi funkcií, súťažou o prezradenie a dokonca aj v navigačných ponukách WordPress..

K dispozícii je niekoľko bezplatných a otvorených ikonových fontov, ktoré obsahujú stovky krásnych ikon.

Každá inštalácia WordPress sa v skutočnosti dodáva so sadou bezplatných ikon ikon dashicons. Tieto ikony sa používajú v ponuke správcu WordPress a ďalších oblastiach v rámci oblasti správy WordPress.

Niektoré ďalšie populárne fonty ikon sú:

  • Písmo Awesome
  • Genericons
  • IcoMoon
  • Linearicons
  • Ikony materiálov od spoločnosti Google
  • Projekt podstatné meno

Kvôli tomuto tutoriálu budeme používať písmo Awesome. Jedná sa o najobľúbenejší bezplatný a voľne dostupný zdroj ikon. Používame FontAwesome na webových stránkach WPBeginner, ako aj naše pluginy WordPress ako OptinMonster, WPForms, RafflePress atď..

V tejto príručke sa zameriame na tri spôsoby pridávania ikonových písiem do WordPress. Môžete si vybrať riešenie, ktoré vám najviac vyhovuje.

Pridanie ikonových písiem do WordPress pomocou doplnkov

Ak ste používateľom začiatočníkov, ktorý sa len snaží pridať do svojich príspevkov alebo stránok nejaké ikony, táto metóda je pre vás vhodná. Nebudete musieť upravovať tematické súbory a všade na svojom webe by ste mohli používať fonty ikon.

Najprv musíte nainštalovať a aktivovať doplnok Font Awesome pre WordPress. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

Po aktivácii doplnok povolí pre vaše tému podporu písma Awesome. Teraz môžete upraviť ľubovoľný príspevok alebo stránku WordPress a použiť skratku ikony, ako je táto:

Tento skrátený kód môžete použiť spolu s iným textom alebo samostatne v samostatnom bloku skráteného kódu.

Pridanie skráteného kódu ikony ikon do WordPress

Po pridaní si môžete zobraziť ukážku svojho príspevku alebo stránky, aby ste videli, ako bude ikona vyzerať na živom webe. Takto to vyzeralo na našom testovacom webe.

Ukážka ikony

Krátky kód ikony písma môžete pridať aj do bloku odsekov samo, kde môžete pomocou nastavenia bloku zväčšiť veľkosť ikony.

Zväčšiť veľkosť ikony

Keď zväčšíte veľkosť textu, vo vnútri textového editora to môže vyzerať nepárne. Je to preto, že skrátený kód sa v editore blokov automaticky nezmení na písmo ikony.

Ak chcete zistiť, ako bude vyzerať skutočná veľkosť ikony, budete musieť kliknúť na tlačidlo ukážky na svojom príspevku alebo stránke.

Písmo ikony bolo zväčšené

Môžete tiež použiť skratku ikony vo vnútri stĺpcov a vytvoriť rámčeky funkcií, ako je tento:

Používanie typov ikon v rámčekoch funkcií

2. Používanie ikonových písiem pomocou nástroja na tvorbu stránok WordPress

Najobľúbenejšie doplnky na tvorbu stránok WordPress sa dodávajú s vstavanou podporou pre písma ikon. To vám umožní ľahko používať fonty ikon na vstupných stránkach, ako aj v iných oblastiach na vašom webe.

Beaver Builder

Beaver Builder je najlepší doplnok na tvorbu stránok WordPress na trhu. To vám umožní ľahko vytvárať vlastné rozloženia stránky vo WordPress bez nutnosti písania kódu.

Beaver Builder prichádza s krásnymi ikonami a je pripravený na použitie modulov, ktoré môžete jednoducho pretiahnuť do svojho príspevku a stránok.

Modely ikon Beaver Builder

Môžete vytvoriť skupiny ikon, pridať jednu ikonu a presunúť ich do dobre umiestnených riadkov a stĺpcov. Môžete si tiež vybrať vlastné farby, pozadie, medzery a okraje bez toho, aby ste museli písať CSS.

Upravte písma ikon v Beaver Builder

Pomocou produktu Themer spoločnosti Beaver Builder môžete dokonca vytvárať úplne vlastné motívy WordPress bez toho, aby ste museli písať akýkoľvek kód.

Elementor Pro

Elementor je ďalší populárny doplnok na tvorbu stránok WordPress. Je tiež dodávaný s niekoľkými prvkami, ktoré vám umožňujú používať fonty ikon vrátane elementu Icon.

Ikona elementu

Jednoducho môžete myšou presunúť ikonu kdekoľvek a použiť ju s riadkami, stĺpcami a tabuľkami na vytvorenie krásnych stránok.

Ďalšie populárne tvorcovia stránok, ako sú Divi a Visual Composer, majú tiež plnú podporu pre fonty ikon.

3. Ručné pridávanie ikonových ikon do WordPress s kódom

Ako sme už uviedli, fonty ikon sú iba písma a môžu sa pridať na vaše stránky, ako by ste pridali akékoľvek vlastné písma.

Niektoré fonty ikon, napríklad Font Awesome, sú k dispozícii na serveroch CDN na webe a dajú sa priamo prepojiť s témou WordPress..

Môžete tiež nahrať celý adresár písiem do priečinka v téme WordPress a potom tieto písma použiť v šablóne so štýlmi.

Pretože pre tento tutoriál používame program Font Awesome, ukážeme vám, ako ho môžete pridať pomocou oboch metód.

Metóda 1:

Táto manuálna metóda je pomerne jednoduchá.

Najprv musíte navštíviť webovú stránku Font Awesome a zadať svoju e-mailovú adresu, aby ste dostali kód na vloženie.

Získajte kód na vloženie písma Awesome

Teraz si v doručenej pošte skontrolujte e-mail od spoločnosti Font Awesome s vloženým kódom. Skopírujte a vložte tento kód na vloženie do súboru header.php vášho motívu WordPress tesne pred značkou.

Váš kód na vloženie bude jeden riadok, ktorý načíta knižnicu Font Awesome priamo z ich serverov CDN. Vyzerá to takto:

Táto metóda je najjednoduchšia, ale môže spôsobiť konflikty s inými doplnkami.

Lepším prístupom by bolo správne načítanie JavaScriptu do WordPress pomocou vstavaného mechanizmu enqueueing.

Namiesto toho, aby ste odkazovali na šablónu so štýlmi zo šablóny hlavičky témy, môžete pridať nasledujúci kód do súboru funkcií témy.php alebo do doplnku pre konkrétny web..

function wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, true);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Metóda 2:

Druhá metóda nie je najjednoduchšia, ale umožňuje vám hosťovať písma ikon písma Awesome na vašej vlastnej webovej stránke..

Najprv musíte navštíviť webovú stránku Font Awesome, kde si môžete do počítača stiahnuť balík fontov.

Stiahnite si ikonu písma do svojho počítača

Jednoducho stiahnite fonty ikon a rozbaľte balík.

Teraz sa budete musieť pripojiť k svojmu hostiteľovi WordPress pomocou FTP klienta a prejsť do adresára témy WordPress.

Tam musíte vytvoriť nový priečinok a pomenovať ho podľa písma. Ďalej musíte nahrať obsah priečinka ikon fonts do adresára fontov na vašom webhostingovom serveri.

Odovzdávanie ikonových písiem do témy WordPress

Teraz ste pripravení načítať ikonu písma do svojej témy WordPress. Jednoducho pridajte tento kód do súboru function.php témy alebo do doplnku pre konkrétnu lokalitu.

function 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’);

Úspešne ste načítali písmo Awesome do svojej témy WordPress.

Teraz prichádza časť, v ktorej budete pridávať aktuálne ikony do svojej témy, príspevkov alebo stránok WordPress.

Ručné zobrazenie ikonových písiem vo WordPress

Úplný zoznam dostupných ikon nájdete na webovej stránke Font Awesome. Kliknite na ľubovoľnú ikonu, ktorú chcete použiť, a uvidíte jej názov.

Názov ikony
Skopírujte názov ikony a použite ho takto v programe WordPress.

Túto ikonu môžete upraviť na šablóne so štýlmi takto:

.fa-arrow-alt-circle-up {
font-size: 50 pixelov;
color: # FF6600;
}

Môžete tiež kombinovať rôzne ikony a súčasne ich upravovať. Povedzme napríklad, že chcete zobraziť zoznam odkazov s ikonami vedľa nich. Môžete ich zabaliť do prvku so špecifickou triedou.

Domov
knižnica
aplikácia
nastavenie

Teraz ich môžete upraviť v šablóne so štýlmi takto:

.icons-group-item i {
farba: # 333;
veľkosť písma: 50px;
}
.icons-group-item i: hover {
farba: # FF6600
}

Dúfame, že vám tento článok pomohol naučiť sa, ako ľahko pridať písma ikon do svojej témy WordPress. Môžete sa tiež pozrieť na náš tutoriál o tom, ako pridať ikony obrázkov s navigačnými ponukami v programe WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me