Font Awesome este o bibliotecă convenabilă de icoane. Aceste pictograme pot fi grafică vectorială stocate în .svg format de fișier sau fonturi web.

Aceste pictograme sunt tratate la fel ca fonturile. Puteți specifica dimensiunea lor folosind pixeli și vor lua dimensiunea fontului elementelor HTML părinte.

Utilizare de bază

Pentru a include Font Awesome în aplicația sau pagina dvs., trebuie doar să adăugați următorul cod în <head> element din partea de sus a codului HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">

i elementul a fost folosit inițial pentru a face alte elemente cursive, dar este acum utilizat în mod obișnuit pentru pictograme. Puteți adăuga clasele Font Awesome la i element pentru al transforma într-o pictogramă, de exemplu:

<i class="fas fa-info-circle"></i>

Rețineți că span elementul este, de asemenea, acceptabil pentru utilizarea cu pictograme.

Iată cum adăugați o pictogramă:

<i class="fas fa-thumbs-up"></i>

Aceasta va produce o pictogramă simplă cu degetul în sus:

Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

Iată cum ați insera pictograma respectivă pe un buton:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>
1611784264 269 Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

Observați că există două părți în utilizarea unei pictograme, fișierul prefix de stil si numele pictogramei. În exemplul de mai sus, prefixul stilului și numele pictogramei sunt fas și fa-thumbs-up, respectiv.

Font Awesome oferă următoarele prefixe de stil:

StilPrefixul stiluluiTipul planului
SolidfasGratuit
RegulatfarPro
UșoarăfalPro
DuotonfadPro
MărcifabGratuit

Pictogramele de marcă sunt adesea trimise chiar de companie și sunt utile pentru a construi lucruri precum butoane pentru autentificare socială sau plată. Aceste pictograme includ Twitter, Facebook, Spotify, Apple și chiar Routech:

<i class="fab fa-free-code-camp"></i>
1611784264 526 Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

Deși veți avea acces doar la pictograme solide și de marcă în cadrul planului gratuit, există încă multe modalități de a le stiliza.

Stilul fontului Icoane minunate

Pentru aplicații simple, puteți utiliza stiluri în linie:

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-thumbs-up"></i>
</span>
1611784264 231 Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

Pentru dimensionare, puteți utiliza, de asemenea, cuvintele cheie încorporate Font Awesome:

<i class="fas fa-thumbs-up fa-xs"></i>
<i class="fas fa-thumbs-up fa-sm"></i>
<i class="fas fa-thumbs-up fa-lg"></i>
<i class="fas fa-thumbs-up fa-2x"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-up fa-5x"></i>
<i class="fas fa-thumbs-up fa-7x"></i>
<i class="fas fa-thumbs-up fa-10x"></i>
1611784264 655 Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

Un lucru important de reținut este că pictogramele FA moștenesc font-size a containerului părinte. Aceasta înseamnă că icoanele se scalează cu orice text care ar putea fi folosit cu ele, ceea ce păstrează designul coerent.

De exemplu, spuneți că doriți să creați mai multe butoane. Dimensiunea implicită pentru butoane este destul de mică, deci scrieți câteva CSS pentru a crește dimensiunea butoanelor, împreună cu textul și pictogramele din ele:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>

<button>
  <i class="fas fa-thumbs-down"></i> Dislike
</button>

<button>
  <i class="fas fa-share"></i> Share
</button>
button {
  font-size: 1.5em;
  margin: 5px;
}
1611784264 567 Cum sa adaugati pictograme minunate pentru fonturi la butoanele dvs

De asemenea, puteți ajusta direct dimensiunea unei pictograme direcționând pictograma în sine și ajustând-o font-size.

Font Awesome este, bine, minunat! Fiind cele mai populare seturi de instrumente pentru pictograme, este ușor de inclus și de utilizat în toate proiectele dvs. Acum continuați cu pictograma în sus toate lucrurile.

Mai multe informatii