Cum să adăugați pictograme SVG minunate cu font la tema dvs. WordPress

Dacă doriți să adăugați un pic de dinamism temei dvs. WordPress, adăugarea pictogramelor Font Awesome SVG este o modalitate excelentă de a face acest lucru. Și, nu este atât de dificil pe cât ai putea crede. În acest articol, vă vom arăta cum să adăugați pictograme Font Awesome SVG la tema dvs. WordPress. Mai întâi, va trebui să găsiți pictogramele Font Awesome SVG pe care doriți să le utilizați. Puteți găsi o selecție largă de pictograme pe site-ul web Font Awesome. După ce ați găsit pictogramele pe care doriți să le utilizați, descărcați-le pe computer. Apoi, va trebui să încărcați pictogramele Font Awesome SVG pe tema dvs. WordPress. Puteți face acest lucru accesând fila „Aspect” din tabloul de bord WordPress și selectând „Editor”. De acolo, localizați fișierul „funcții tematice” (numit de obicei „functions.php”) și încărcați pictogramele Font Awesome SVG în acel fișier. În cele din urmă, va trebui să adăugați câteva linii de cod la tema dvs. WordPress pentru a afișa de fapt pictogramele Font Awesome SVG. Găsiți fișierul „header.php” și adăugați următoarele linii de cod la el: După ce ați adăugat acele linii de cod, salvați modificările și încărcați fișierul „header.php” pe tema WordPress. Asta e! Ar trebui să vedeți acum pictogramele Font Awesome SVG care apar în tema dvs. WordPress.

Ghid pentru începători pentru utilizarea pictogramelor cu font minunat pentru un site WordPress (2021). Cele mai populare biblioteci de pictograme și seturi de instrumente de pe Internet sunt biblioteca și setul de instrumente fontawesome. Puteți instala cu ușurință Font Awesome pe WordPress într-unul din două moduri. Urmând acești pași, veți putea integra Font Awesome cu WordPress. Dacă nu știți cum să gestionați pictogramele Font Awesome pe site-ul dvs., cel mai bine este să le lăsați pe server. Dacă găzduiți pictogramele pe cont propriu, puteți include numai fișiere care vor fi utilizate pe site-ul dvs. WordPress. Abilitatea de a personaliza și schimba aspectul pictogramelor este ceea ce face Font Awesome un pachet de pictograme.

Utilizatorii WordPress pot accesa Font Awesome prin metodele standard prezentate mai jos. Deși personalizarea pictogramelor este ușoară, mai ales dacă nu ești familiarizat cu programarea, este mai dificil dacă nu ești. Font Awesome poate fi ușor de utilizat cu pluginul Block, Gutenberg Stackable. Cu Stackable, puteți alege dintre modele prefabricate premium care sunt identice cu pictogramele Font Awesome. Dacă aveți un cont Font Awesome Pro, toate pictogramele din blocul lor sunt disponibile imediat. Stackable se ocupă de procesul de înregistrare pentru dvs., astfel încât nu va trebui să vă creați un cont sau să creați un cod de kit. Nu este necesar să știți cum să codificați pentru a schimba aspectul pictogramelor. Puteți obține acest lucru gratuit sau contra cost cu planul Pro.

Cum adaug pictograme personalizate cu fonturi minunate la WordPress?

Creați un folder în directorul temei dvs. WordPress numit fonturi sau fontawesome. Fonturile pictogramelor au fost încărcate în folderul pe care tocmai l-ați creat. După aceea, va trebui să adăugați fonturile la tema WordPress. Codul este scris direct în funcția temei dvs.

Setul Font Awesome este un set de pictograme binecunoscut cu un aspect modern. De asemenea, puteți adăuga font în browser. Este foarte ușor de utilizat și ușor de utilizat datorită unei comunități mari de utilizatori. Este întotdeauna o idee bună să furnizați o etichetă text cu pictograme. Acestea nu numai că vă fac site-ul web să arate mai profesional, dar îl fac și mai ușor de utilizat. Foaia de stil Font Awesome conține un flux constant de pictograme noi. Puteți descărca foaia de stil făcând clic aici, apoi încărcând-o pe site-ul dvs. web folosind FTP și copiend calea fișierului.

După aceea, trebuie să inserați acest cod în fișierul functions.php al temei dumneavoastră copil (vă rugăm să rețineți că sper că aceasta este o temă copil). Ar trebui să vă lăsați pictogramele puțin mai mici în majoritatea timpului. Pentru a vă mări pictograma, adăugați pur și simplu o clasă simplă la clasa pictogramei. Consultați pagina de exemple Font Awesome pentru o listă completă a tuturor manipulărilor pe care le puteți face. De asemenea, puteți adăuga pictograme Font Awesome la elementele reale de meniu WordPress folosind pluginul Font Awesome 4 Menus. Cu aceleași opțiuni de stil ca și alte opțiuni, puteți crește cu ușurință dimensiunile pictogramelor sau mai bune. În acest exemplu, ar trebui să includeți această clasă în codul scurt: pentru a mări dimensiunea pictogramei.

Cum adaug pictograme personalizate la tema mea WordPress?

Navigați la Tabloul de bord de administrare și selectați opțiunea Media din partea stângă a meniului. După ce le-ați ales pe toate, faceți clic pe Încărcați. După încărcare, copiați și inserați adresele URL ale fiecărei pictograme într-un fișier Notepad, astfel încât să știți care sunt acestea și să vă amintiți ce URL sunt.

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

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

Folosind Font Awesome, puteți adăuga pictograme la WordPress fără a fi nevoie să fiți un expert în vreun limbaj de programare sau design. De exemplu, unele pictograme cu fonturi au fost înlocuite cu imagini tradiționale sau foi de sprite, care sunt receptive și complet personalizabile. Acest CMS, care este disponibil pentru descărcare gratuită, are peste 80.000 de instalări active și este compatibil cu cea mai recentă versiune de WordPress. Pictogramele din fonturile noastre sunt aceleași cu cele din celelalte aplicații ale noastre, așa că pot fi personalizate așa cum sunt în fiecare zi. Culorile, alinierea, înălțimea, stilul și așa mai departe pot fi modificate. Majoritatea browserelor vor recunoaște pictogramele Font. Este posibil ca site-urile noastre web să nu folosească imagini deoarece există mii de pictograme de font disponibile.

Imaginile tradiționale sunt înlocuite cu pictograme Font Awesome în majoritatea modelelor. Deși există numeroase moduri de a face pictogramele să arate mai bine, pot fi făcute modificări simple asupra lor. Pe lângă schimbarea dimensiunii pictogramei, rotirea acesteia și culoarea, îi puteți modifica luminozitatea și rotația. Tot ce trebuie să faceți este să copiați și să lipiți codul de mai jos în editorul dvs. WordPress. Cum pot folosi font awesome în elementor? Nu trebuie să instalați pluginuri suplimentare sau să schimbați fișierele de bază ale temei dvs. Versiunea premium a Elementor include deja pictogramele Font Awesome. Pluginul Better Font Awesome este un plugin simplu pentru generarea de shortcodes cu Font Awesome Icons și Font Awesome Shortcodes .

Font Awesome Pictograme

Pictogramele Font Awesome sunt extrem de populare deoarece sunt ușor de utilizat și oferă o mare varietate de pictograme din care să alegeți. În plus, arată grozav!

Codurile de conținut CSS utilizate de Font awesome pentru adăugarea de pictograme la o pagină sunt::before pseudo-element. Pentru a utiliza pictograme minunate cu fonturi în codul de conținut CSS, urmați pașii de mai jos. Următoarele proprietăți personalizate CSS definesc proprietățile de familie de fonturi și de greutate ale pictogramei. Suntem forțați să folosim familia de fonturi deoarece pictograma nu este afișată. Când introduceți codul de mai sus, veți vedea pictogramele așa cum sunt afișate în stilul implicit. Dacă doriți să adăugați câteva stiluri personalizate la pictogramă, puteți face acest lucru adăugând o clasă comună. În general, pictogramele minunate cu fonturi sunt afișate utilizând numele claselor lor CSS și clasele de stil de pictogramă. Este dificil să schimbi toate numele claselor de pictograme ale proiectului. În acest caz, clasa CSS fontawesome afișează pictograme folosind coduri de conținut CSS mai degrabă decât pseudo-elemente.

Font Awesome WordPress

Font Awesome este un plugin WordPress care vă permite să utilizați pictograme în postările și paginile dvs. Include o bibliotecă de pictograme pe care le puteți utiliza în postările și paginile dvs. și, de asemenea, vă puteți încărca propriile pictograme.

Biblioteca Font Awesome este foarte simplu de utilizat pe site-ul dvs. WordPress. Timpul de încărcare a paginii va fi redus odată ce urmați acești pași simpli. Veți primi fonturi reale mai degrabă decât pictograme pentru site-ul dvs. Deoarece sunt un personaj cu un tip de caracter, ele pot fi stilizate și manipulate în orice fel ți-ai putea imagina. Dacă nu vă deranjează să intrați în tema sau fișierele dvs. pentru a introduce codul, acest plugin WordPress este o opțiune grozavă. În planul Pro, primești 1.500 de pictograme gratuit, în timp ce în planul gratuit, primești peste 5.000 de variante. Adăugați class=fab fa-wordpress în orice parte a site-ului dvs. pentru a afișa o pictogramă.

Puteți ajunge la fila Aspect – Editor din tabloul de bord WP și puteți descărca Font Awesome căutând header.php. Calea liniei, unde este scris textul și cum este scris codul este tot ce trebuie să știți; puteți lipi același cod din Font Awesome înainte de a-l folosi. Deși va trebui să săpați în fișierele de bază ale temei dvs., aceasta este o modalitate foarte rapidă de a salva codul. După instalarea și configurarea Font Awesome, asigurați-vă că apar pictogramele. Depinde de dvs. dacă includeți sau nu stilul în foile de stil. Culoarea și mărimea sunt două dintre cele mai frecvent utilizate stiluri. Puteți utiliza atributul div pentru a-l face să funcționeze în limitele constrângerilor dvs., atâta timp cât pictograma se află într-o anumită dimensiune și valorile absolute nu sunt setate.

Setări de plugin Awesome pentru font

Setul de pictograme Font Awesome este un set de pictograme popular care poate fi utilizat într-o varietate de site-uri web și aplicații. Avem un plugin care vă permite să utilizați Font Awesome în modul în care considerați potrivit cu WordPress. Pentru a utiliza pluginul, accesați meniul Setări și selectați Setări Plugin Font Awesome , unde puteți modifica setările CDN pentru a permite ca pictogramele Font Awesome Free să fie folosite ca fonturi web. Nu trebuie să modificați configurația implicită dacă doriți doar pictogramele de bază gratuite.

Font WordPress Pictograme minunate nu se afișează

În acest caz, pictogramele Font Awesome nu vor apărea. Secțiunea Opțiuni teme (Avada) din Funcțiile temei nu include niciun subset de fonturi Font Awesome . Pentru ca acesta să aibă succes, trebuie să aibă cel puțin un subset selectat.

Care este cel mai bun mod de a repara un font? În WordPress, nu puteți vedea pictograme minunate. Videoclipul de mai sus, care a fost descărcat de mai multe persoane, a atenuat unele dintre problemele pe care le aveau cu pictogramele minunate cu fonturi de pe site-urile lor web. Drept urmare, am decis să fac din această pagină o resursă gratuită. Ca rezultat, pot găsi și adăuga remedieri de fonturi și soluții la sistemul meu într-un mod mai sistematic. Deși unele pictograme Font Awesome nu au apărut pe blogul meu WordPress, altele au apărut. Problema a fost descoperită după ce am schimbat gazdele.

Nu ar trebui să fie surprinzător faptul că Font Awesome are acum un plugin numit Font Awesome plugin. Cei care folosesc un CDN pot observa unele dintre soluțiile enumerate mai jos. Cum pot remedia o pictogramă lipsă în Font Awesome? Videoclipul din partea de sus a acestei pagini vă arată că vă ghidez prin procesul meu de încercare de a rezolva acest lucru. Am găsit o referință la un font Awesome Stylesheet pe Internet. M-am îndepărtat de codul static pentru a doua oară în memoria recentă. Zona mea de pluginuri conține o serie de rezultate relevante atunci când căutați „superb”, așa cum se vede în videoclip.

Cred că asta înseamnă că cel puțin unele dintre pictogramele lipsă sunt rezultatul referirii la o foaie de stil învechită. Ce se va întâmpla dacă apăs pe butonul de pornire de pe pictograma pe care pictograma încă nu o afișează? Dacă întâmpinați probleme cu un font, îl puteți căuta în font minunat și puteți schimba designul sau variația acelei pictograme.

Adăugarea de pictograme pe site-ul dvs. web

Dacă utilizați o versiune gratuită a Font Awesome, va trebui să utilizați pictograme alternative. Folosind Icon Chooser pe o versiune plătită a Font Awesome, puteți adăuga pictograme pe site-ul dvs. web. Când vă aflați într-un bloc de text Gutenberg (sau deasupra barei de format din editorul WordPress Classic), vă va duce la opțiunea de meniu Font Awesome Icon din bara de format extinsă. Folosind Icon Chooser, puteți căuta pictograme Font Awesome după numele pictogramei, categorie sau cuvânt cheie. Pentru a plasa o pictogramă pe site-ul dvs., va trebui să utilizați mai întâi prefixul CSS fa și numele pictogramei. Dacă doriți să utilizați pictograma din categoria pictograme Font Awesome, utilizați următorul cod: *br. Font Awesome, prin urmare, este disponibil în următoarele formate: br. Mărimea fontului containerului poate fi modificată și folosind prefixul fa. Dacă dimensiunea containerului a fontului pictogramei se modifică, aceasta va deveni mai mare. Dacă aveți o versiune plătită de Font Awesome, puteți utiliza Icon Chooser pentru a adăuga pictograme pe site-ul dvs. web.