Problema al insertar como webfont Flaticon

[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¿?