Cum să adăugați cu ușurință fonturi cu pictograme în tema dumneavoastră WordPress

Când ne uităm la site-urile WordPress care folosesc fișiere imagine obișnuite pentru pictogramele lor, nu ne putem abține să nu credem că pierd ceva mai bun.

Asta pentru că fonturile icon sunt alegerea mai inteligentă – se încarcă mai repede, arată mai clar pe orice ecran și le poți schimba cu ușurință dimensiunea sau culoarea cu doar câteva clicuri.

Mulți proprietari de site-uri web încă folosesc pictograme de imagine învechite, deoarece nu au auzit despre opțiunile mai ușoare disponibile. Datorită fonturilor moderne de pictograme, puteți acum adăuga pictograme cu aspect grozav pe site-ul dvs. fără a-l încetini.

În acest ghid, vă vom arăta cele mai simple moduri de a adăuga iconițe de font la tema dvs. WordPress. Am testat noi înșine aceste metode și funcționează excelent cu orice temă ați putea folosi.

Ce sunt fonturile cu pictograme și de ce ar trebui să le folosiți?

Fonturile cu pictograme conțin simboluri sau imagini mici în locul literelor și numerelor.

Puteți utiliza aceste iconițe de font în multe moduri diferite. De exemplu, le puteți folosi cu coșul de cumpărături, butoanele de descărcare, casetele de caracteristici, concursurile de tip giveaway și chiar meniurile de navigare WordPress.

De fapt, WordPress folosește pictograme de font în zona sa de administrare.

Majoritatea vizitatorilor vor înțelege imediat ce înseamnă o pictogramă utilizată frecvent, astfel încât să vă poată face site-ul mai ușor de navigat. De asemenea, vă pot ajuta să creați un site web multilingv, deoarece majoritatea oamenilor vor înțelege fonturile comune de pictograme, indiferent de limba vorbită.

Comparativ cu pictogramele bazate pe imagini, pictogramele de font se încarcă mult mai rapid, astfel încât pot crește viteza și performanța WordPress.

Există mai multe seturi de fonturi de pictograme open-source pe care le puteți utiliza gratuit, dar în acest ghid vom folosi Font Awesome, deoarece este cel mai popular set de pictograme open-source.

Acestea fiind spuse, să vedem cum puteți adăuga cu ușurință fonturi de pictograme la tema dvs. WordPress. Pur și simplu folosiți legăturile rapide pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1. Adăugarea de fonturi cu pictograme folosind un plugin WordPress (gratuit și ușor)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Metoda 1. Adăugarea de fonturi cu pictograme folosind un plugin WordPress (gratuit și ușor)

Cel mai simplu mod de a adăuga fonturi de pictograme personalizate la WordPress este prin utilizarea pluginului Font Awesome.

Acest plugin vă permite să utilizați fonturi gratuite de pictograme în paginile și postările dvs. fără a modifica fișierele temei WordPress. De asemenea, veți primi automat orice pictograme noi Font Awesome de fiecare dată când actualizați pluginul.

Primul lucru pe care trebuie să-l faceți este să adăugați Font Awesome în WordPress. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, puteți adăuga o pictogramă Font Awesome la orice bloc de scurtcod. Pur și simplu deschideți pagina sau postarea unde doriți să afișați fontul cu pictograme și apoi faceți clic pe pictograma „+”.

Acum puteți căuta „Shortcode” și selectați blocul corect atunci când apare.

Cu asta făcut, poți adăuga orice pictogramă Font Awesome folosind următorul shortcode:

[icon name="rocket"]

Pur și simplu înlocuiți „rocket” cu numele pictogramei pe care doriți să o afișați. Pentru a obține numele, accesați biblioteca Font Awesome și faceți clic pe pictograma pe care doriți să o utilizați.

În fereastra pop-up care apare, apasă pe pictograma.

Font Awesome va copia acum automat numele în clipboard.

Cu asta făcut, pur și simplu lipește numele în shortcode. Acum poți da clic pe „Publică” sau „Actualizează” pentru a face fontul icon live.

Uneori, este posibil să doriți să afișați o fontă de pictograme într-un bloc de text. De exemplu, este posibil să fie necesar să afișați un simbol de „copyright” după un nume de marcă.

Pentru a face acest lucru, pur și simplu lipiți shortcode-ul în orice bloc de Paragraf.

Puteți apoi utiliza setările din meniul din dreapta pentru a personaliza pictograma, similar cu modul în care personalizați opțiunile pentru blocurile de text. De exemplu, puteți schimba culoarea textului, dimensiunea fontului și culoarea de fundal în WordPress.

WordPress va transforma shortcode-ul într-o pictogramă Font Awesome și o va afișa alături de textul dvs.

O altă opțiune este să adăugați shortcode-ul în orice zonă pregătită pentru widget-uri.

De exemplu, puteți adăuga un bloc Shortcode în bara laterală a site-ului dvs. sau într-o secțiune similară.

Pentru mai multe informații, te rugăm să consulți ghidul nostru despre cum să folosești shortcode-uri în widget-urile barei laterale WordPress.

Poți chiar să adaugi shortcode-ul pictogramei în coloane și să creezi casete de caracteristici frumoase.

Pentru instrucțiuni detaliate, consultați ghidul nostru despre cum să adăugați casete de caracteristici cu pictograme în WordPress.

Multe site-uri web folosesc fonturi cu pictograme în meniurile lor, pentru a ajuta vizitatorii să se orienteze. Pentru a adăuga o pictogramă, fie creați un meniu nou, fie deschideți un meniu existent în tabloul de bord WordPress.

Pentru instrucțiuni pas cu pas, consultați ghidul nostru pentru începători despre cum să adăugați un meniu de navigare în WordPress.

Pe pagina Aspect » Meniuri , faceți clic pe „Opțiuni ecran” și apoi bifați caseta de lângă „Clase CSS”.

Cu asta făcut, pur și simplu dă clic pentru a extinde elementul de meniu unde vrei să afișezi pictograma.

Ar trebui să vedeți acum un nou câmp „CSS Classes”.

Pentru a obține clasa CSS a unei pictograme, pur și simplu găsiți fontul de pictograme pe site-ul Font Awesome și faceți clic pe el. Dacă doriți, puteți schimba stilul pictogramei făcând clic pe diferitele setări.

În fereastra pop-up, veți vedea un fragment de cod HTML. Clasa CSS este pur și simplu textul dintre ghilimele. De exemplu, în imaginea următoare, clasa CSS este fa-solid fa-address-book.

Pur și simplu copiați textul din interiorul ghilimelelor, apoi reveniți la tabloul de bord WordPress.

Acum puteți lipi textul în câmpul „Clase CSS”.

Pentru a adăuga mai multe fonturi de pictograme, urmați pur și simplu același proces descris mai sus.

Când ești mulțumit de modul în care este configurat meniul, dă clic pe „Salvează”. Acum, dacă vizitezi site-ul tău WordPress, vei vedea meniul de navigare actualizat.

Metoda 2. Utilizarea fonturilor cu pictograme cu SeedProd (mai personalizabil)

Dacă doriți libertatea de a utiliza pictograme de font oriunde pe site-ul dvs., atunci vă recomandăm să utilizați un plugin de tip page builder.

SeedProd este cel mai bun constructor de pagini WordPress drag-and-drop de pe piață și are peste 1400 de iconițe Font Awesome integrate. De asemenea, are un bloc de iconițe gata făcut pe care îl puteți adăuga la orice pagină folosind drag and drop.

Mai multe dintre mărcile noastre partenere și-au creat întregul site web folosindu-l și au avut experiențe grozave. Pentru detalii, consultați recenzia SeedProd.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul. Pentru mai multe detalii, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

După activare, accesați SeedProd » Setări și introduceți cheia de licență.

Puteți găsi aceste informații în contul dvs. de pe site-ul SeedProd. După ce ați introdus cheia de licență, continuați și faceți clic pe butonul „Verifică cheia”.

Apoi, trebuie să vizitați SeedProd » Pagini și să faceți clic pe butonul „Adăugați o pagină de destinație nouă”.

Acum, puteți alege un șablon pe care să îl utilizați ca bază pentru pagina dvs. SeedProd are peste 350+ șabloane proiectate profesional pe care le puteți personaliza în funcție de nevoile blogului sau site-ului dvs. WordPress.

De exemplu, puteți crea o pagină de destinație virală cu listă de așteptare, o pagină de captură sau chiar o pagină de eroare 404 personalizată pentru a menține utilizatorii implicați.

Pentru a selecta un șablon, plasați cursorul mouse-ului peste el și apoi faceți clic pe pictograma „Bifă”.

Folosim șablonul „Pagina de vânzări Ebook” în toate imaginile noastre, deoarece este perfect pentru vânzarea de produse digitale. Cu toate acestea, poți folosi orice design dorești.

Apoi, continuați și introduceți un nume pentru pagina personalizată. SeedProd va crea automat un URL bazat pe titlul paginii, dar puteți schimba acest URL cu orice doriți.

Când sunteți mulțumit de informațiile introduse, faceți clic pe butonul „Salvare și începere editare pagină”.

Apoi, veți fi direcționat către constructorul de pagini drag-and-drop SeedProd, unde puteți personaliza șablonul.

Editorul SeedProd afișează o previzualizare live a designului tău în dreapta și unele setări de bloc în stânga.

Meniul din stânga are, de asemenea, blocuri pe care le puteți trage în designul dvs.

Puteți glisa și fixa blocuri standard precum butoane și imagini sau puteți utiliza blocuri avansate precum formularul de contact, cronometru, butoane de partajare pe rețelele sociale și multe altele.

Pentru a personaliza orice bloc, pur și simplu faceți clic pentru a-l selecta în aspectul dvs.

Meniul din stânga va afișa acum toate setările pe care le puteți utiliza pentru a personaliza acel bloc. De exemplu, puteți schimba adesea culorile de fundal, puteți adăuga imagini de fundal sau puteți schimba schema de culori și fonturile pentru a se potrivi mai bine mărcii dvs.

Pentru a adăuga o fontă de pictograme pe pagină, pur și simplu găsiți blocul „Icon” în coloana din stânga și apoi glisați-l pe aspectul dvs.

SeedProd va afișa o pictogramă de tip „săgeată” în mod implicit.

Pentru a afișa o pictogramă Font Awesome diferită în schimb, pur și simplu faceți clic pentru a selecta blocul Pictogramă.

În meniul din stânga, plasați cursorul mouse-ului peste pictogramă și apoi faceți clic pe butonul „Biblioteca de pictograme” atunci când apare.

Vei vedea acum toate pictogramele Font Awesome diferite din care poți alege.

Pur și simplu găsiți pictograma de font pe care doriți să o utilizați și faceți clic pe ea.

SeedProd va adăuga acum pictograma în aspectul tău.

După ce alegeți o pictogramă, îi puteți schimba alinierea, culoarea și dimensiunea folosind setările din meniul din stânga.

Puteți adăuga, de asemenea, un link la pictograma font, tastând în câmpul „Link” din meniul din stânga.

O altă opțiune este să folosiți caseta de pictograme gata făcute de la SeedProd.

Acest lucru vă permite să introduceți un text și apoi să afișați o pictogramă de font lângă acesta, ceea ce îl face o alegere excelentă pentru blocurile de caracteristici.

Pur și simplu găsiți Icon Box în meniul din stânga și trageți-l pe aspectul dvs.

Puteți apoi să faceți clic pentru a selecta blocul și să schimbați pictograma urmând același proces descris mai sus.

După aceea, puteți introduce textul antetului și al corpului.

De asemenea, puteți modifica spațierea interioară (padding) și marginea blocului, puteți adăuga animații CSS și multe altele, selectând fila „Avansat”.

Puteți continua să lucrați la pagină adăugând mai multe blocuri și personalizând acele blocuri în meniul din stânga.

Când sunteți mulțumit de aspectul paginii, faceți clic pe butonul „Salvare”. Apoi puteți selecta „Publicare” pentru a face pagina respectivă live.

Alternativă: Folosiți pictograme SVG

O altă modalitate de a adăuga imagini cu pictograme în WordPress este utilizarea pictogramelor SVG. Prescurtare de la format vectorial scalabil, este un format de imagine utilizat frecvent pentru grafica vectorială.

Mulți oameni folosesc pictograme vectoriale SVG în locul fonturilor de pictograme atunci când doresc să adauge culori multiple pictogramei lor. Aceste fișiere sunt, de asemenea, cunoscute ca fiind mai prietenoase cu SEO și necesită doar mai puține solicitări de server pentru a se încărca decât alte pictograme de imagine.

Dacă dorești să afli mai multe despre SVG, poți consulta ghidul nostru pas cu pas despre cum să adaugi fișiere imagine SVG în WordPress.

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați pictograme font în tema dvs. WordPress. Puteți, de asemenea, să consultați ghidul nostru despre cei mai buni constructori de teme WordPress și cum să schimbați fonturile în tema dvs. WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.