Font Awesome e simplu de folosit


În timp ce Font Awesome a fost gândit pentru Twitter Bootstrap, proiectul poate fi de folos şi independent. Chiar în această pagină îl folosesc, demonstrativ, şi puteţi să vedeţi în sursă ce simplu este. Totul porneşte de la includerea fontului, fie descărcându-l şi încărcându-l pe serverul Dvs, fie apelându-l dintr-o locaţie unde există deja (vedeţi aici prima recomandare de utilizare). Trecând de acest pas puteţi să îl folosiţi apelând la tagul <i>, punând clasa „fa” şi apoi indicând numele icoanei, de exemplu fa-arrows. Dacă vom scrie fa-2x icoana va apărea de două ori mai mare. Intuiţi atunci ce face fa-5x. Numele iconiţelor se găsesc aici.

image32

Mai jos câteva exemple cu mărimea normală, dublată şi triplată.

fa-briefcase fa-download

fa-arrows fa-cogs

fa-folder-open fa-lock

Iată o listă ce frumos se poate prezenta vizual (vedeţi în sursă codul – dacă Gheorghe se învârte este pentru că la clasă am pus şi fa-spin).

  • Ioan
  • Maria
  • Gheorghe
  • Vasilica

Interesant este că poţi şi construi icoană peste icoană. Nu, mai jos sunt pur şi simplu nişte stele afişate, gen rating, pe care le-am şi „colorat”. Dacă vreţi să vedeţi cum se face icoană peste icoană mergeţi aici.

Data viitoare când aveţi nevoie de imagini într-o pagină, gândiţi-vă dacă nu este mai simplu folosind acest font. Sunt acum înspre 400 de iconiţe disponibile, iar numărul tot creşte.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *