Iconos para web: Como prepararlos para web

Buenas,
Como por las comunidades de Google +, de diseño web, etc. Había gente que tenía dudas en cual es la mejor manera de entregar unos iconos al desarrollador web, para mi la mejor manera es crear una fuente tipográfica mediante nuestros propios iconos propios o extraídos de alguna web como esta, os explicare paso a paso como convertir tus iconos en una fuente tipográfica. Ya que con ello reduciremos las peticiones que tiene que hacer nuestra web y mejorar el tiempo de carga.

Si queréis un tutorial de como mejorar el tiempo de carga de nuestra web aquí lo tenéis.

Convertir tus iconos en una fuente tipográfica

Empezemos, primero de todo crearemos nuestros iconos o los descargaremos, cuando tengamos los iconos los guardamos en un .zip comprimido, nos dirigimos a una de estas tres páginas:

Iconvau
Fontello
Icomoon

hay muchas mas webs que te permiten crear tus fuentes mediante tus iconos .SVG, pero estas son las mas populares, yo en este tutorial he utilizado Iconvau.

1- Pulsamos sobre create font
2- Arrastramos nuestro .zip
Iconos para web convertirlos en fuentes tipográficas
3- Comenzara a procesarse(tarda un par de minutos)
4- Luego nos saltara una ventana y nos dirá donde queremos guardar el nuevo archivo.
5- Ahora ya tenemos el archivo descargado.

Abrimos el archivo descargado anteriormente, observamos que hay diferentes formatos de fuentes y un archivo .css y un .html, ahora sencillamente nos copiamos a nuestro ftp(o donde tengamos nuestra web MAMP, XAMPP…), tenemos que copiar todos los formatos de las fuentes como son .eot, .svg, .ttf y .woff,  ya que hay navegadores que aceptan una o otro tipo de formato.

Luego abrimos, el .css y copiamos su contenido en el .css de nuestra web, en mi caso es esto:

@font-face {
  font-family: "iconvault";
  src: url("iconvault_12017a4397e791af2d8861d307560b0b.eot");
  src: url("iconvault_12017a4397e791af2d8861d307560b0b.eot?#iefix") format("embedded-opentype"),
       url("iconvault_12017a4397e791af2d8861d307560b0b.woff") format("woff"),
       url("iconvault_12017a4397e791af2d8861d307560b0b.ttf") format("truetype"),
       url("iconvault_12017a4397e791af2d8861d307560b0b.svg#iconvault") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon-employee2:before,
.icon-butler:before,
.icon-office-worker1:before,
.icon-silhouette67:before,
.icon-worker18:before,
.icon-office-worker:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-employee2:before { content: "\f100"; }
.icon-butler:before { content: "\f101"; }
.icon-office-worker1:before { content: "\f102"; }
.icon-silhouette67:before { content: "\f103"; }
.icon-worker18:before { content: "\f104"; }
.icon-office-worker:before { content: "\f105"; }

(tenemos que cambiar la url de las tipografías, si las ponemos en otro lugar)

Como podemos observar, el font-face importa la fuente, y el resto son las clases que utilizaremos para añadir los iconos. Ahora solamente tenemos que poner en nuestro html una etiqueta span o i o em ya que estas son etiquetas inline y no producen un salto de linea (Podemos utilizar también cualquier etiqueta lo que puede implicar un salto de linea).

<span class=”icon-employee2″ ></ span>   //icono de un empleado

Si ademas queremos modificar esas fuentes, tanto su tamaño color o jugar con efecto hover, etc. Yo hago una clase nueva y alli les añado tamaño, color, etc.

Espero que os haya gustado.

Saludos!

Summary
Review Date
Author Rating
51star1star1star1star1star

Comentarios:

  1. Edovalm

    Hola, gracias por tu excelente artículo, pero tengo una pregunta que quizá me podrías contestar, en el caso que no usemos una herramienta online como las que mencionas (eje: Icomoon) sino que hagamos todo el trabajo con digamos Inkscape y su editor de fuentes svg, haciendo cada glifo con el icono en cuestión ligándolo a letras (a, b, c, d, etc como si fueran los diseños de esas letras) ¿como haría para usarlos como “clases” en el css, así como quedan con icomoon? lo que sucede es que intenté usar las 3 herramientas que nos compartes pero en todas el diseño se me daña en unas curvas, y buscando darle solución sencillamente hice una fuente svg pero usando los íconos en ves de los diseños de las letras y me funcionó, pero la verdad me gustaría mucho usarlo como “clases” y no escribir la letra ligada al ícono en el html (con el font family pertinente que me muestra el ícono y no la letra), ojalá me hubiese hecho entender, de ante mano gracias…

    Responder
    1. David Gutiérrez Autor

      Me alegro que te guste Edovalm, Ahora mismo si te soy sincero nunca lo he hecho sin utilizar ninguna de estas herramientas que he mencionado si encuentro algo referente a lo que indicas actualizaré el post con mas información, si por el contrario encuentra usted como hacerlo me encantaría que comentara la solución que ha encontrado para así compartirla en este blog.

      Responder
      1. Edovalm

        Hola, estuve viendo y analizando el código que se genera en los archivos usando la herramienta de icomoon, especialmente el código de los archivos .svg y el .css, así pude descubrir que para crear una clase basado en el icono se usa el código unicode, el cual en la fuente que yo creé con inkscape era la letra que ligué al glifo del diseño del ícono como “cadena coincidente” entonces pensé que si copiaba el código generado por icommon y remplazaba la información con la de mi fuente creada en inkscape funcionaria, y así fue, te detallo los pasos:
        1ro: Crear los diseños con inkscape y crear una fuente con su editor de fuentes svg ligando los glifos a letras como “cadena coincidente” (dejo un link a un tutorial con el que aprendí como hacerlo: http://goo.gl/Kl0Hwb )
        2do Con una herramienta online convertir la fuente .svg al resto de formatos para web.
        3ro. Poner en el css con @font face el codigo para cada fuente asi:
        @font-face {
        font-family: ‘nombre-tipografia’;
        src: url(‘../fonts/nombre-tipografia/nombre-tipografia.eot’);
        src: url(‘../fonts/nombre-tipografia/nombre-tipografia.eot?#iefix’) format(‘embedded-opentype’),
        url(‘../fonts/nombre-tipografia/nombre-tipografia.woff’) format(‘woff’),
        url(‘../fonts/nombre-tipografia/nombre-tipografia.ttf’) format(‘truetype’),
        url(‘../fonts/nombre-tipografia/nombre-tipografia.svg’),
        url(‘../fonts/nombre-tipografia/nombre-tipografia.otf’);
        }
        4to. Basado en el código que genera icomoon noté que era necesario para que funcionara colocar el siguiente código css con pseudoclases, que como novato aun no entiendo muy bien jeje (pero con nuestra información, claro está).

        [class^=”icon-“], [class*=” icon-“] {
        font-family: ‘Icon-nombre-fuente’;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        }
        Nota:
        [class^=”icon-“], [class*=” icon-“] esto nos indica que el nombre de la “clase” que vamos a crear debe empezar con la cadena de caracteres “icon-” , podemos cambiarla si queremos, pero yo la deje así como la genera la herramienta de icomoon.
        5to, crear nuestra clase de esta manera:
        .icon-nombre-clase:before {
        content: “a”;
        }
        Nota: La letra “a” es la “cadena coincidente” a la que ligué el diseño del glifo al crear la fuente con inkscape, y que en el código del archivo .svg aparece como el código “Unicode” del glifo del ícono; en los archivos generados por la herramienta de icomoon para cada icono genera un código Unicode el cual se situaría donde yo situé la “a”.
        6to: En el html creamos un span con la clase que creamos del siguiente modo (como cuando lo hacemos con icomoon):
        y en ese lugar aparecerá el ícono, y listo…
        Mi duda era si tenía que ser un código unicode con las características de los que genera icomoon, pero no, con la cadena coincidente elegida por nosotros al crear el glifo al hacer la fuente funciona perfectamente (y)
        Si llegases a profundizar de alguna manera en el tema sería excelente que lo publicaras, un abrazo…

        Responder
        1. David Gutiérrez Autor

          Muchas gracias, por tu comentario otra vez Edovalm. Mañana actualizaré el post si tengo tiempo con todo lo que nos has explicado. Y si llego a profundizar sobre el tema, te lo haré saber no lo dudes.

          Gracias otra vez amigo.

          Responder
          1. Edovalm

            Hola David, acabo de descubrir algo mas, resulta que me dio por mirar como funcionaba en safari y salían los íconos horribles, para solucionarlo revisé de nuevo el css generado por icomoon y me faltaban estas líneas de código:
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            … y listo, entonces el código completo es así:

            [class^=”icon-“], [class*=” icon-“] {
            font-family: ‘Icon-nombre-fuente’;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;

            /* Mejora el renderizado en safari */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            }
            …Ahí vamos descubriendo cosas nuevas jeje… un abrazo

          2. David Gutiérrez Autor

            Eres un crack, muchas gracias de verdad. Luego si tengo tiempo lo actualizo.

            Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada.