Ako ľahko pridať písma ikon do svojej témy WordPress

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é fonty a môžu byť navrhnuté pomocou CSS.

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

Čo sú to fonty ikon a prečo by som ich mal 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 vašich webových stránok WordPress.

Ukážka písma ikony

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 vozíkom, tlačidlami na stiahnutie, krabicami funkcií, darčekovou súťažou a dokonca aj v navigačných ponukách WordPress.

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

V skutočnosti každá inštalácia WordPress je dodávaná s bezplatnou sadou ikon ikon dashicon. Tieto ikony sa používajú v ponuke správcu WordPress a ďalších oblastiach v oblasti správcu WordPress.

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

  • Písmo Awesome
  • generík
  • IcoMoon
  • Linearicons
  • Ikony materiálu Google
  • Podstatný projekt

Kvôli tomuto tutoriálu použijeme Font Awesome. Je to najpopulárnejší bezplatný a otvorený zdrojový font, ktorý je k dispozícii. Používame FontAwesome na webovej stránke WPBeginner, ako aj naše doplnky WordPress ako OptinMonster, WPForms, RafflePress atď.

V tejto príručke sa budeme zaoberať tromi spôsobmi, ako do programu WordPress pridať fonty ikon. Môžete si vybrať riešenie, ktoré vám najviac vyhovuje.

Pomocou doplnkov môžete do WordPress pridať písma ikon

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 tá pravá. Nemuseli by ste upravovať tematické súbory a všade na svojom webe by ste mohli používať fonty ikon.

Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať doplnok Font Awesome WordPress. Ďalšie informácie nájdete v našej podrobnej príručke, 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:

(ikona názvu = "raketa")

Tento skrátený kód môžete použiť v spojení s iným textom alebo iba vo vyhradenom bloku skráteného kódu.

Pridajte zdrojový kód ikony do WordPress

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

Ukážka ikony

Môžete tiež pridať krátky kód pre ikonu písma v rámci bloku odsekov, kde môžete pomocou nastavení bloku zväčšiť veľkosť ikony.

Zväčšiť veľkosť ikony

Keď sa veľkosť textu zväčší, v textovom editore sa to môže zdať čudné. Dôvodom je skutočnosť, že skrátený kód sa v editore blokov automaticky nezmení na písmo ikon.

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 rozšírenej ikony

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

V rámčekoch funkcií používajte písma ikon

2, Používanie fontov ikon s generátorom stránky 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 vášho webu.

Beaver Builder

Beaver Builder je najlepší doplnok na tvorbu stránok WordPress na trhu. Umožňuje vám ľahko vytvárať vlastné rozloženia stránok WordPress bez toho, aby ste museli písať akýkoľvek kód.

Beaver Builder prichádza s krásnymi ikonami a modulmi pripravenými na použitie, ktoré môžete drag and drop na vaše príspevky a stránky.

Moduly ikon Beaver Builder

Môžete vytvoriť skupiny ikon, pridať jednu ikonu a presunúť ich do správne 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

S produktom Themer spoločnosti Beaver Builder môžete dokonca vytvárať úplne vlastné témy 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. Dodáva sa tiež s rôznymi prvkami, ktoré vám umožňujú používať fonty ikon vrátane elementu Icon.

Ikona prvku

Ikonu môžete jednoducho presúvať myšou kdekoľvek a pomocou riadkov, stĺpcov a tabuliek môžete vytvárať krásne stránky.

Ď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 písiem 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 rovnako ako pridanie akéhokoľvek vlastného písma.

Niektoré fonty ikon, napríklad Font Awesome, sú k dispozícii na serveroch CDN na webe a dajú sa prepojiť priamo z vašej témy 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 štýlov.

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.

Vložte kód z programu Awesome

Teraz skontrolujte svoju doručenú poštu, či neobsahuje e-mailovú správu Awesome s vloženým kódom. Skopírujte a vložte tento kód na vloženie do súboru header.php vašej témy WordPress tesne pred značkou.

Váš kód na vloženie bude jeden riadok, ktorý bude prehľadávať knižnicu Font Awesome priamo z vašich serverov CDN. Vyzerá to takto:

 
 

Táto metóda je jednoduchš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 frontov.

Namiesto prepojenia na šablónu so štýlmi zo šablóny hlavičky vášho motívu môžete do súboru features.php alebo do doplnku pre konkrétnu lokalitu pridať nasledujúci kód.

 
 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 z ikony Awesome písma 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 do svojho počítača písmo s ikonami

Stačí si stiahnuť ikony písiem a rozbaľte balík.

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

Tam musíte vytvoriť nový priečinok a pomenovať ho ako zdroje. Ďalej musíte nahrať obsah priečinka s ikonami písma do adresára písiem na vašom webhostingovom serveri.

Nahrajte písma ikon do svojej témy WordPress

Teraz ste pripravení načítať ikony písma do svojej témy WordPress. Stačí pridať tento kód do súboru function.php vášho tém 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ť skutočné ikony do svojej témy, príspevkov alebo stránok WordPress.

Manuálne 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.

Ikonický názov

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

  
 

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

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

Môžete tiež kombinovať rôzne ikony a súčasne ich navrhovať. Predpokladajme napríklad, že chcete zobraziť zoznam odkazov s ikonami vedľa nich. Môžete ich zabaliť pod a

prvok so špecifickou triedou.

 

Home Library Applications Settings

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

 .icons-group-item i { 
 color: #333; 
 font-size: 50px; 
 } 
 .icons-group-item i:hover { 
 color: #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 tiež vyskúšať náš tutoriál o pridávaní ikon obrázkov s navigačnými ponukami v programe WordPress.

Ak sa vám tento článok páčil, prihláste sa na odber nášho kanála YouTube pozerať videozáznamy z programu WordPress. Nájdete nás aj na Twitter a Facebook,