Wenn Sie den Font Awesome oder andere Icon-Fonts über ein CDN einbinden, kann es vorkommen, dass die Symbole wie im nebenstehenden Bild im Firefox oder Internet Explorer nicht angezeigt werden. Stattdessen erscheint ein Rechteck mit Hexadezimal-Ziffern. In Google Chrome oder Safari treten die Probleme dagegen nicht auf.
Das liegt daran, dass Firefox und Internet-Explorer keine Fonts zulassen, die nicht aus der eigenen Domain kommen. Das ist bei einem CDN natürlich stets der Fall.
Wenn Sie den Apache Webserver verwenden, schafft untenstehender Code Abhilfe, der das Einbinden von bestimmten Dateien von jeder Domain explizit erlaubt. Sie können den Code entweder in httpd.conf oder in der .htaccess Datei verwenden.
<FilesMatch ".(eot|ttf|otf|woff)">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Bei einem Nginx Server verwenden Sie stattdessen folgenden Code:
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Beides lässt die Einbindung von Dateien, die auf .eot, .otf, .ttf, oder .woff enden von jeder Domain zu. Eine weitere Alternative wäre das Einbinden der Fonts als base64.