google-chrome - poner - porque no aparecen los iconos de font awesome
Los iconos de Font Awesome no se muestran en Chrome, un problema relacionado con la política de uso compartido de recursos Cross-Origin relacionado con MaxCDN (5)
El problema no es con el archivo CSS, tiene que ver con cómo se sirve el archivo de fuente.
El archivo
font-awesome.min.css
tiene líneas como
@font-face{font-family:''FontAwesome'';
src:url(''../fonts/fontawesome-webfont.eot?v=4.2.0'');
src:url(''../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0'')
format(''embedded-opentype''),url(''../fonts/fontawesome-webfont.woff?v=4.2.0'')
format(''woff''),url(''../fonts/fontawesome-webfont.ttf?v=4.2.0'')
format(''truetype''),url(''../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular'') format(''svg'');
font-weight:normal;
font-style:normal}
lo que hace que el navegador solicite un archivo de fuente apropiado (eot, woff, ttf o svg) del mismo servidor que el archivo CSS. Esto es lógico y correcto.
Sin embargo, cuando el navegador solicita ese archivo de fuente de
cdn.keywest.life
, lee los encabezados de un encabezado
Access-Control-Allow-Origin
y no encuentra uno, por lo que da ese mensaje de error.
(Esto me parece un error del navegador porque proviene del mismo servidor que el archivo CSS).
En cambio, cuando usa
maxcdn.bootstrapcdn.com
la respuesta incluye el encabezado
Access-Control-Allow-Origin:*
y el navegador acepta este archivo de fuente.
Si su servidor cdn incluye este encabezado, también funcionaría.
Si tiene un servidor Apache, vea esta respuesta: Font-awesome no se muestra correctamente en Firefox / ¿cómo vender a través de CDN?
Acabo de notar en varios sitios web que los iconos de fuentes increíbles no se muestran en Google Chrome. La consola muestra el siguiente error:
La fuente de origen '' http://cdn.keywest.life '' ha sido bloqueada por la política de intercambio de recursos de origen cruzado: No hay encabezado ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. Por lo tanto, el origen '' http://www.keywest.life '' no tiene acceso permitido.
Encontré exactamente el mismo problema en varios otros sitios. Esto se puede solucionar fácilmente reemplazando la propia referencia CDN con:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
-sin embargo, esta no es la solución, solo una solución. Me encantaría saber la razón y la solución correcta.
(la causa es esta: el sitio web está utilizando su propio CDN, proporcionado por MaxCDN y tiene la referencia a las fuentes tipográficas impresionantes y estas no son cargadas por Chrome, si está cargando el mismo recurso desde el recurso Bootstrapcdn mencionado anteriormente) trabajos)
Aquí hay un ejemplo del problema (en el menú y los íconos sociales en el pie de página: http://www.keywestnight.com/fantasy-fest )
¡Gracias por cualquier ayuda / explicación!
Este es el método de trabajo para permitir el acceso desde todos los dominios a las fuentes web :
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "/.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Este problema de acceder a los recursos de Font-Awesome ha sido un problema para muchas personas sin una explicación completa y resolución del problema.
¿Qué es CORS?
Cross-Origin Resource Sharing (CORS) es un mecanismo que utiliza encabezados HTTP adicionales para permitir que un agente de usuario obtenga permiso para acceder a recursos seleccionados desde un servidor en un origen (dominio) diferente del sitio actualmente en uso. Un agente de usuario realiza una solicitud HTTP de origen cruzado cuando solicita un recurso de un dominio, protocolo o puerto diferente del que se originó el documento actual.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
El problema:
El problema proviene de cómo se cargan las fuentes de fuente impresionante.
@font-face{
font-family:''FontAwesome'';
src:url(''../fonts/fontawesome-webfont.eot?v=4.2.0'');
src:url(''../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0'') format(''embedded-opentype''),url(''../fonts/fontawesome-webfont.woff?v=4.2.0'') format(''woff''),url(''../fonts/fontawesome-webfont.ttf?v=4.2.0'') format(''truetype''),url(''../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular'') format(''svg'');
font-weight:normal;
font-style:normal
}
Las fuentes se cargan a través de la hoja de estilo (CSS). La situación que tenemos aquí es:
La solución:
Si bien las reglas CORS se han creado en el almacenamiento de archivos, por ejemplo, S3, y el acceso al recurso se ha otorgado al dominio en cuestión, cuando CDN intenta cargar las fuentes especificadas en el CSS, el origen / dominio especificado al cargar estas fuentes es el de el CDN pero no se ha otorgado acceso CORS al dominio CDN.
Cree una regla CORS para el dominio CDN.
Ninguna de las respuestas funcionó para mí, tuve que crear una regla de borde en el back office maxcnd (que cambia el archivo de configuración en su zona)
Más información aquí.
https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/
Utilizo un CDN que no me permite modificar su respuesta, por lo que modifiqué
font-awesome.min.css
, reemplazando la ruta relativa con la ruta absoluta y funcionó.