| 1016 Visites
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ó.
