webfont ven usar salen porque muestran los iconos fontawesome font cuadros como cargan awesome aparecen firefox font-awesome

firefox - usar - no se ven los iconos html



FontAwesome no se muestra en Firefox (5)

Pregunta relacionada aquí

La respuesta de Boris a la pregunta anterior parece tener sentido, pero instalé los archivos Font Awesome en mi servidor y el problema persiste:

Miré en la biblioteca y encontré que los archivos de fuente están incluidos en la instalación, por lo que el argumento sobre el acceso entre servidores a las fuentes no parece válido. No me importa usar BootstrapCDN, pero la sugerencia de Boris parece aplicarse, y no sé cómo enviar los encabezados CORS correctos. (Lo probé, pero tampoco funciona.) ¿Alguna idea de cómo puedo solucionar esto, ya sea usando el "Bootstrap CDN" o el "CSS predeterminado"? (vea también estas instrucciones )

PD: IE10 muestra el glifo correctamente.


¿Has probado Bootstrap CDN?

Solo incluya <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> en su sección <head> . Los archivos de fuentes también se cargarán automáticamente desde CDN.

Comprueba esto en Firefox y funciona perfectamente.

@ Boris dice:

Firefox solo permite el enlace de fuentes entre dominios si el servidor en el que está la fuente envía los encabezados CORS correctos.

Así que está claro que es deber de CDN establecer los encabezados correctos, no los tuyos . Y parece que lo hacen correctamente, porque Firefox no se queja.

Si hospeda fuentes en su propio servidor, tenga en cuenta que la regla de dominios cruzados aún puede aplicarse, por ejemplo, los archivos de fuentes lugares en domain.com pueden no ser accesibles desde www.domain.com , si www.domain.com no envía el encabezados derecho

Lea esta respuesta para obtener consejos sobre cómo eludir las restricciones de dominios cruzados; esto podría ayudar en su caso.


Asegúrate de que tus caminos sean correctos. Use la clase fa y la clase de icono como:

fa fa-envelope

y funcionará genial ...

Saludos.


La solución para que el css fontawesome funcione localmente es incluir los archivos en la carpeta Fonts en el mismo directorio de archivos .html (páginas).

Ejemplo: estructura de archivos a partir de ahora donde fontawesome no funciona

prototype/pages/.html files prototype/styles/font-awesome/css/font-awesome.min.css prototype/styles/font-awesome/css/fonts/fontawesome-webfont.eot,fontawesome-webfont.woff

El problema aquí es que para una página cargada desde un archivo: // URI, solo los archivos en (o debajo) del mismo directorio del sistema de archivos se consideran de "mismo origen" y, por lo tanto, poner la fuente en un subárbol diferente (. ./font/) significa que será bloqueado por las restricciones de la política de seguridad. Como Firefox desactiva las fuentes de dominio cruzado "de forma predeterminada. En su lugar, cambie la estructura del archivo de la siguiente manera:

prototype/pages/.html files prototype/styles/font-awesome/css/font-awesome.min.css prototype/pages/fonts/fontawesome-webfont.eot,fontawesome-webfont.woff

coloca la carpeta de fuentes debajo del directorio de páginas que soluciona el problema. Espero que ayude.


Si usted es el propietario de su propio servidor, puede agregar un encabezado http para resolver ese problema. Problema basado en políticas de dominios cruzados.

foo.com/font-awesome.woff

boo.com/index.htm

en ese caso, debe agregar ese encabezado a foo.com

Access-Control-Allow-Origin = "http://boo.com"

o

Access-Control-Allow-Origin = "*"

eso hará que su archivo de fuente sea accesible desde otros sitios o sitios específicos.


Tengo el mismo problema, utilizamos las fuentes en la placa del enrutador usando micro httpd. Agregué Access-Control-Allow-Origin: * encabezado pero no funcionaba para mí.

Encontré en firebug que el archivo woff no está recogiendo nada en el texto de respuesta. lo mismo si uso la URL CDN, todo funciona bien. así que en el servidor micro-httpd local necesita un encabezado obligatorio para configurar. por favor dígame también los tipos de mime exactos para todas las fuentes necesarias.

  • .ttf "," application / x-font-ttf "
  • .eot "," application / vnd.ms-fontobject "
  • .woff "," application / font-woff "
  • .svg "," image / svg + xml "