[SOLUCIONADO] Problema al insertar como webfont Flaticon

[madman_18]

Buenas a todos!

Comentaros...estoy intentando meter en mi nueva web los iconos que se pueden encontrar en http://www.flaticon.com/.

Según he leído es mejor insertarlos como webfont ya que aligera la carga (si estoy equivocado o lo que sea me lo comentáis porque yo no sabía esto )

Ahora, aplico el siguiente código en mi web:

Código CSS:

@font-face {
font-family: "examplefont";
src: url("fonts/batch/batch.svg") format("svg");
src: url("fonts/batch/batch.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "examplefont";
display: inline-block;
margin-right: .2em;
text-align: center;
margin-left: .2em;
}
 

Aplicando el mismo ejemplo que da su web, y los distintos ficheros están alojados correctamente en dichas carpetas... y no consigo que me funcione nunca :( :( he usado Chrome, Safari, Firefox...y nada...

Alguna idea de por qué puede ser?

[pzin]

Aparte de eso, tendrías que mapear la clase que vayas a usar para el icono con su correspondiente caracter, que normalmente se hace usando content. Poner la letra de la fuente, vaya, que al final un icono desde una fuente no es más que una letra.

[madman_18]

Iniciado por pzin

Aparte de eso, tendrías que mapear la clase que vayas a usar para el icono con su correspondiente caracter, que normalmente se hace usando content. Poner la letra de la fuente, vaya, que al final un icono desde una fuente no es más que una letra.

He hecho varias pruebas usando el código que se muestra en su web como en el txt que se pone a modo de documentación en el pack que estoy usando pero no consigo hacerlo andar...siempre me saca caracteres extraños, como si no identificase lo que se le está poniendo en el css.

Os lo pongo completo para que lo veáis

Código CSS:

// Tipografia 
@font-face{
        font-family:Batch;
        src:url('fonts/batch/batch-icon-webfont.eot');
        src:url('fonts/batch/batch-icon-webfont.eot?#iefix') format('embedded-opentype'),
          url('fonts/batch/batch-icon-webfont.woff') format('woff'),
          url('fonts/batch/batch-icon-webfont.ttf') format('truetype'),
          url('fonts/batch/batch-icon-webfont.svg#batchregular') format('svg');
        font-weight:normal;
        font-style:normal;
      }
 
.batch {
        font-family:"Batch"; /*or whatever you've decalred your font name as*/
        font-size:16px;
        line-height:1;
        display:inline-block;
      }
.batch:before {
        content:attr(data-icon);
    }
 

Código HTML:

<div class="prueba">
<a href="#"><i class="batch" data-icon="&#xF000;"></i></a>
</div>
 

Qué es lo que me puede estar fallando¿?

[madman_18]

¿Alguna idea de qué puede ser? Porque he estado mirando y nada de nada :(

[2fd]

Buenas, soy desarrollador de Flaticon. En primer lugar, agradecer este tipo de comentarios para poder seguir desarrollando y mejorando el servicio.

Quería comentar que cuando realizas la descarga de una Iconfont, dentro del zip vienen varios archivos. En primer lugar vienen los archivos de fuentes en sus diferentes formatos (svg, ttf, woff y eot). Por otro lado viene un html en el que puedes ver los diferentes Glyphs (caracteres) de la fuente que has creado. Y en última instancia un archivo css en el cual, como comenta pzin viene el mapeado de la fuente con sus diferentes caracteres y la regla font-face para su correcto funcionamiento.

Este archivo css tendría que vincularlo al html donde quieras insertar los caracteres de la fuente mediante la etiqueta <link>, al igual que cualquier otra hoja de estilo.

En el archivo html de visualización de la fuente puedes ver las diferentes clases para poder mostrar las fuentes. Personalmente recomiendo que insertes los iconos en elementos "inline" tales como <span> o etiqueta <i>. Ejemplo, si el icono tiene la clase "flaticon-twitter" pues lo añadirías colocando:

Código:

<i class="flaticon-twitter"></i>

Muchas gracias por usar Flaticon!. Cualquier duda aqui nos tienes.

[pzin]

Repasa que todo esté bien vinculado como comenta 2fd. Si salen caracteres extraños normalmente es síntoma de que no está cargando la fuente y la fuente que se muestra es la que se haya heredado.

Bienvenido al foro 2fd.

[madman_18]

Iniciado por 2fd

Buenas, soy desarrollador de Flaticon. En primer lugar, agradecer este tipo de comentarios para poder seguir desarrollando y mejorando el servicio.

Quería comentar que cuando realizas la descarga de una Iconfont, dentro del zip vienen varios archivos. En primer lugar vienen los archivos de fuentes en sus diferentes formatos (svg, ttf, woff y eot). Por otro lado viene un html en el que puedes ver los diferentes Glyphs (caracteres) de la fuente que has creado. Y en última instancia un archivo css en el cual, como comenta pzin viene el mapeado de la fuente con sus diferentes caracteres y la regla font-face para su correcto funcionamiento.

Este archivo css tendría que vincularlo al html donde quieras insertar los caracteres de la fuente mediante la etiqueta <link>, al igual que cualquier otra hoja de estilo.

En el archivo html de visualización de la fuente puedes ver las diferentes clases para poder mostrar las fuentes. Personalmente recomiendo que insertes los iconos en elementos "inline" tales como <span> o etiqueta <i>. Ejemplo, si el icono tiene la clase "flaticon-twitter" pues lo añadirías colocando:

Código:

<i class="flaticon-twitter"></i>

Muchas gracias por usar Flaticon!. Cualquier duda aqui nos tienes.

Gracias por contestar 2fd! Volveré a echarle un vistazo y os comento a ver si estoy metiendo la pata con las rutas ^^

[madman_18]

PErdonad la tardanza en contestar.... ya funciona ^^ siguiendo vuestros pasos, no sé exactamente dónde metía la pata antes pero ya consigo que funcione :)

Gracias!!!!