Cdnjs: Font Awesome no funciona en Firefox (posible solución encontrada)

Creado en 10 ene. 2013  ·  26Comentarios  ·  Fuente: cdnjs/cdnjs

Hola, cuando uso Font Awesome, descubrí que en Firefox los caracteres no se representan como deberían, mientras que funcionan bien en Chrome y Safari.

Después de buscar un poco, esto parece un problema común, he encontrado esta sugerencia:

http://blog.netdna.com/opensource/font-awesome-firefox-bug-fix/

¿Podría agregar las rutas absolutas en lugar de las rutas relativas al archivo css?

Muchas gracias

Comentario más útil

Hice algunas pruebas y encontré una solución.

La consola de desarrollo de FF muestra esto al cargar la fuente awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

El servidor debe proporcionar los encabezados adecuados para permitir el acceso (lo obtuve de: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Esto debería solucionar el problema. Si aún no es así, las URL de los archivos de fuentes en el CSS también deben cambiarse a relativas.

Todos 26 comentarios

Intenté esto y probé desde el archivo sin formato de mi sucursal, pero de alguna manera no funciona. Y todas mis fuentes ahora muestran cuadrados. ¿Has probado esto?

https://github.com/bfintal/cdnjs/blob/font-awesome-ff-patch/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Tal vez agregar esto al servidor cdnjs también lo haría funcionar: http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

Hola jami,
Gracias por la info. Lo investigaremos :)

El jueves, 10 de enero de 2013 a las 22:22, Jami Intal [email protected] escribió:

Tal vez agregar esto al servidor cdnjs también lo haría funcionar:
http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/


Responda a este correo electrónico directamente o véalo en Gi tHubhttps://github.com/cdnjs/cdnjs/issues/755#issuecomment -12092131.

Hice algunas pruebas y encontré una solución.

La consola de desarrollo de FF muestra esto al cargar la fuente awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

El servidor debe proporcionar los encabezados adecuados para permitir el acceso (lo obtuve de: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Esto debería solucionar el problema. Si aún no es así, las URL de los archivos de fuentes en el CSS también deben cambiarse a relativas.

@bfintal Esa información es fantástica compañero, muchas gracias.

@bfintal Gracias a los increíbles muchachos de CloudFlare, todo debería estar listo :)

Intente actualizar su caché y probar. Déjame saber como va.

¡Bien, ahora funciona! (muy probablemente para IE también). ¡Gracias Ryan y ClourFlare! :)

Gracias chicos. Funciona de maravilla.

Ingresar a la ruta absoluta resolvió este problema para mí. ¡Gracias!

Bueno, este es un ejemplo oficial de htacess proporcionado por maxcdn, tiene una solución para fuentes increíbles y también para problemas de velocidad. http://support.netdna.com/tutorials/htaccess-examples/ o consulte esta guía http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

Pero no sé si funcionará al usar cloudflare.

¡Gracias a @terinjokes ahora tenemos soporte CORS!

Gracias por la buena explicación sobre la fuente impresionante - solución de problemas de mozilla.
Encontré este útil artículo también...
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/
Echar un vistazo...

En la carpeta de fuentes, cargue los siguientes archivos

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Archivos de glyphicons importantes ----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Cargue los siguientes archivos y luego vincule su font-awesome.min.css en su archivo de encabezado.

Aquí está el siguiente enlace con los archivos adecuados:
http://goo.gl/WICQAf

Hola a todos.
He encontrado que la fuente impresionante no funciona en FF.
me podrian ayudar como debo hacer?

@ blueror815 si no hay información detallada, ¿cómo podemos ayudarlo?

Gracias a todos los que contribuyeron!!! Esto me lo arregló agregando al archivo .hta.


Conjunto de encabezado Access-Control-Allow-Origin "*"

:+1: agradable

@ Subhojit1992 Gracias, funciona. He descargado el css y las fuentes del enlace dado. Funciona bien ahora :+1:

CDNJS ha servido archivos de fuentes Font Awesome con Access-Control-Allow-Origin "*" desde hace un tiempo. Puedo investigar casos específicos si se dan más detalles.

Tengo el mismo error con Firefox (funciona bien en todos los demás navegadores). Los íconos de FontAwesome se muestran como cuadros rectangulares con un código de carácter Unicode dentro.

El error ya no está relacionado con CDNJS y ahora es un problema en Firefox. Los archivos FontAwesome (css y woff) se cargan desde CDN sin problemas con 200 OK.

El problema se debe a que Firefox no muestra Unicode correctamente cuando se inserta un carácter Unicode inusual como  directamente en el marcado. Funciona cuando usa un pseudo elemento y contenido, por ejemplo:

yourelement::before {
    content: '\f067';
    font-family: FontAwesome;
}

@J3QQ4 ¡ Gracias por tu informe!

@ Subhojit1992 Muchas gracias ... con su solución solucioné este problema ...

¿Alguien puede decirme qué hacer porque mis fuentes personalizadas no funcionan en FF ni siquiera en mi html local y muestran el mismo error "fuente descargable: error de descarga (familia de fuentes: estilo "gotham_lightregular": peso normal: estiramiento normal: normal índice src: 1): URI incorrecto o acceso entre sitios no permitido fuente: "Ni siquiera puedo aplicar el código .htaccess aquí.

@thakurpunk , lo siento por la respuesta tardía, ¿podría darnos la (s) URL (s) que tiene el problema (algunos ejemplos)?

Trabajado como un encanto !
Problema Resuelto Muchas gracias :)
Agregar esto al archivo .htaccess lo resolvió>

Conjunto de encabezado Access-Control-Allow-Origin "*"

¡Hola amigos!
copie el formulario HTML en esta página a su index.html :
https://www.bootstrapcdn.com/fontawesome/
buena suerte :)

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

PeterDaveHello picture PeterDaveHello  ·  6Comentarios

LuanComputacao picture LuanComputacao  ·  5Comentarios

sufuf3 picture sufuf3  ·  3Comentarios

netil picture netil  ·  5Comentarios

ulyan picture ulyan  ·  6Comentarios