Cómo utilizar íconos escalables

Para optimizar el aspecto de nuestro sitio

Gracias a → Dave Gandy puedo utilizar iconos como éstos sin la necesidad de colocar una imagen cuando quiero mostrar una representación gráfica.

Ya esto es algo que fue creado hace varios años pero que sigue siendo moda; y es que no pesa en absoluto comparado con el tamaño de una imagen por cada elemento que queramos representar. En fin.

¿Como puedo utilizarlo en mi web?

Dirigete a FontAwesome → Coloca tu correo → Recibirás el código CDN allí, una vez recibido, deberás colocarlo en el extra → "contenido de tu head". A continuación visita FontAwesome - Iconos, haz clic en el ícono que gustes, la web te llevará a la linea de código que debes pegar (donde quieras que se muestre)

Cambiar tamaños

FontAwesome en sus ejemplos muestra la forma de cambiar los tamaños de sus íconos. Basta con agregar fa-2x dentro de las comillas (Clases CSS). Si incrementas el valor, obviamente será mas grande.

<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

Es una forma bastante fácil para darle un mejor aspecto a tu web, reduciendo la carga del sitio al evitar incluir imágenes para identificar algo, además:

• Es de fácil implementación con CSS, no necesitamos JavaScript y podemos modificar propiedades como color , tamaño , sombra etc.

• SVG significa cada icono se ve impresionante en cualquier tamaño.

• Soporte para IE7 sin necesidad de hacks

• Soporte para retina display , lo que significa que son magníficos en pantallas de alta resolución.

• Está pensado para trabajar correctamente con Twitter Bootstrap 2 pero también se puede usar de cualquier forma

• Es gratis! Puedes incluirlo en tus proyectos.