Image
Top
Menú
19 d'agost de 2014

Icones escalables per la teva pàgina web

Des de l’implementació del disseny de pàgines web “responsive” s’han anat adquirint cada vegada més coneixements i els dissenyadors web em anat prescindint cada vegada més de les imatges de bits (png, jpg i gif) per substituir-ho per imatges vectorials escalables per millorar l’usabilitat del usuari en funció del dispositiu amb el que estigui navegant.

Font Awesome és una eina molt útil per implementar aquesta millora a la teva pàgina web. Es tracta d’un projecte que consisteix en l’utilització de la propietat @font-face i la etiqueta <i></i> de CSS3 i Html5. Aquesta ens permet l’utilització dels seus bancs d’imatges escalables.

Si ja utilitzes el Framework “Bootstrap” la tasca és molt senzilla perquè ja està implementat en aquest framework i només hauràs de buscar les icones que necessitis i implementar-les mitjançant el codi Html5 que et dóna la pròpia eina.

Et deixo dos exemples:

<i class=”fa fa-camera-retro”></i>

<i class=”fa fa-apple”></i>

 

Si no utilitzes el framework “Bootstrap”:

Enganxa l’etiqueta següent a la capçalera de la teva pàgina web entre el <head> </head>.

<link href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>

Un cop fet això ja podràs utilitzar moltes de les icones de Font Awesome. Si necessites més icones també pots descarregar-te el projecte amb totes les seves capacitats i intal·lar-ho al teu servidor tal i com explica en la seva pàgina oficial: Font Awesome

Article escrit per Argar Jorba

Dissenyador gràfic i desenvolupador web especialitzat en pàgines web i botigues online.
Si t'agraden els meus articles i vols consells més valuosos, no dubteu a fer una donació.

Deixa el teu comentari

Free WordPress Themes