Tutorial para convertir tus iconos en una fuente tipográfica

Hola a todos,

Os quiero traer un tutorial que he realizado en mi web, pero os lo dejo aquí por si alguien le parece útil, poderlos usar en sus proyectos para web.

Primero de todo crearemos nuestros iconos o los descargaremos, cuando tengamos los iconos los guardamos en un .zip comprimido, nos dirigimos a esta web.

http://iconvau.lt/

hay muchas mas webs que te permiten crear tus fuentes mediante tus iconos .SVG.

1- Pulsamos sobre create font
2- Arrastramos nuestro .zip
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!

http://gmdavid.com/convertir-tus-iconos-en-una-fuente-tipografica/