Social icons are blocked by CORS policy in Chrome and Firefox

[rjzupkoii]

When serving locally, the social icons are blocked by the CORS policy in Chrome and Firefox, this results in the either blanks being rendered (Chrome) or an invalid Unicode symbol appearing. An example of the output message in the developer console looks like the following:

127.0.0.1/:1 Access to font at 'http://localhost:4000/assets/fonts/fa-solid-900.woff2' from origin 'http://127.0.0.1:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
fa-solid-900.woff2:1 

[rjzupkoii]

This only appears to happen when the template is being run locally when it's first loaded. After that it appears to work correctly.

[rjzupkoii]

The CORS policy blocking content is by design for security purposes, so we really don't want to do anything too disruptive to address the problem. However, it appears that the root of this issue is Jekyll defaulting to 127.0.0.1 when a hostname is not supplied, so the simplest fix is to just do that when running locally: jekyll serve -l -H localhost