2

Estoy intentando implementar unos íconos para el menú de la página web, el código css es:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?idm0oi');
  src:  url('fonts/icomoon.eot?idm0oi#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?idm0oi') format('truetype'),
    url('fonts/icomoon.woff?idm0oi') format('woff'),
    url('fonts/icomoon.svg?idm0oi#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

¿Cómo puedo traducir los src para que spring los reconozca? Ya que no reconoce la forma en la que lo estoy llamando y no muestra ningún ícono, sólo los cuadros de cuando no se reconoce el ícono

1
  • Los cuadradillos podrían aparecer porque no se estén cargando las fuentes correctamente. ¿Cuál es la estructura de tu proyecto? (en particular el fichero donde está este css y los ficheros de las fuentes) ¿y si abres la consola de errores ves algún error?
    – Alvaro Montoro
    Commented el 25 abr. 2018 a las 3:16

1 respuesta 1

0

Si estás usando IcoMoon para ver los íconos deberías usar los caracteres unicode. Por ejemplo:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?idm0oi');
  src:  url('fonts/icomoon.eot?idm0oi#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?idm0oi') format('truetype'),
    url('fonts/icomoon.woff?idm0oi') format('woff'),
    url('fonts/icomoon.svg?idm0oi#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icomoon {
  font-family: icomoon;
}

.icon-user:before {
  content: "\e971"; /* es la manera de escribir en unicode en css */
}

Y en el html:

<h3>
  <span class="icomoon icon-user"></span>
  Usuario
</h3>

Y si lo querés usar en un html, de la siguiente manera:

<!-- &#xe971; es el unicode para la versión en html-->
<h3>&#xe971; Usuario</h3>

Nota: el unicode que utilicé fue un ejemplo, vos lo vas a tener que ver una vez que generás la fuente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.