Risolvere i problemi con il CDN e i fonts (icone)

Se stai usando un icon font come  Font Awesome e un CDN, è probabile che tu stia avendo dei problemi a causa della limitazione alla richiesta font cross-domain.

Soluzione 

Dovrai aggiungere degli header specifici per permettere l'origine cross-domain.

Se stai usando un tuo proprio CDN, copia questo codice nel file .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>

Se stai usando Nginx, incolla questo codice nel file del tuo virtual host: 

location ~* \.(eot|css|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Se invece stai usando MaxCDNsegui questo link.

Webfonts incluse in fogli di stile

Se hai già seguito le istruzioni di cui sopra ma stai ancora avendo problemi con le icone che non appaiono, potrebbe essere perché il webfont è chiamato dentro un foglio di stile, in questo modo:

In questo caso, anche se hai seguito la soluzione data sopra, gli headers necessari non vengono applicati all font, per cui non compaiono correttamente.
Puoi scoprire quale foglio di stile contiene la referenza al font usando lo strumento per sviluppatori web del tuo browser: fai click destro sull'icona che non funziona e vedrai il riferimento al foglio di stile interessato.

La soluzione è aggiungere l'URL del foglio di stile nel box Files esclusi nel tab CDN:
Se hai attivato la minificazione  CSS, dovrai anche escludere il foglio di stile dalla minificazione.