Cum de a adăuga cu ușurință Fonturi Icon în tema WordPress

Doriți să adăugați fonturi pentru pictograme pe site-ul dvs. WordPress? Recent, unul dintre utilizatorii noștri ne-a întrebat care este cel mai simplu mod de a adăuga fonturi de pictograme în tema lor WordPress? Fonturile de icoane pe care le permit să adăugați icoane vectoriale fără a încetini site-ul dvs. În acest articol, vă vom arăta cum să adăugați cu ușurință fonturile de pictograme în tema WordPress.

Ce sunt Fonturile Iconului și de ce ar trebui să le utilizați?

Fonturile de fonturi conțin simboluri sau pictograme în locul literelor și numerelor. Aceste pictograme pot fi redimensionate cu ușurință folosind CSS fără a mări semnificativ dimensiunea de descărcare a paginii.

Fonturile de icoane pot fi folosite pentru a afișa simbolurile utilizate în mod obișnuit. Pe un site tipic, le puteți utiliza pentru coșul dvs. de cumpărături, butoanele de descărcare, casetele cu caracteristică, glisoarele, butoanele de social media și chiar în meniurile de navigare WordPress.

Există mai multe fonturi libere și cu opțiuni open source disponibile cu sute de pictograme. De fapt, fiecare instalare WordPress vine cu setul de fonturi dashicons gratuit. Aceste pictograme sunt utilizate în bara de instrumente de administrare WordPress în interiorul zonei admin.

Unele alte fonturi populare de pictograme sunt:

• Font Awesome
• Genericons
• IcoMoon
• Linearicons

De dragul acestui tutorial, vom folosi FontAwesome. Acesta este cel mai popular, gratuit și open source font versiune disponibilă, și îl folosim, de asemenea, pe constructorul nostru OptinMonster.

Vom aborda două moduri de a adăuga fonturi de pictograme în WordPress. Prima metodă va utiliza un plugin, iar al doilea va arăta cum să adăugați un font pentru pictograme fără plugin.

Adăugarea de fonturi în WordPress utilizând pluginuri

Fonturile FontAwesome și alte pictograme gratuite sunt acceptate de multe pluginuri WordPress. Folosirea unui plugin vă permite să adăugați cu ușurință un font de pictograme pe orice temă WordPress fără a modifica orice cod.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Better Font Awesome. La activare, puteți vizita Setări »Better Font Awesome pentru a configura setările pluginului. Cu toate acestea, plugin-ul funcționează din cutie, astfel încât majoritatea utilizatorilor nu trebuie să schimbe nimic acolo.

Better Font Awesome vă permite să adăugați pictograme de fonturi folosind coduri scurte cum ar fi:

[pictogramă nume = "rachetă"]
[pictogramă nume = "cloud"]
[icon name = "căști"]

De asemenea, puteți adăuga pictogramele în editorul de posturi prin simpla selectare a unei pictograme. Continuați să creați o postare nouă sau să editați unul existent și veți vedea Introduceți butonul Pictogramă.

Dacă faceți clic pe acesta, veți apărea un pop-up în care puteți localiza o pictogramă și introduceți-o.

Veți observa că pluginul va adăuga un shortcode în editorul dvs. de postare care va arăta astfel:

[icon name = "universitate"]

Dacă doriți să personalizați în continuare pictograma, puteți adăuga propria clasă CSS pentru a adăuga stiluri personalizate.

[icon name = "universitate"]

Acum puteți modela pictograma utilizând CSS în foaia de stil a temei sau a temei copilului.

 .fa-universitate font-size: 100px; color: # FF6600;  

Este atat de simplu.

Acum, să aruncăm o privire asupra modului în care puteți adăuga fonturi de icoane în WordPress fără un plugin.

Adăugarea de fonturi în WordPress manual

Așa cum am menționat mai devreme că fonturile de pictograme sunt doar fonturi și pot fi adăugate pe site-ul dvs. ca și cum ați adăuga orice fonturi personalizate.

Unele fonturi icoane, cum ar fi Font Awesome, sunt disponibile de pe serverele CDN de pe web și pot fi legate direct de tema WordPress.

De asemenea, puteți încărca întregul director de fonturi într-un dosar din tema WordPress și apoi utilizați acele fonturi în foaia de stil.

Din moment ce folosim Font Awesome pentru acest tutorial, vă vom arăta cum îl puteți adăuga folosind ambele metode.

Metoda 1:

Aceasta este cea mai ușoară. Tot ce trebuie să faceți este să adăugați această singură linie de cod în tema proprie header.php fișier chiar înainte de etichetă.

Această metodă este cea mai simplă, dar poate provoca conflicte cu alte pluginuri.

O abordare mai bună a încărcării foilor de stil sau a scripturilor în WordPress este să le introduceți în mod corespunzător.

În loc să vă conectați la foaia de stil din șablonul antetului temei, puteți adăuga următorul cod în fișierul functions.php al temei sau într-un plugin specific site-ului.

 funcția wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Metoda 2:

A doua metodă nu este cea mai ușoară, dar vă va permite să aveți fonturile în interiorul temei.

Pur și simplu descărcați fonturile pictogramelor și dezarhivați pachetul. Acum, va trebui să vă conectați la site-ul dvs. web folosind un client FTP și mergeți la directorul temei WordPress.

Trebuie să creați un nou dosar acolo și să îl denumiți fonturi. Apoi, trebuie să încărcați conținutul folderului fonturilor pictogramelor în directorul fonturilor de pe serverul dvs..

Acum sunteți gata să încărcați fonturile icoane în tema WordPress. Pur și simplu adăugați acest cod la fișierul functions.php al temei sau la un plugin specific site-ului.

 funcția 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'); 

Ați încărcat cu succes Font Awesome în tema WordPress.

Acum vine partea în care veți adăuga icoane reale în tema WordPress, posturi sau pagini.

Afișarea manuală a fonturilor icoane în WordPress

Accesați site-ul Font Awesome pentru a vedea lista completă a pictogramelor disponibile. Faceți clic pe orice pictogramă pe care doriți să o utilizați și veți putea vedea numele pictogramei.

Copiați numele pictogramei și utilizați-l astfel în WordPress.

Puteți să stylizați această pictogramă în foaia de stil a temei:

 .fa-optin-monstru font-size: 50px; color: # FF6600;  

De asemenea, puteți combina diferite pictograme și le puteți modela simultan. De exemplu, vă permite să spuneți că doriți să afișați o listă de linkuri cu pictogramele de lângă acestea. Le puteți împacheta sub un element cu o anumită clasă.

  Acasă Bibliotecă Aplicații Setări  

Acum le poți modela în foaia de stil a temei tale:

 .pictograme-grup-element i culoare: # 333; font-size: 50px;  .icons-group-item i: hover culoare: # FF6600 

Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință fonturi de pictograme în tema WordPress. Ați putea dori, de asemenea, să aruncați o privire la tutorialul nostru despre cum să adăugați pictograme de imagine cu meniuri de navigare în WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.