0

Tengo unos iconos de icoomon y no funcionan solo en chrome he cambiado la posicion de la etiqueta html para insertarlos y nada, le permiti a la web usar fuentes propias en la configuracion de mozila y nada, mi web esta en local.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>example </title>
    <meta charset="UTF-8">
    <meta name="description" content="Un excelente lugar para los amantes de la buena comida">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../letras.css">
    <link rel="stylesheet" href="../iconos/style.css">
    <link rel="stylesheet" href="../css/layout.css" type="text/css">
  </head>
  <body>
    <header>
      <h1 class="header__marca"><span class="marca__inicio">hola</span><span class="marca__medio">a</span><span class="marca__final">todos</span></h1>
      <address class="telefono"><span class="icon-Contactanos"></span>
        <p>Llamanos al xxxxxxxx</p>
      </address>
      <nav>
        <ul class="nav__ul">
          <li class="nav__li icon-Conocenos"><a class="nav__a" href="Conocenos.html">Conocenos</a></li>
          <li class="nav__li icon-Multimedia"><a class="nav__a" href="Multimedia.html">Multimedia</a></li>
          <li class="nav__li icon-Contactanos"><a class="nav__a" href="Contactanos.html">Contactanos</a></li>
          <li class="nav__li icon-Preguntas"><a class="nav__a" href="Preguntas.html">Preguntas</a></li>
        </ul>
      </nav>
    </header>
    <main class="contenido" role="main">
      <article>
        <section class="articulo__contenido articulo__contenido--img" itemscope itemtype="http://schema.org/Product">
          <div class="articulo__contenido__titulo articulo__contenido--img__titulo"><span class="icon-diamante iconos"></span></div><img srcset="../img/Exclusividad500.jpg 300w,../img/Exclusividad500.jpg 600w,../img/Exclusividad1000.jpg 1000w,../img/Exclusividad1500.jpg 1500w">
          <p class="articulo__contenido__descripcion articulo__contenido--img__descripcion">Exclusividad.</p>
        </section>
        <section class="articulo__contenido articulo__contenido--img" itemscope itemtype="http://schema.org/Product">
          <div class="articulo__contenido__titulo articulo__contenido--img__titulo"><span class="icon-comida iconos"></span></div><img srcset="../img/Exclusividad.jpg 300w,../img/Comida.jpg 600w,../img/Atencion.jpg 1000w,../img/Postres.jpg 1500w">
          <p class="articulo__contenido__descripcion articulo__contenido--img__descripcion">Deliciosas Comidas.</p>
        </section>
        <section class="articulo__contenido articulo__contenido--img" itemscope itemtype="http://schema.org/Product">
          <div class="articulo__contenido__titulo articulo__contenido--img__titulo"><span class="icon-atencion iconos"></span></div><img srcset="../img/Exclusividad.jpg 300w,../img/Comida.jpg 600w,../img/Atencion.jpg 1000w,../img/Postres.jpg 1500w">
          <p class="articulo__contenido__descripcion articulo__contenido--img__descripcion">Atencion de primera.</p>
        </section>
        <section class="articulo__contenido articulo__contenido--img" itemscope itemtype="http://schema.org/Product">
          <div class="articulo__contenido__titulo articulo__contenido--img__titulo"><span class="icon-helado iconos"></span></div><img srcset="../img/Exclusividad.jpg 300w,../img/Comida.jpg 600w,../img/Atencion.jpg 1000w,../img/Postres.jpg 1500w">
          <p class="articulo__contenido__descripcion articulo__contenido--img__descripcion">Postres de otro nivel.</p>
        </section>
      </article>
      <article>
        <section class="articulo__contenido" itemscope itemtype="http://schema.org/Product">
          <div class="articulo__contenido__titulo"><span class="icon-ubicacion iconos"></span>
            <p>Ubicacion</p>
          </div>
        </section>
      </article>
    </main>
    <aside>
    </aside>
    <footer class="footer">
      <p class="footer__titulo">hola q hace</p>
      <div class="divInfocontacto">   
        <address class="telefono"><span class="icon-Contactanos"></span>
          <p>gggggggggggggggggggggggggggggggg</p>
        </address>
        <address class="correo"><span class="icon-correo"></span>
          <p>ggggggggggggggggg</p>
        </address>
        <address class="ubicacion"><span class="icon-ubicacion">DIRECCIÓN</span>
          <p>dddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
        </address>
      </div>
    </footer>
    <script src="../../ecma6/conocenos.js"></script>
  </body>
</html>

este es el codigo ademas intente usar el modo seguro de firefox y no funciono de igual manera no cargaban los iconos

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Preguntas:before {
  content: "\e901";
}
.icon-Conocenos:before {
  content: "\e900";
}
.icon-Multimedia:before {
  content: "\e90e";
}
.icon-Contactanos:before {
  content: "\e942";
}
.icon-ubicacion:before {
  content: "\e948";
}
.icon-relog:before {
  content: "\e94e";
}
.icon-atencion:before {
  content: "\e976";
}
.icon-comida:before {
  content: "\e9a3";
}
.icon-circuloArriba:before {
  content: "\ea41";
}
.icon-circuloAbajo:before {
  content: "\ea43";
}
.icon-diamante:before {
  content: "\e904";
}
.icon-celular:before {
  content: "\e902";
}
.icon-diamond:before {
  content: "\e903";
}
.icon-helado:before {
  content: "\e905";
}

este es el estyle

7
  • Podrás compartir el css style.css? Creo que es un problema de rutas al llamar a la fuente en Firefox.
    – Kleith
    el 17 may. 2018 a las 18:43
  • no sabes lo mucho que te aprecio por intenar ayudarme el 17 may. 2018 a las 18:45
  • En la consola te muestra algún error?
    – Kleith
    el 17 may. 2018 a las 18:56
  • no solo unos relacionados a letras.css y al javascript, porque saque los archivos de la carpeta, pero borrando las etiquetas que referencean a estos archivos persiste el problema el 17 may. 2018 a las 18:59
  • Probá lo siguiente, en vez de poner esos estilos en una sub carpeta, ponelo en el mismo lugar que tenés el archivo html y contame si te funcionó. Porque puede ser que sea un problema de CORS de Firefox.
    – Kleith
    el 17 may. 2018 a las 19:04

1 respuesta 1

0

En esta pregunta dí una respuesta similar a lo que te sucede a vos. Es un problema de CORS de Firefox. Podrías solucionarlo simplemente moviendo el archivo y la carpeta .css y fonts/ respectivamente.

En vez de esto:

<link rel="stylesheet" href="../iconos/style.css">

Probá cambiandolo a:

<link rel="stylesheet" href="iconos/style.css">

Y mover el archivo style.css y la carpeta de las fuentes fonts/.

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.