Cum să utilizați pictogramele Font Awesome în WordPress

Publicat: 2022-10-14

Dacă doriți să utilizați pictogramele Font Awesome în site-ul dvs. WordPress, primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Font Awesome Icons. Pentru mai multe informații, consultați articolul nostru despre cum să instalați un plugin WordPress. Odată ce pluginul este activat, trebuie să editați tema WordPress pentru a include fișierul CSS Font Awesome. Cel mai simplu mod de a face acest lucru este prin adăugarea următorului cod în fișierul functions.php al temei: add_action('wp_enqueue_scripts', 'enqueue_font_awesome'); function enqueue_font_awesome() { wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' ); } Acest cod va încărca fișierul CSS Font Awesome din CDN-ul Bootstrap. Dacă preferați, puteți descărca fișierul CSS Font Awesome și îl puteți găzdui pe propriul server. Odată ce fișierul CSS Font Awesome este încărcat, puteți începe să utilizați pictogramele de pe site-ul dvs. WordPress. De exemplu, puteți adăuga o pictogramă în meniul dvs. astfel: Acasă Contact Puteți utiliza și pictograme Font Awesome în conținutul dvs. De exemplu, puteți adăuga o pictogramă la o listă ca aceasta: Acesta este elementul unu Acesta este elementul doi Acesta este articolul trei Și puteți adăuga o pictogramă la un link ca acesta: Urmărește-mă pe Twitter Posibilitățile sunt nesfârșite! Pentru mai multe informații, consultați site-ul web Font Awesome.

Drept urmare, utilizarea bibliotecii Font Awesome pe site-ul dvs. WordPress este relativ simplă. Veți putea reduce timpul de încărcare a paginii după ce urmați acești pași simpli. Nu va fi necesar să utilizați pictogramele ca fonturi pentru site-ul dvs. Ele pot fi editate în orice mod pe care l-ați putea include în mod normal într-un font. Pluginul Font Awesome WordPress este potrivit pentru persoanele care nu se simt confortabil să intre în tema sau fișierele lor pentru a introduce codul necesar. Planul Pro include 1.500 de pictograme gratuit, precum și peste 5.000 de variante. Puteți adăuga orice pictogramă dorită tastând și/sau editând class=fab fa-wordpress în orice limbă.

În tabloul de bord WP, ​​faceți clic pe Aspect – Editor, apoi pe fișierul header.php. Verificați poziția liniei care conține codul înainte de a da clic pe ea, apoi inserați același cod din Font Awesome. Acest lucru va necesita săpați în fișierele de bază ale temei dvs., dar va fi un proces simplu și rapid. După ce ați instalat Font Awesome, va trebui să vă asigurați că pictogramele sunt poziționate corect. Este posibil să includeți stilul în foile de stil sau să o faceți inline. Culoarea și mărimea sunt două dintre cele mai frecvent utilizate stiluri. Puteți modifica pictograma în propriul <div> pentru a o face să funcționeze în constrângerile dvs. dacă aveți nevoie să fie relativ la o anumită dimensiune, dar valorile absolute nu sunt.

Opțiunea de meniu Font Awesome Icon poate fi găsită în bara de format extinsă atunci când vă aflați într-un bloc de text Gutenberg (sau deasupra barei de format în editorul WordPress Classic). Selectorul de pictograme vă permite să căutați pictograme Font Awesome după numele pictogramei, categorie sau cuvânt cheie.

Cum folosesc Font Awesome în tema WordPress?

Credit: www.elegantthemes.com

Dacă doriți să utilizați Font Awesome în tema dvs. WordPress, există câteva moduri în care puteți face acest lucru. O modalitate este să utilizați un plugin precum Better Font Awesome , care vă va oferi o pagină de setări în care puteți activa sau dezactiva cu ușurință pictogramele Font Awesome pe site-ul dvs. O altă modalitate este să adăugați manual codul Font Awesome la tema dvs. Puteți găsi codul pentru fiecare pictogramă pe site-ul web Font Awesome. Odată ce aveți codul, îl puteți adăuga în fișierul CSS al temei sau oriunde doriți să îl includeți.

Echipa Font Awesome a creat un nou tutorial despre cum să utilizați pseudo-elementul ::before pentru a adăuga pictograme în paginile dvs. folosind CSS în versiunea 4.7 a aplicației lor. Folosind acest tutorial, nu este nevoie să utilizați imagini sau să copiați și să lipiți cod pentru a adăuga pictograme în paginile dvs.
Dacă aveți instalată versiunea gratuită a Font Awesome, este posibil să pierdeți unele dintre pictogramele din versiunea Pro. Dacă aceasta nu este o opțiune, puteți fie să obțineți pictogramele alternative gratuite, fie să faceți upgrade la un abonament Pro.
Dacă doriți să adăugați pictograme în paginile dvs. fără a fi nevoie să utilizați imagini sau cod, metoda pseudoelement ::before este o opțiune excelentă. Utilizarea acestui pseudo-element este simplă dacă urmați tutorialul oferit de Font Awesome și puteți adăuga, de asemenea, pictograme în paginile dvs.

Pot folosi font Awesome comercial?

Font Awesome este complet open source și vine cu o licență GPL. Programul poate fi folosit pentru orice proiect, de la comercial la open source la pur personal.

Cum adaug font Awesome la WordPress fără pluginuri?

Credit: readyship.co

Cum să adăugați Font Awesome la WordPress fără un plugin Puteți adăuga pictograme manual accesând biblioteca de pictograme Font Awesome și selectând dintr-o selecție de fonturi disponibile. Puteți obține codul de încorporare trimițând prin e-mail linkul către tema dvs.

Pictogramele pot fi adăugate la WordPress fără cunoștințe de programare sau design. Pictograma Font este complet personalizabilă și receptivă, iar unele dintre ele au înlocuit imaginile tradiționale sau foile de sprite. În prezent este instalat pe peste 80.000 de computere și este compatibil cu cea mai recentă versiune WordPress. Pictogramele pot fi schimbate la fel de frecvent ca fonturile obișnuite de zi cu zi. Puteți modifica culorile, alinierea, înălțimea, stilul și așa mai departe cu aceste opțiuni. Aproape fiecare browser acceptă pictograme de font. Deoarece există atât de multe pictograme de font disponibile, utilizarea imaginilor pe site-urile noastre web este limitată.

Majoritatea designerilor au încetat să mai folosească imagini tradiționale și le-au înlocuit cu pictograme Font Awesome. Pictogramele sunt un instrument fantastic care poate fi modificat într-o varietate de moduri. Atunci când modificați dimensiunea pictogramei, o rotiți, îi schimbați culoarea sau efectuați alte acțiuni, o puteți face și mai flexibilă. Codul de mai jos trebuie copiat și lipit în editorul dvs. WordPress. Cum faci ca Font Awesome să funcționeze în Elementor? Nu este nevoie să schimbați fișierele de bază sau să instalați pluginuri pentru tema dvs. Pictogramele pentru font Awesome sunt deja prezente în versiunea premium Elementor. Better Font Awesome vă va permite să utilizați coduri scurte create cu Font Awesome Pictograme și pluginul Font Awesome Shortcodes .

Modificarea setărilor CDN în pluginul Font Awesome este tot ceea ce este necesar pentru a servi pictograme personalizate. De asemenea, puteți utiliza propria configurație CDN în loc să utilizați CDN-ul implicit Font Awesome. Dacă doriți să utilizați doar pictogramele gratuite de bază, este puțin probabil să aveți nevoie să faceți modificări la configurația implicită. După ce descărcați un fișier zip gratuit de pe site-ul oficial al font awesome, extrageți-l și legați-l la pagina dvs. În documentația pluginului, există o mulțime de informații despre cum să vă configurați propriul CDN.

Font Awesome: un plugin WordPress obligatoriu pentru site-ul dvs

Pluginul Font Awesome WordPress vă permite să utilizați o bibliotecă de pictograme pe site-ul dvs. web. Dacă nu sunteți familiarizat cu acesta, îi puteți ajusta setările accesând pagina de setări a pluginului. Pentru a începe, trebuie mai întâi să instalați pluginul Font Awesome pe site-ul dvs. WordPress. Apoi, în setările pluginului, selectați Utilizați un kit. Puteți utiliza pictogramele pluginurilor cu un anumit CDN făcând acest lucru. Nu sunt necesare modificări dacă aveți nevoie doar de pictogramele de bază.


Adăugați font Awesome la WordPress fără plugin

Adăugarea Font Awesome la WordPress fără un plugin este un proces destul de simplu. Mai întâi, va trebui să vizitați site-ul web Font Awesome și să descărcați cea mai recentă versiune a bibliotecii Font Awesome. Apoi, va trebui să încărcați biblioteca Font Awesome pe site-ul dvs. WordPress. Cel mai simplu mod de a face acest lucru este prin utilizarea unui client FTP. Odată ce biblioteca Font Awesome este încărcată pe site-ul dvs. WordPress, va trebui să adăugați câteva linii de cod în fișierul functions.php al temei dvs. WordPress. Codul pe care va trebui să-l adăugați este:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome');
funcția enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
Adăugarea Font Awesome la WordPress fără un plugin este un proces destul de simplu. Codul pe care va trebui să-l adăugați este:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome');
funcția enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}

Utilizând pașii de mai jos, veți putea adăuga Font Awesome pe site-ul dvs. WordPress. Cele mai comune metode de a face acest lucru sunt interne sau externe. Cel mai important lucru este să vă asigurați că fontul este încărcat corect. Dacă fontul și linkul nu sunt configurate corect sau dacă pictograma nu apare deloc. Este simplu de utilizat Font Awesome, deoarece este nevoie de doar câteva linii pentru a copia și lipi. Dacă utilizați Sass sau Less, va trebui să descărcați folderul font-awesome și să-l plasați în rădăcina proiectului. Câteva pluginuri sunt disponibile pentru a vă ajuta în procesul de instalare. S-ar putea să doriți să vă creați propriile plugin-uri care pot fi utilizate pe mai multe proiecte și teme.

Cum să utilizați pictogramele Font Awesome în WordPress

Pur și simplu selectați pictogramele Font Awesome din meniul WordPress. Este simplu să adăugați o pictogramă la orice pagină adăugând *i class=fab fa-wordpress*/i. Verificați biblioteca de pictograme pentru sugestii despre ce să includeți. Este esențial să rețineți că shortcode-urile din plugin nu funcționează întotdeauna.

Iată cum să utilizați Font Awesome Icons pe site-ul dvs. WordPress în (2121). Este una dintre cele mai populare biblioteci de pictograme de pe Web. Cum puteți configura Font Awesome pe WordPress într-o varietate de moduri? Veți învăța cum să integrați perfect Font Awesome cu WordPress în acest articol. Când nu știi cum să folosești pictogramele Font Awesome pe site-ul tău web, găzduirea lor pe serverul tău este cea mai bună opțiune. Singurele fișiere care pot fi adăugate sunt cele pe care le vei folosi pe site-ul tău WordPress dacă găzduiești singur pictogramele. Ceea ce face ca Font Awesome să iasă în evidență ca pachet de pictograme este capacitatea sa de a personaliza și schimba aspectul pictogramelor.

Utilizatorii WordPress pot accesa Font Awesome folosind următoarele metode. Dacă nu aveți experiență de codare, personalizarea pictogramelor este și mai dificilă. Pluginul de bloc Gutenberg Stackable, care este instalat ca descărcare gratuită, poate fi folosit cu Font Awesome pentru a-l face mai ușor de utilizat. Funcția Stackable vă permite să selectați modele prefabricate premium care sunt în concordanță cu calitatea pictogramelor Font Awesome. Puteți accesa pictogramele oricărui cont Font Awesome Pro accesând blocul de pictograme. Stackable se va ocupa de procesul de înregistrare pentru dvs., deci nu este nevoie să vă creați un cont sau să creați un cod de kit. Nu este necesar să aveți cunoștințe de codificare pentru a modifica aspectul pictogramelor. Acesta este disponibil numai pentru cei care achiziționează planurile Free și Pro.

Dacă nu utilizați Font Awesome Pro, ar trebui să căutați pictogramele gratuite din lista de pictograme Font Awesome Standard . Dacă utilizați Font Awesome Pro, va trebui să faceți referire la prefixul de stil corect, precum și la fișierele suport. Dacă utilizați ghidul de stil, puteți înțelege cum să utilizați Font. Iată câteva pictograme Pro grozave. Dacă aveți un abonament Font Awesome Standard sau mai mare, trebuie să utilizați și pictogramele Pro.