Font Awesome icons showing as squares on Idx pages

Font awesome did not work on Idx pages without enable “Origin and Access-Control-Allow-Origin HTTP headers”.Basically, when a browser with this protection on finds an external font embedded, it sends the base url of the website out in the Origin header and waits for a response. Unless that response allows this origin, the font is denied.

So you need to Allow Cross Domain Fonts
If you’re using an embedded font on your site and want this to work on your IDX pages as well, it will require an extra step to get it working in some browsers. Firefox will not allow fonts to be embedded cross-domain unless you add this to the top-level .htaccess file of the domain or subdomain where your fonts are being served:

1
2
3
4
5
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

If you are using Microsoft’s IIS you need to add some code in the web.config system.webServer block.

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

This sets the Access-Control-Allow-Origin CORS configuration to allow pulling from all domains.

Leave a Reply