• Resolved jneal95

    (@jneal95)


    Some of my icons/fa’s (Instagram icon in the top right, stars for product ratings” don’t always show properly on all of the pages. They may behave differently and show properly within in the same page as well. Thank you.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • First of all let me clarify that this is ‘as it should be’. Why? Because you mentioned vstarjeans.com but everything loads from vanillastarjeans.com . This is what we call CORS ( cross-origing source sharing ) and generally it is not ‘allowed’ except if you specifically specify it.

    Now I’m not sure why you are using 2 domains for the same website instead of a 301 redirect that usually is the way to go.. that’s out of the questions scope but, the problem here is that you are trying to view the page vstarjeans that tries to load fonts from vanillastarjeans and that is not accepted, if you actually load vanillastarjeans.com everything would show up as supposed to though as it is loading for the same origin ( url basically ).

    One way to overcome this for your font files would be to add this into your .htaccess file

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

    Make sure to keep backups though if you’re not sure of what you are doing.

    Thread Starter jneal95

    (@jneal95)

    Im a graphic designer and not so much a developer. Where in my files would I find that?

    Thread Starter jneal95

    (@jneal95)

    I really am not sure how any of this works. Someone who works with IT in the company for which I work changed the domain with the help of Bluehost support

    So in your case, the domain has changed for the site. In that case you’ll need to update your URL’s across the theme (and site) to match the current domain. So if the site used to be at vanillastarjeans.com and now is at vstarjeans.com, your theme and site URLs should be updated to reflect that change.

    Or you can use the technique noted by necafasu and pull in FontAwesome into your site via a third-party Content Distribution Network (CDN).

    Or you can do something like Xenos outlined above and configure your server to allow cross-origin requests (i.e. one domain is allowed to request resources from another domain). This approach does have security implications though so make sure to work with your IT and Security folks before implementing such an approach.

    My point of going the CORS .htaccess way ( that you have to talk with your IT as it seems ) is that you are still having 2 active domains, not 1 ( @bemdesign that’s what I thought at the start but unfortunately both are still active ).

    So even if you change all the urls from vanillastarjeans to vstarjeans you will be having the same issue but the other way around. So basically 4 ways of fixing this to include everything from easiest to hardest:

    1] Setup font-awesome from it’s CDN instead of loading it locally from your site.

    2] Discard one of the 2 domains ( by doing a 301 perm redirect to the one you want to use, for example vanillastarjeans redirects to vstarjeans – as for SEO purposes it should have been like that in my opinion ) – that’s up to the company and marketeers and everybody else, but it is a viable option.

    3] Get your IT to properly set up CORS if he understands what it is and the implications involved.

    4] Get your IT to set up a variable domain by getting the URL through PHP with example: $_SERVER['HTTP_HOST'] and make it as a var for loading your extra dependencies.

    Being a graphic designer and since there is an IT as you said in the company you work for, inform him to make all the changes needed. Points 2 – 4 are not for someone that doesn’t know his way around server files – settings & WordPress specific set ups. I’m trying to save you the trouble of breaking something, not trying to discourage you.

    If you still want to continue on your own.

    1] That is usually located in your themes files ( wp-content\themename\ ) functions.php or in header.php ( depends on the theme you are using though ).

    2] Is a server-side setup that depends on what admin panel you have Cpanel/Plesk.

    3] CORS change ( .htaccess ) is located on the same folder that your WordPress is installed.

    4] You have to know at least basic PHP to do this and it would still depend on how the dependency files are loaded.

    Since you’re in this position I have to strongly and repeatedly inform you of ‘backups, backups & backups’ before you try anything on your own ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Font Awesome Characters Only Show Sometimes’ is closed to new replies.