Solucionar problemas con CDN y Fuentes (íconos)

Si estás usando íconos como fuentes, por ejemplo  Font Awesome, y un CDN, probablemente los dos no trabajarán bien a causa de la limitación de peticiones Cross Domain.

Solución

Tendrás que añadir unos encabezados para permitir la origen cross domain
Si usas tu propio CDN, copia esto en tu fichero  .htaccess

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# 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>

Si usas  Nginx, añade este código en el fichero de tu host virtual:

location ~* \.(eot|css|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Para  MaxCDN puedes seguir estas instrucciones.

Webfonts dentro de hojas de estilo

Si, a pesar de las instrucciones de arriba, todavía no has conseguido que los íconos reaparezcan, es posible que las fuentes sean llamadas desde una hoja de estilo como esta:

En este caso, aunque hayas seguido la solución de arriba, los encabezados no se aplican a la fuente y por esto el ícono no aparece.
Puedes encontrar la hoja de estilo que contiene la referencia a la fuente utilizando la herramienta para desarrolladores de tu navegador: haz click derecho en el ícono que no se visualiza correctamente y la herramienta te dirá cuál es la hoja de estilo interesada.

La solución es añadir el URL de la hoja de estilo en el campo Archivos rechazados en la sección CDN :

Si has habilitado también la minificación CSS, tendrás que excluir la misma hoja de estilo de la minificación: