Cum să utilizați Font Awesome pe site-ul dvs. WordPress

Când aveți posibilitatea de a alege între utilizarea unei pictograme vectoriale sau a unei imagini statice, este o idee bună să mergeți cu vectorul. Sunt mici și se încarcă rapid și se pot redimensiona la orice dimensiune fără a pierde rezoluția. Font Awesome este o bibliotecă superbă de pictograme vectoriale pe care le puteți utiliza pe site-urile dvs. web și care probabil au aproape orice formă sau marcă de care aveți nevoie. Și cel mai bun dintre toate? Este gratis. În al doilea rând, este ușor.

Abonați-vă la canalul nostru Youtube

Pictograme minunate pentru fonturi WordPress

Utilizarea bibliotecii Font Awesome de pe site-ul dvs. WordPress este relativ nedureroasă. După ce urmați acești pași simpli, veți putea să reduceți timpul de încărcare a paginii și să creați câteva modele foarte curate și clare folosind aceste pictograme ca parte a muncii dvs.

Un lucru de reținut este că (de cele mai multe ori) pictogramele Font Awesome vor fi livrate pe site-ul dvs. ca fonturi reale. De aici și numele Font Awesome. Veți putea să le stilizați și să le manipulați în orice mod, în mod normal, ar putea fi un caracter de font, utilizând CSS prin @ font-face și Font Awesome -font-family .

Din acest motiv, nu va trebui să vă faceți griji cu privire la dimensionare sau spațiu pentru fiecare browser individual sau fereastră de vizualizare. Dacă sună grozav, asta pentru că este. Și iată cum o faceți:

Instalarea Font Awesome

Deși există o modalitate manuală de a instala și utiliza Font Awesome, există o modalitate mai bună pentru utilizatorii de WordPress. Cei de la FA au lansat un plugin oficial Font Awesome WordPress și funcționează frumos.

Cu pluginul instalat și activat, aveți acum acces la codul scurt [[numele pictogramei]], precum și la fragmentele HTML. Atâta timp cât păstrați lista de pictograme FA la îndemână, pentru a ști exact de ce pictogramă aveți nevoie. Veți vedea pe pagina de setări a pluginului (care se găsește în Setări - Font Awesome ) cum sunt configurate lucrurile în mod implicit. În general, acestea sunt bine de păstrat și utilizat. Majoritatea oamenilor nu vor avea nevoie de nimic altceva.

Opțiunea Metodă este probabil cea mai importantă pentru majoritatea oamenilor. Puteți comuta între Webfont sau SVG . În timp ce SVG vă oferă mai multă putere și caracteristici (cum ar fi transformarea puterii și mascarea), Font Awesome CDN va livra pictogramele ca fișiere SVG și nu ca font. Deși acest lucru este mai bun în anumite privințe, SVG nu este recunoscut de atât de multe browsere și nici WordPress nu joacă întotdeauna bine cu imaginile SVG. Deci, vă sugerăm să îl jucați în siguranță cu versiunea webfont.

La fel și Font Awesome, de altfel: dacă nu sunteți sigur de diferență sau nu știți de ce ar trebui să utilizați SVG, atunci este foarte ușor să rămâneți cu metoda implicită webfont.

Pentru a utiliza pictogramele Font Awesome de pe site-ul dvs. WordPress, este simplu. Doar adăugați <i class = ”fab fa-wordpress”> </i> oriunde doriți să apară o pictogramă. Asigurați-vă că verificați biblioteca de pictograme pentru a afla ce nume să introduceți.

Notă: codurile scurte din plugin sunt hit-and-miss. Unele pictograme se redau perfect, în timp ce altele apar necompletate. Vă recomandăm să rămâneți la inserarea HTML, cu excepția cazului în care vedeți că shortcode-ul funcționează pentru dvs. Vedeți mai jos un exemplu al exemplului WordPress de mai sus care nu se redă, în timp ce pictograma camerei face.

Și gata. Plugin-ul Font Awesome WordPress este excelent pentru persoanele care nu se simt confortabil să intre în tema sau fișierele lor pentru a insera codul altfel necesar. Cu toate acestea, dacă vă simțiți confortabil, puteți urma aceste instrucțiuni pentru a obține pictogramele Font Awesome de pe site-ul dvs.

Instalarea manuală a icoanelor Font Awesome

Primul lucru pe care trebuie să-l faceți este să accesați site-ul Font Awesome. De acolo, faceți clic pe butonul Începeți să utilizați gratuit . Acestea oferă planuri plătite pentru persoanele care au site-uri cu trafic mare și au nevoie de o soluție de întreprindere, dar publicul larg poate scăpa de versiunea gratuită. Primești 1.500 de pictograme gratuit și peste 5.000 de variante în planul Pro.

Următorul pas este să copiați / lipiți pur și simplu. Dar veți dori să vă asigurați că ați evidențiat opțiunea webfont, la fel cum am discutat mai înainte.

Majoritatea temelor au un loc în care puteți introduce automat codul în <head> al site-ului. De exemplu, în cazul lui Divi, accesați Opțiuni tematice - Integrări și lipiți acest cod în câmpul etichetat Adăugați cod la șeful blogului dvs.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Când accesați Salvare, puteți începe să includeți oricare dintre pictogramele dorite, așa cum am făcut mai sus. Numai că nu aveți acces la shortcode făcând acest lucru.

Dacă tema dvs. nu acceptă integrarea codului

Dacă nu puteți găsi un loc ca acesta în tema dvs., este la fel de ușor de făcut manual. Va trebui să săpați în fișierele de bază ale temei dvs. pentru a face acest lucru, cu toate acestea, dar este o copiere / lipire foarte rapidă și este (în general) destul de sigură de făcut. Accesați Aspect - Editor din tabloul de bord WP și găsiți fișierul header.php .

Găsiți linia în care este scris </head> și, înainte de aceasta, trebuie să lipiți același cod din Font Awesome. Apăsați Actualizare fișier și veți putea începe să utilizați imediat pictogramele FA. Din nou, nu primiți un shortcode instalând Font Awesome în acest fel.

De asemenea, rețineți că de fiecare dată când editați un fișier tematic, doriți să utilizați o temă copil. Procedând astfel, împiedicați modificările pe care le-ați făcut să fie suprascrise atunci când tema se actualizează.

Mai multe opțiuni pentru instalare

Și dacă aveți alte nevoi mai specifice pentru Font Awesome, acestea oferă o serie de modalități de a obține acces la bibliotecă. De la instalările NPM și Yarn, până la integrarea Sketch și React, au o mulțime de opțiuni dacă aveți nevoie de ea pentru mai mult decât WordPress.

Iconițe minunate pentru stilul fontului

Acum că le aveți instalate, este timpul să faceți ca pictogramele să apară. Puteți face acest lucru folosind CSS, deoarece fiecare dintre pictograme este guvernată de o clasă CSS. Cele două stiluri cele mai des utilizate sunt culoarea și dimensiunea. Puteți include stilul CSS în foile de stil sau îl puteți face în linie. În general, poate doriți să utilizați stilul în linie, deoarece pictograme ca acestea nu tind să fie universale pe întregul site.

Site-ul Font Awesome conține exemple despre cum să faceți acest lucru. Acestea arată dimensionarea folosind pictograma lor igloo și clasa suplimentară, cum ar fi fa-xs sau fa-xl sau fa-2x pentru dimensiuni specifice.

În plus, dacă aveți nevoie ca pictograma să fie relativă la o dimensiune specifică și valorile absolute nu vor funcționa, o puteți plasa în propriul său <div> pentru ao face să funcționeze în limitele dvs.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Încheierea

Si asta e! Minunat, nu? Indiferent dacă folosiți pluginul Font Awesome WordPress sau introduceți manual codul, nu este nevoie de mai mulți pași pentru ca site-ul dvs. să funcționeze. Font Awesome este popular dintr-un motiv, iar unele dintre acestea provin din ușurința sa de utilizare. Deci, ieși afară și fii minunat!

Care este modul tău preferat de a utiliza pictogramele Font Awesome?

Articolul conține imaginea oferită de Font Awesome