"We Love Icon Fonts" servidor remoto de fuentes de iconos a fondo 30.12.12
Cómo usar un servicio de alojamiento remoto de iconos tipográficos para utilizar con @font-face
"We Love Icon Fonts" servidor remoto de fuentes de iconos a fondo
Si eres de los que como yo piensas que google fonts tiene una laguna muy grande al no contar en su colección de fuentes tipográficas con ninguna de pictogramas o iconos para tus realizaciones web, este artículo te va a encantar.
We love icon fonts es la solución a esa carencia. Es un servicio de alojamiento remoto de iconos tipográficos. Sencillo, fácil de usar y gratuito. Y abierto a la comunidad. Al final tienes el enlace al proyecto en github.
Actualización: Puedes colaborar con este proyecto y su autor ayundado con tu voto a que tenga un buen servicio de alojamiento. Te lo explica aquí su autor.Colecciones de icon fonts disponibles
Las colecciones que en este momento tienes disponibles son:
- Brandico
- Entypo
- Font Awesome
- Fontelico
- Maki
- OpenWeb Icons
- Typicons
- zocial
En total, cerca de 900 iconos a disposición.
Cómo usar We love icon fon
Es tan sencillo que sólo se requieren 3 pasos
1: Elegir el icono
2: Importar y declarar
Tal como hacemos con el servicio de Google Fonts, añadimos en nuestra hoja de estilos la regla @import y las reglas css para colocar el icono tipográfico al elemento que deseemos. En este claso, la página lo hace con un selector de atributos.
@import url(http://weloveiconfonts.com/api/?family=openwebicons);
[class*="openwebicons-"]:before {
font-family: 'OpenWeb Icons', sans-serif;
}
Html
<elemento class="openwebicons-css3">Css3</elemento>
Nota que no hay declaración de la propiedad content: . La razón es que se incluyen en la hoja de estilos que se descarga al usar esta herramienta. Cada "icono" tiene la suya propia. Un poco más de información un poco más abajo en la prueba de rendimiento.
3: Disfrutar de la vista
Y aquí está nuestro icono de Css3 elegido, y para que luzca como debe, sólo es necesario añadirle las declaraciones css que consideres oportunas: color, tamaño...
Esto para utilizar un sólo icono. Si necesitas utilizar más de uno, como un menú, una relación de múltiples elementos... sigue siendo igual de sencillo.
<ul>
<li class="zocial-twitter"></li>
<li class="zocial-appstore"></li>
<li class="zocial-flickr"></li>
<li class="zocial-lastfm"></li>
<li class="zocial-meetup"></li>
<li class="zocial-reddit"></li>
</ul>
Observaciones
El servicio que da "We Love Icon Fonts" viene a cubrir una necesidad de aquellos que no puedan alojar los archivos tipográficos de iconos por cuenta propia y no quieran/puedan pagarse alguno de los múltiples servicios de pago que cubren esto mismo.
Como todo proyecto tiene algunas particularidades que has de tener en cuenta. En especial:
No se cargan sólo los iconos seleccionados. Lo hace toda el archivo. Si seleccionas un icono de la librería "entypo" y otro de "Typicons", por ejemplo, no hay forma de evitar la transferencia de las dos al completo en vez de sólo los dos iconos. Como ocurre con google fonts. Y si la hay yo no he sido capaz de encontrar la manera de hacerlo.
Pero como estamos ante un trabajo en progreso, cabe esperar que en un futuro añada funcionalidades nuevas, más tipografías de iconos y otras mejoras, en especial que supere esta sobrecarga en el tráfico.
Una prueba de rendimiento
Para ver qué supone utilizar este servicio vamos a crear un html con todos los iconos de la fuente entypo. Son 284. Y a continuación fijarnos en qué nos dice el inspector de Chrome. Fíjate en la captura:
Como ves son 2 peticiones las que se realizan al servidor. Una a la hoja de estilos (11´73KB) y otra al archivo tipográfico (44´38KB).
En total supone un peso de 55KB y medio segundo (575ms) en cargar todo. Mucho o poco, tú evalúas y calificas.
Como curiosidad, la regla @font-face que utiliza es la siguiente.
@font-face {
font-family: 'entypo';
font-style: 'normal';
font-weight: 'normal';
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'),
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'),
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'),
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}
Esta hoja de estilos también contiene todas y cada una de las reglas con la propiedad content: de los pictogramas:
.entypo-note:before{content:"\266a"} /* la nota musical */
.entypo-search:before{content:"\1f50d"} /* la lupa de búsqueda */
Sobre el autor y "We Love Icon Fonts"
El autor es de esta herramienta es Tim Pietrusky y puedes encontrarlo en:
@TimPietrusky en Tuitter.
timpietrusky.com su web.
"We Love Icon Fonts" en github.
Y para terminar, te dejo una realización de su autor, Tim Pietrusky, de un efecto parallax utilizando estos iconos tipográficos. Disfruta de ambos, el pen y el servicio de iconos.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Recien me entero que existe, una buena herramienta para ciertos casos :)
ResponderEliminar