Cum să adăugați pictograme minunate de font la WordPress - Ghidul complet

Despre asta este acest ghid. Când termini de citit, vei ști exact cum să:

• Adăugați manual foaia de stil Font Awesome la WordPress
• Adăugați Font Awesome la WordPress cu un plugin gratuit
• Inserați și stilați pictogramele Font Awesome într-o varietate de moduri diferite

Să pătrundem…

De ce ar trebui să vă faceți timp să adăugați pictograme minunate de font la WordPress

Font Pictogramele Awesome sunt minunate deoarece, după cum sugerează și numele, sunt mai degrabă un font pictogramă decât imagini. Asta înseamnă că poți face lucruri interesante precum:

• Redimensionați fără a pierde calitatea deoarece pictogramele sunt vectori
• Schimbați culorile, adăugați animație și utilizați alte manipulări CSS

Toate acestea de spus, pictogramele Font Awesome sunt cu mult superioare doar utilizării unei imagini statice.

În primul rând, vă voi arăta două moduri diferite de a le adăuga pe site-ul dvs. Apoi, vă voi arăta cum vă puteți stila și manipula pictogramele (indiferent de metoda pe care o alegeți).

Cum să adăugați manual pictograme Font Awesome la WordPress

Dacă gândul de a săpa în codul temei te sperie, îți recomand să treceți la următoarea secțiune, unde vă voi arăta cum să adăugați pictograme Font Awesome la WordPress folosind un plugin gratuit.

În caz contrar, îmi place această metodă pentru o modalitate plăcută și ușoară de a pune Font Awesome în funcțiune.

Practic, tot ce trebuie să faceți este să adăugați foaia de stil Font Awesome la tema dvs. WordPress. Apoi, puteți începe să inserați pictograme Font Awesome și să le stilați după cum doriți.

Iată cum funcționează întregul proces, pas cu pas:

Pasul 1: Puneți în coadă Foaia de stil Font Awesome în tema dvs. WordPress

După cum am spus, primul pas este să adăugați foaia de stil CSS Font Awesome la tema dvs. WordPress. Deși puteți obține acest lucru direct de pe site-ul Font Awesome, metoda mea preferată este să folosesc versiunea găzduită pe Bootstrap CDN.

În prezent, acel link este:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Dar se va schimba pe măsură ce Font Awesome lansează versiuni noi. Prin urmare, este o idee bună să actualizați semi-regulat linkul către cea mai recentă versiune (deși versiunile mai vechi vor continua să funcționeze).

Pentru a adăuga această foaie de stil la WordPress, trebuie să o puneți în coadă în fișierul functions.php al temei copilului dumneavoastră. În timp ce metoda de bază de adăugare a CSS este să puneți linkul în antet, este cea mai bună practică să utilizați funcția specială de coadă WordPress în loc să puneți foaia de stil direct în antet.

În plus, utilizarea unei teme secundare vă asigură că modificările dvs. nu vor fi suprascrise dacă trebuie vreodată să vă actualizați tema.

Deoarece respectarea celor mai bune practici pentru codul WordPress este un lucru bun, vă recomand cu siguranță să utilizați atât o temă copil, cât și funcția de coadă.

Ok, iată cum se face:

Accesați Aspect → Editor și selectați fișierul functions.php pentru tema copilului dumneavoastră.

Apoi, inserați acest cod:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Asigurați-vă că ați salvat modificările și ați terminat! Nu prea dureros, nu?

Pasul 2: Inserați pictograme Font Awesome

După ce ați pus în coadă foaia de stil, puteți insera pictograme Font Awesome în site-ul dvs. mergând la căutarea pictogramei Font Awesome și găsind o pictogramă pe care doriți să o inserați:

Când faceți clic pe o pictogramă, Font Awesome vă va oferi codul de care aveți nevoie pentru a utiliza pictograma:

Tot ce trebuie să faceți este să plasați acel cod în fila Text a Editorului WordPress pentru a adăuga o pictogramă pe site-ul dvs.

Si asta e! Ați adăugat cu succes suport Font Awesome la WordPress. Acum, tot ce mai rămâne este să înveți cum să stilezi pictogramele Font Awesome pe site-ul tău WordPress.

Dar înainte de a vă arăta asta, vreau să trec peste metoda pluginului pentru adăugarea Font Awesome Support. Simțiți-vă liber să săriți înainte dacă ați trecut cu metoda manuală peste metoda pluginului.

Cum să adăugați pictograme minunate de font la WordPress cu un plugin

Dacă preferați să utilizați un plugin în loc să puneți manual în coadă foaia de stil Font Awesome, există o opțiune solidă gratuită listată pe WordPress.org numită Better Font Awesome.

Pe lângă faptul că adaugă mereu cea mai recentă foaie de stil pe site-ul tău, Better Font Awesome, de asemenea:

• Vă permite să utilizați coduri scurte pentru a încorpora pictogramele Font Awesome.
• Vă oferă un meniu derulant în Editorul TinyMCE pentru a insera pictograme.

Dacă intenționați să utilizați în mod regulat pictogramele Font Awesome, aceste două instrumente vă pot face viața mai ușoară. Dar pentru utilizare rar, cred că metoda manuală este cea mai simplă opțiune, deoarece este cea mai ușoară.

Pasul 1: Instalați și activați pluginul

Pentru a adăuga Font Awesome, tot ce trebuie să faceți este să instalați și să activați pluginul. Chiar nu e nimic altceva.

Deși există un panou de setări de bază pe care îl puteți accesa accesând Setări → Better Font Awesome , sunteți total liber să lăsați totul ca implicit.

Pasul 2: Inserați pictograme Font Awesome

Pentru a insera pictograme Font Awesome cu pluginul, aveți două opțiuni diferite:

• Utilizați codul de pe site-ul Font Awesome, așa cum am demonstrat în secțiunea anterioară.
• Utilizați coduri scurte, care pot fi generate dintr-un drop-down.

Deoarece v-am arătat deja prima metodă în secțiunea anterioară, vă voi arunca doar o privire rapidă la generatorul de coduri scurte derulant.

Când mergeți să creați o postare sau o pagină nouă, veți observa un nou buton Inserare pictogramă lângă butonul Adăugați conținut media . Dacă faceți clic pe el, veți vedea toate pictogramele disponibile Font Awesome, precum și o opțiune de filtrare a rezultatelor:

Tot ce trebuie să faceți este să faceți clic pe pictograma aleasă și pluginul va insera codul scurt corespunzător:

Și asta e tot ce este!

Acum că aveți suport pentru pictogramele Font Awesome, haideți să cercetăm câteva moduri în care puteți stila și manipula pictogramele Font Awesome.

Cum să stilați fonturile pentru pictograme minunate și să schimbați dimensiunile

Indiferent de metoda pe care ați folosit-o pentru a adăuga Font Awesome la WordPress, veți folosi aceleași principii de bază pentru a vă stila pictogramele.

În plus, aceste comenzi funcționează indiferent dacă utilizați coduri scurte sau codul încorporat de pe site-ul Font Awesome.

Cele mai multe dintre aceste sfaturi sunt extrase direct din pagina de exemple Font Awesome, așa că nu trebuie să vă faceți griji cu privire la compatibilitate.

Schimbați dimensiunea pictogramelor Font Awesome

Să începem cu unul de bază – creșterea dimensiunii pictogramelor Font Awesome. În mod implicit, pictogramele sunt destul de mici, așa că aceasta este cu siguranță o situație pe care probabil o veți întâlni.

Pentru a mări dimensiunea unei pictograme, puteți utiliza oricare dintre acești modificatori:

• fa-lg – crește dimensiunea cu 33%
• fa-2x – dublează dimensiunea
• fa-3x – triplă dimensiunea
• fa-4x –…
• fa-5x –…

Pentru a utiliza acești modificatori, trebuie doar să-l adăugați după numele pictogramei (dar în interiorul ghilimelelor) pentru cod și în ghilimelele clasei pentru codul scurt. Iată un exemplu de triplare a dimensiunii unei pictograme pentru ambele metode de încorporare:

• <i class="fa fa-download fa-3x " aria-hidden="true"></i>
• [icon name="download" class=" fa-3x "]

De exemplu, aceasta:

Devine acesta pe front-end:

Rotiți fontul Pictograme minunate

De asemenea, puteți roti cu ușurință pictogramele Font Awesome pentru a le schimba orientarea.

Iată modificatorii pentru rotație. Puteți folosi oricare dintre aceștia exact la fel ca modificatorii de dimensiune de mai sus:

• fa-rotate-90 – se rotește cu 90 de grade
• fa-rotate-180 – se rotește la 180 de grade
• fa-rotate-270 – se rotește la 270 de grade
• fa-flip-horizontal – întoarce pictograma de-a lungul axei orizontale
• fa-flip-vertical – întoarce pictograma de-a lungul axei sale verticale

Adăugați animație la Font Awesome Icons

De asemenea, puteți adăuga câteva animații de bază la pictogramele dvs. Font Awesome vă oferă doi modificatori diferiți pentru a adăuga rotații:

• fa-spin – adaugă o rotație lină
• fa-pulse – face ca pictograma să se rotească în 8 pași diferiți

Aceste animații sunt cel mai bine asociate cu pictograme circulare. Dacă utilizați alte pictograme cu forme ciudate, efectul ar putea părea puțin ciudat.

Schimbați culoarea pictogramei Font Awesome

În cele din urmă, vă voi arăta cum să schimbați culoarea pictogramelor Font Awesome. Din păcate, nu există modificatori încorporați pentru aceasta. În schimb, va trebui să utilizați unele CSS personalizate.

Nu vă faceți griji, totuși – este foarte simplu.

Tot ce ai nevoie este acest mic cod:

.fa-NAME {
color: COLOR;
}

Unde fa-NAME este numele real al pictogramei dvs. și COLOR este culoarea în care doriți să o schimbați.

Pentru a rămâne cu pictograma de descărcare din exemplele noastre anterioare, iată cum ați transforma-o în roșu:

Puteți adăuga cu ușurință CSS personalizat accesând Aspect → Personalizator → CSS suplimentar .

Încheierea lucrurilor

Configurarea pictogramelor Font Awesome vă poate dura câteva minute. Dar odată ce le-ai instalat, sunt acolo pentru totdeauna. De atunci, tot ce trebuie să faceți pentru a insera și stiliza pictogramele Font Awesome individuale este să urmați pașii de mai sus.

Fiți conștienți – dacă utilizați metoda manuală, veți dori să accesați periodic și să actualizați linkul către foaia de stil pentru a fi la curent cu cele mai recente versiuni.