Folosirea Font Awesome in paginile web

In acest videoclip vom vedea cum putem folosi fonturile in forma de iconita, numite Icon Fonts.

Sunt acele fonturi care genereaza pictograme, reprezentari grafice in forma de font a iconitelor folosite in site-urile web.

Acestea merg de la:
– iconite generale pentru aplicatiile web,
– pentru controlul formularelor web,
– pentru monedele cele mai utilizate,
– cele caracteristice editoarelor de text,
– iconite directionale,
– iconite pentru retelele sociale.

Iata cateva exemple:

Exista mai multe site-uri web unde putem gasi colectiile de icon fonts, aceste fonturi fiind in general gratuite. Pentru acest tutorial vom prezenta fonturile Font Awesome, care au fost realizate initial pentru Bootstrap, dar care se pot utiliza in orice site web.

Utilizare Font Awesome

Pentru a putea utiliza aceste fonturi va trebui sa linkam paginii nostre web foaia de stil css care gestioneaza fonturile si dosarul ce contine fonturile. Aici avem doua posibilitati:

– putem linka foaia de stil cu un link extern pe care il generam din pagina Get Started, inserand adresa de e-mail il vom primi pe e-mail.
– sau putem descarca pachetul de fonturi pentru a linka foia de stil CSS interna. In interiorul dosarului descarcat vom gasi cele doua fisiere css si dosarul ce contine colectia de fonturi. Vom copia in interiorul dosarului site-ului nostru dosarul CSS si Fonts.

Odata ce am copiat aceste fisiere in dosarul site-ului nostru si am inserat link-ul la foaia de stil in cadrul regiunii de head a paginii nostre, tot ce ne ramane sa facem este sa plasam iconitele de care avem nevoie. Pentru a vedea care este regula CSS corespondenta fiecarei iconite vom merge pe pagina iconitiei respective si vom copia clasa in pozitia unde vrem sa inseram iconita.

Dimensiuni Font Awesome

Dimensiunea la care inseram iconitele este cea de default, daca avem nevoie de iconite mai mari putem insera clasele pe care le gasim in pagina de exemple pentru a obtine iconite mai mari de 2, 3, 4 sau 5 ori.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x