Iconos impresionantes Fuente no se muestran en Chrome, un problema de política de Intercambio de recursos de Origen cruzado relacionado con MaxCDN

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}

Que hacen que el navegador solicite un archivo de fuente apropiado (eot, woff, ttf o svg) desde el mismo servidor que el archivo CSS. Esto es lógico y correcto.

Sin embargo, cuando el navegador solicita ese archivo de fuente desde 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 viene del mismo servidor que el archivo CSS).

En su lugar, cuando se utiliza 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, entonces 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?

Ninguna de las respuestas funcionó para mí, tuve que crear una regla de borde en maxcnd back office (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 /

Uso una CDN que no me permite modificar su respuesta, así que modifiqué font-awesome.min.css, reemplazando la ruta relativa por la ruta absoluta y funcionó.

Este problema de acceder a los activos font-awesome ha sido un problema para muchas personas sin una explicación completa y una 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 al sitio actualmente en uso. Un agente de usuario realiza una solicitud HTTP de origen cruzado cuando solicita una recurso de un dominio, protocolo o puerto diferente al del que se originó el documento actual.

Https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

El Problema:

El problema se deriva de cómo se cargan las fuentes font-awesome.

@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 estilos (CSS). La situación que tenemos aquí es:

La Solución:

Mientras que las reglas CORS han sido creado en su almacenamiento de archivos, por ejemplo, S3, y el acceso al recurso se ha dado 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 la CDN, pero no se ha dado acceso CORS al dominio CDN.

Cree una regla CORS para el dominio CDN.