css Question posted in
Some basic documentation can be found here.

entypo css social icons displaying empty box

I’m trying to display social media icons using entypo.css. For some reason it is working in my development space but when I pushed to production I am getting empty boxes where the icons should be. Example is in the footer here: https://econewsvt.org/

The code looks like:

<p id="socialMedia">
  <a class="icon-facebook-circled" href="http://www.facebook.com/econewsvt"></a>
  <a class="entypo-social c-twitter" href="https://twitter.com/ecoNEWS_VT"></a>
</p>

In the console I am seeing:

Access to font at ‘https://www.econewsvt.org/font/Lora-Regular.ttf’ from origin ‘https://econewsvt.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I tried updating my .htaccess with:

<FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "http://econewsvt.org"
</IfModule>
</FilesMatch>

But am still getting the same issue. I’m not sure how to resolve this?

Tags:

2

Answers


  1. 0

    Your console errors tell me that your font files are being blocked by CORS (Cross-Origin Resource Sharing) issues. To resolve this:

    1.Update your. htaccess file with the code:

    <IfModule mod_headers.c>
   <FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css)$">
     Header set Access-Control-Allow-Origin "*"
   </FilesMatch>
</IfModule>

    It will give access to other origins for the font files. If you want to limit access only your domain, then replace * with https://econewsvt.org

    2.Make sure that your server has mod_headers enabled, as it’s needed for setting the headers.

    This will take care of the problem and now your social media icons should appear correctly on the live version.

    Login or Signup to reply.
  2. 0

    Just remove this rule from the .htaccess file as it makes no sense since you are downloading fonts from the current domain.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search