Adăugarea FontAwesome la WordPress în 2 moduri simple

Publicat: 2022-09-15

Adăugarea FontAwesome la WordPress este ușoară. Există două moduri ușoare de a face acest lucru: Prima modalitate este prin utilizarea unui plugin. Vă recomandăm să utilizați pluginul Better Font Awesome . Acest plugin este gratuit și ușor de utilizat. Pur și simplu instalați și activați pluginul, apoi urmați instrucțiunile de pe pagina de setări pentru a adăuga FontAwesome pe site-ul dvs. WordPress. A doua modalitate de a adăuga FontAwesome la WordPress este prin adăugarea manuală a codului la tema dvs. Dacă vă place să editați codul, atunci această metodă este pentru dvs. Pur și simplu adăugați următorul cod în fișierul functions.php al temei dvs.: add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); function my_theme_scripts() { wp_enqueue_style( 'my-theme-fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' ); } ? > Acest cod va încărca FontAwesome din CDN-ul Bootstrap. De asemenea, puteți descărca FontAwesome și îl puteți găzdui pe propriul server. Cam despre asta e! Adăugarea FontAwesome la WordPress este ușoară, indiferent dacă utilizați un plugin sau un cod manual.

Codul de conținut CSS poate fi folosit pentru a crea pictograme de font minunate, urmând pașii de mai jos. Elementul pictogramă pe care doriți să-l utilizați trebuie să aibă un nume unic de clasă CSS. Setați proprietatea font-weight la 900 (pentru solid) sau 400 (pentru obișnuit sau mărci), 300 (pentru pictograme profesionale) sau 400 (pentru solid sau mărci). Asigurați-vă că proprietatea minunată a pictogramei fontului este setată la valoarea Unicode.

Cum instalez Font Awesome în WordPress?

Credit: tutorial.blackandblue.tech

Există câteva moduri diferite prin care puteți instala Font Awesome în WordPress. O modalitate este să utilizați un plugin precum WP Add Custom CSS sau Simple Custom CSS. Aceste plugin-uri vă vor permite să adăugați Font Awesome CSS pe site-ul dvs. WordPress. O altă modalitate de a instala Font Awesome este să adăugați manual CSS-ul la tema dvs. WordPress. Puteți face acest lucru adăugând următorul cod în fișierul CSS al temei dvs.: @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); Odată ce ați adăugat CSS-ul, va trebui să îl puneți în coadă în tema dvs. WordPress. Puteți face acest lucru adăugând următorul cod în fișierul functions.php al temei: function wp_enqueue_fa() { wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css'); } add_action( 'wp_enqueue_scripts', 'wp_enqueue_fa'); De asemenea, puteți utiliza un CDN pentru a încărca Font Awesome. Pentru a face acest lucru, ar trebui să adăugați următorul cod la tema dvs. WordPress: Odată ce ați adăugat CSS-ul, va trebui să îl puneți în coada în tema dvs. WordPress. Puteți face acest lucru adăugând următorul cod în fișierul functions.php al temei: function wp_enqueue_fa() { wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css'); } add_action( 'wp_enqueue_scripts', 'wp_enqueue_fa');

Folosind Font Awesome, puteți crea pictograme în WordPress fără a fi nevoie să învățați abilități de programare sau design. În unele cazuri, pictogramele Font au înlocuit imaginile tradiționale sau foile de sprite, deoarece sunt complet personalizabile și receptive. Au fost realizate peste 80.000 de instalări ale pluginului WordPress și este compatibil cu cea mai recentă versiune a platformei. Pictogramele fonturilor pot fi schimbate la fel ca orice altă pictogramă de zi cu zi de tipul pe care îl folosim. Culorile, alinierea, înălțimea, stilul și așa mai departe pot fi modificate. Pictogramele fonturilor pot fi folosite cu aproape orice browser. Deoarece există atât de multe pictograme de font disponibile, nu putem folosi imagini pe site-urile noastre web.

Imaginile tradiționale au fost înlocuite cu pictograme Font Awesome de majoritatea designerilor. Pictogramele pot fi modificate într-o varietate de moduri, dar pot fi modificate și într-un mod simplu. Poate fi folosit pentru a schimba dimensiunea pictogramei, a o roti, a-i ajusta culoarea și așa mai departe. Pentru a utiliza codul, copiați și inserați-l în editorul WordPress. Cum pot folosi fontawesome în elementor? Nu vor fi necesare pluginuri sau modificări ale fișierelor de bază ale temei. Versiunea premium a Elementor include pictogramele Font Awesome. Este proiectat să funcționeze cu coduri scurte generate cu pictogramele Font Awesome și pluginurile Font Awesome Shortcodes.

După cum puteți vedea, ați adăugat următoarea linie în cap. rel = foaia de stil; rel = link la foaia de stil; rel = link către site; rel = link către pagina web; Există un fișier Fontawesome? După ce ați adăugat această linie, Font Awesome va fi încărcat imediat ce ați terminat de încărcat pagina. Selectând următoarea linie, puteți aplica stilul Font Awesome oricărui element de pe site-ul dvs. Stil: Elementul este o combinație a literei. Aceasta este familia de fonturi cunoscută sub numele de „Font Awesome”. Dacă unui element nu i s-a atribuit stilul Font Awesome, utilizați următorul cod: Pentru a rezolva această problemă, utilizați următorul cod. *style* A.element este un element care nu are valoare. Familia de fonturi include fontawesome și fontmanager. # Toate elementele, indiferent dacă au „element” ca clasă, vor fi expuse stilului Font Awesome odată ce ați adăugat această linie.

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

Credit: readyship.co

Pașii de mai jos vă vor ghida prin cum să adăugați un Font Awesome fără plugin pe site-ul dvs. WordPress. Dacă doriți să adăugați manual pictograme la un site web, accesați biblioteca de pictograme Font Awesome și selectați fonturile adecvate de acolo. Apoi, folosind adresa de e-mail, introduceți codul de încorporare pentru a fi adăugat direct la tema dvs.

Acesta este modul oficial de a utiliza pictogramele Font Awesome Free sau Pro pe site-ul dvs. Utilizați editorul de blocuri sau editorul clasic pentru a adăuga pictograme la postările și paginile dvs. Pentru a utiliza Icon Chooser, va trebui să cumpărați un Pro Kit. CDN-ul poate căuta și adăuga doar pictograme gratuite și nu pictograme Pro; pentru a adăuga pictograme Pro, utilizați coduri scurte sau HTML. În cele mai multe cazuri, pluginul Font Awesome servește pictograme bazate pe web folosind CDN-ul Font Awesome. Puteți modifica setările CDN în plugin imediat ce îl deschideți. Dacă doriți doar pictogramele gratuite de bază, probabil că nu ar trebui să aveți probleme la configurarea lor în configurația implicită.

GitHub oferă informații despre proprietarii și dezvoltatorii site-urilor WordPress. În plus, API-urile pot fi găsite în secțiunea API docs a site-ului web. Pluginul Font Awesome vă permite să urmăriți cea mai recentă versiune care altfel ar fi ascunsă într-un dosar cu materiale. Asigurați-vă că aveți acces la Tokenul API pe pagina contului Font Awesome . Totul de pe site-ul meu a fost compromis ca urmare a acestuia. Nu lăsa să înceapă. Este versiunea 6 pe drum?

Acum puteți descărca versiunea 4.0.0-rc21 de pe site-ul web Font Awesome . Pentru a evita blocarea inutilă a solicitărilor de rețea către serverul API, metodele API refresh_releases() au fost depreciate. Utilizarea fișierului.svg și a pseudo-elementelor poate determina utilizatorul să experimenteze o performanță lentă, așa că faceți aceste notificări vizibile în interfața de utilizare a administratorului. Este imposibil să rulați svg pe versiunea 4 a sistemului de operare.

Cum adaug o pictogramă de font la WordPress?

Pentru a utiliza pictogramele Font Awesome pe site-ul dvs. WordPress, pur și simplu urmați acești pași simpli. Tot ce trebuie să faceți este să includeți i class=fab fa-wordpress%27/i> oriunde doriți să apară pictograma dvs. Vă rugăm să verificați din nou biblioteca de pictograme pentru a afla care ar trebui să fie numele. Codurile scurte ale pluginului sunt destinate să fie utilizate într-o varietate de moduri.

Pictogramele pot fi folosite pentru a crea o notă personală site-ului dvs. într-o varietate de moduri. Utilizarea unei pictograme în cadrul site-ului face ca un link să pară mai atrăgător și dă aspectul unui link care este mai proeminent. Pluginul Better Font Awesome este cel mai simplu mod de a instala pictograme pe WordPress, dar există o varietate de metode disponibile. Pasul 2: Trageți o pictogramă de pe blog sau pagină în editor și faceți clic pe butonul Inserați pictograma. La pasul 3, sistemul va adăuga automat un cod scurt la imagine. După aceea, puteți utiliza setările pentru a redimensiona graficul și pentru a face alte modificări. Urmând instrucțiunile, puteți adăuga următorul cod la foaia de stil a temei principale.

Dimensiunea fontului aplicației Android este 75x75x75; culoarea sa este 45f338; greutatea fontului este de 120000; înălțimea liniei este de 640; marginea de jos este de 1,5 em; iar umplutura sa este de 0,25 em. În acest moment, scopul ar trebui să fie să facem o schiță a acestui lucru. În acest moment, puteți personaliza graficul într-o varietate de moduri, inclusiv prin implementarea CSS. Conform secțiunii de început a documentului WordPress, orice clasă cu numele „icoană” trebuie să folosească codul dintre paranteze. Proprietatea font-size este utilizată pentru a determina dimensiunea pictogramei în pixeli. Culoarea codului hexazecimal este o nuanță de verde. Codul afișat aici este doar un exemplu și îl puteți schimba în orice culoare doriți. Puteți folosi pictograme pentru a evidenția link-uri de interes pentru vizitatorii dvs. sau pentru a adăuga mai multă caracteristici specifice.

Adăugarea fonturilor de pictograme pe blogul dvs. va adăuga un pic de putere stelară scrisului dvs. Puteți folosi fonturi de pictograme pentru a vă ajuta să identificați cu ușurință ce postări sunt despre anumite subiecte, precum și pentru a adăuga un aspect vizual postărilor dvs. Dacă doriți să învățați cum să utilizați fonturile pentru pictograme pe blogul dvs. sau sunteți nou la acestea, consultați ghidul nostru despre utilizarea fonturilor pentru pictograme.

Cum să utilizați fonturile pentru pictograme pe WordPress

Un buton cu o pictogramă Pictograme alături este necesar pentru a posta fonturi pentru pictograme, așa că asigurați-vă că creați sau editați o postare înainte de a da clic pe ea. Când apăsați butonul pictogramă, setul de fonturi de pictogramă va deschide un meniu derulant cu toate pictogramele sale. Pictograma va fi afișată în editorul de postări dacă alegeți una din acest meniu derulant.

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

Adăugarea Font Awesome la WordPress fără un plugin este un proces relativ simplu. Mai întâi, va trebui să descărcați fișierele Font Awesome de pe site-ul lor. Apoi, va trebui să încărcați fișierele Font Awesome pe site-ul dvs. WordPress. În cele din urmă, va trebui să adăugați câteva linii de cod la tema dvs. WordPress pentru a încărca fișierele Font Awesome.

Un ghid simplu pas cu pas despre cum să adăugați pictograme Font Awesome în meniul dvs. WordPress fără un plugin. Urmând acest tutorial, veți putea folosi Font Awesome Kit și CDN pentru a adăuga pictograme pe site-ul dvs. Caracteristica CDN este încă disponibilă, dar nu mai este acceptată. În plus, dacă doriți să utilizați CDN-ul Font Awesome, trebuie să aveți un abonament la versiunea Pro. Pe lângă adăugarea de noi funcții și de accesibilitate automată, îmbunătățește performanța, adaugă noi actualizări și adaugă o nouă versiune. Următorii pași vă vor învăța cum să configurați WordPress, astfel încât pictogramele de meniu să poată fi utilizate. Deoarece kiturile sunt susținute de un CDN rapid și stabil, pictogramele Font Awesome vor fi în continuare receptive.

Fără un plugin, puteți instala kitul Font Awesome în WordPress. Găsiți pur și simplu fișierul functions.html al temei și adăugați fragmentul de cod. Vă recomand să faceți copii de rezervă ale fișierelor, mai ales dacă sunteți începător, pentru propria dvs. siguranță. Dacă nu aveți o temă copil, puteți utiliza Code Snippets, un plugin. Pentru a vă accesa meniul, trebuie să aveți un cont Font Awesome. În schimb, vom analiza cum să adăugați manual pictograme în meniul WordPress. Dacă doriți să copiați o clasă din eticheta >i> după ce ați selectat pictograma Font Awesome, faceți acest lucru.

În acest caz, nu este necesar să includeți întreaga etichetă. Pictogramele pentru tema Font Awesome nu au apărut în meniul WordPress și nu au fost poziționate corect. Motivul pentru aceasta este că o clasă numită Font Awesome este adăugată etichetei care se ocupă de întregul meniu WordPress. Din fericire, un cod CSS poate fi folosit pentru a rezolva problema. Folosind exemplele din acest tutorial, puteți crea CSS personalizat pentru WordPress folosind o varietate de metode. Pictogramele pot fi mărite sau mai mici în funcție de greutatea și familia lor de tip în Font Awesome. CSS personalizat poate fi adăugat la pictogramele din secțiunea Adăugați câteva stiluri a setului dvs. Font Awesome.

În plus, puteți folosi meniul WordPress pentru a vă redimensiona pictogramele cu clase suplimentare. Un font poate fi inclus în fișier. Exact așa ar trebui să arate meniul tău WordPress fără un plugin. Pentru a face lucrurile mai ușor de utilizat, poate fi necesar să modificați un cod CSS personalizat pentru a rezolva unele probleme de stil. ReadyShip vă oferă găzduire AWS gestionată de înaltă calitate, cu servicii SSL și CDN gratuite, precum și site-uri și bloguri WordPress gata făcute.

Adăugați pictograme în meniul dvs. WordPress

Puteți salva fișierul ca fișier zip și apoi îl puteți încărca în folderul de instalare WordPress după ce ați lipit adresele URL ale tuturor pictogramelor. Puteți adăuga un fișier nou făcând clic pe butonul Aspect din meniul din stânga. Pentru a salva fișierul pictogramă, deschideți-l în meniul Aspect și selectați Adăugare nou, apoi inserați locația în care a fost salvat în listă.
Pictograma va fi afișată în meniul WordPress.