HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Font Awesome More 2.0: colección de iconos para la web en forma de tipo de letra

Font Awesome es un proyecto open source con el objetivo de crear un tipo de letra cuyos caracteres sean una gran colección de iconos pensados para la web.

Font Awesome More es la evolución de Font Awesome, un proyecto open source con el objetivo de crear un tipo de letra cuyos caracteres sean una gran colección de iconos pensados para su utilización en sitios web.

De esta manera, puedes cargar la tipografía mediante CSS y utilizar la propiedad "content" para dibujar el icono deseado. La ventaja principal es que con un solo fichero cargas toda la colección completa y además los iconos se adaptan perfectamente al tamaño del texto, sin perder ni un ápice de calidad al hacer zoom para ampliar o reducir el contenido. Además, al estar los iconos optimizados para su utilización de esta forma, puedes aplicar cualquier estilo CSS sobre ellos para conseguir efectos y variantes (sombras, colores, tamaños, etc).

Cualquier cosa que puedas hacer con efectos CSS la puedes aplicar a los iconos de Font Awesome.

Las características principales de Font Awesome son:

  • Incluye el tipo de letra para instalarlo en tu escritorio y un PDF con todos los iconos.
  • Iconos vectoriales completamente escalables a cualquier tamaño.
  • Con un solo tipo de letra obtienes más de 250 iconos relacionados con la web.
  • Es software libre y es gratuito incluso para su uso comercial.
  • Soporte para Internet Explorer 7 o mayor.
  • Control mediante CSS: modificación de los iconos muy sencilla usando propiedades CSS.

La colección de iconos

La colección, con más de 250 iconos, es una auténtica pasada. En la página web puedes verlos todos organizados por categorías, los hay de todo tipo: iconos generales para cualquier aplicación web, para botones de edición de textos, iconos de redes sociales y servicios web populares, flechas, botones para reproductores multimedia…

Algunos iconos nuevos en Font Awesome More 2.0 Algunos iconos nuevos en Font Awesome More 2.0[/caption]

Integración de Font Awesome en tu proyecto web

Cuando descargas todos los ficheros del proyecto, te encuentras que ya viene todo preparado y mascadito para usarlo rápidamente en cualquier proyecto web:

  • El tipo de letra en formato TTF, SVG, EOT y WOFF. Optimizados para web pero también para instalarlos en el ordenador.
  • Un fichero CSS con todo ya preparado: la carga de la tipografía mediante @font-face y la definición de las más de 250 clases para todos los iconos.
  • Si utilizas algún framework como LESS o SASS, también están incluídos los ficheros.
  • Un PDF con todos los iconos y los nombres de sus clases, como referencia para buscarlos fácilmente.
  • Un directorio “docs” con toda la documentación que también puedes ver en la web online.

Una vez tienes el CSS (o el LESS o el SASS) ya creado y configurado, la propuesta es utilizar el elemento HTML <i> para generar el icono. Para elegir cuál debe aparecer ahí, solamente tendrás que añadirle a ese elemento la clase correspondiente al icono (detalladas todas ellas en el PDF de documentación).

Por ejemplo, vamos a crear un elemento con un icono de cámara de fotos a su lado, un botón con la acción de eliminar con el icono de la papelera y un enlace para compartir en Facebook.

Ejemplo sencillito de uso de Font Awesome

El código HTML sería por ejemplo algo así:

<p class="title">
    <i class="icon-camera-retro little"></i> Icono de cámara de fotos
</p>
 
<button type="button" class="medium">
    <i class="icon-trash medium"></i> Eliminar
</button>
 
<a href="#" class="big">
    <i class="icon-facebook big"></i> Enviar a Facebook
</a>

Y el CSS:

.little, i.little{
    font-size: 16px;
}
.medium, i.medium{
    font-size: 24px;
}
.big, i.big{
    font-size: 50px;
}

He creado las clases little, medium y big solamente para probar cómo se comporta el renderizado de los iconos con diferentes tamaños.

¡Alucinante! :)

Además, si eres fan de Twitter Bootstrap debes saber que Font Awesome More ofrece una integración total con ese proyecto.

Y ojo, que el proyecto no ha terminado. En la propia web está descrito el roadmap con las próximas mejoras planificadas: carga de subgrupos de iconos, más iconos, mejoras de renderizado de los iconos con tamaños pequeños, mejorar compatibilidad con Twitter Bootstrap…

Enlaces: