SummArg | Cursos y recursos para webmasters

06/04/2011

Iconos dentro de tipografías con @font-face

¿Será el futuro de los íconos? Este método promete acelerar la carga de un sitio eliminando la necesidad de utilizar imágenes para mostrar íconos y ampliando las posibilidades de uso de los mismos.

En un reciente artículo publicado en NetTuts por Wayne Helman, sugirieron la utilización de @font-face, una función que existe desde CSS2, para embeber una tipografía personalizada con símbolos para así generar los íconos. O sea, todas las imágenes que necesitamos para nuestros íconos deberían ser convertidos a una tipografía, y hecho ésto no hay límites a las posibilidades de estilo que podemos aplicar a cada ícono (tamaños, colores, sombras, efectos de texto, etc.).

@font-face es utilizado para embeber cualquier tipografía dentro de nuestra web.

@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}
@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

Luego se la llama como a cualquier tipografía.

h3 { font-family: Delicious, sans-serif; }

Mas información sobre @font-face en css3.info.

Ahora el creador del set de íconos Iconic, que incluye formatos de fuente además de los convencionales de imagen, nos presenta una idea redondeada sobre cómo mostrar estos íconos acompañados de texto en el artículo Font-Embedding Icons: This is a Big Deal. Utiliza el selector :before y la propiedad content para inyectar un carácter (ícono) antes de un texto y mostrar su método.

Ver demo

Ventajas

  • Menos solicitudes al servidor.
  • Un ícono, infinitos tamaños.
  • Sistema mas prolijo para la gestión de íconos.
  • Para cambiar los íconos se requeriría de cambiar sólo una línea del CSS.
  • Las nuevas transiciones de CSS3 abren puertas interesantes.

Desventajas

  • Los archivos de fuentes pueden ser “pesados” (90kbs).
  • No hay ningún parámetro que estandarice a que carácter corresponde cada ícono.
  • No se pueden aplicar múltiples colores en un único ícono.

Implementación

Desde Some Random Dude nos presentan este método como alternativa, pero remarcan que no es el único ni el mejor. En un primer paso debemos vincular la fuente de íconos a nuestro CSS.

@font-face {
  font-family: 'IconicStroke';
    src: url("iconic_stroke.eot");
    src: local('IconicStroke'),
       url("iconic_stroke.svg#iconic") format('svg'),
       url("iconic_stroke.otf") format('opentype');
}

Se sugiere aplicar una clase “iconic” cuando vayamos a utilizar estos íconos y a dicha clase se le cambia el display a inline-block para permitir las transformaciones de CSS3.

 .iconic {
display:inline-block;
font-family: "IconicStroke";
}

Luego se especifica cada ícono indicando con :before la posición en donde se insertará el ícono y con content se inyecta un carácter ASCII, que estará vinculado a un ícono de nuestra fuente.

.iconic.home:before {
  content: '!';
}

Finalmente en nuestro HTML usaremos una etiqueta <a> puesto que se necesita añadir un link a cada ícono.

<a name='home' class='iconic home'></a> Home

En el siguiente ejemplo se muestra cómo aprovechar los nuevos efectos de CSS3, nosotros colocaremos una imagen representativa pero para ver el ejemplo en acción visiten esta dirección.

Código CSS

.iconic {
	display:inline-block;
	font-family: "IconicStroke";
	text-shadow: 0px 0px 2px rgba(0,0,0,.33);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg);
	-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
		from(rgba(0,0,0,.5)),
		to(rgba(0,0,0,1)));
	-webkit-transition: all .3s ease-in-out;
	cursor: default;
	padding:10px 0 10px 10px;
 }
.iconic:hover {
	-webkit-transform: rotate(-10deg) scale(1.3);
	-moz-transform: rotate(-10deg) scale(1.3);
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
	color:#c00 !important;
}

Dejar un comentario

  1. […] Usar imágenes convertidas a Base64 es un modo de reducir peticiones al servidor y puede ser útil en algunos casos. Para iconos recuerden que puede ser conveniente usar tipografías, como ya lo hablamos alguna vez. […]

Dejar un comentario