• Resolved gyjafar

    (@ghulamjafar2)


    Hi
    fa buttons are not being appeared but just squares.
    I am using subdomain for static content.
    I have made changes in my config file as below:
    define(“WP_CONTENT_URL”, “https://cdn.zemtvs.com”);
    define(“COOKIE_DOMAIN”, “www.zemtvs.com”);
    You can see missing “fa-play” and “fa fa-angle-up” buttons on my homepage.
    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • bdbrown

    (@bdbrown)

    Hi ghulamjafar. Here’s the error message your site is generating:

    https://www.zemtvs.com/:1 Font from origin ‘https://cdn.zemtvs.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://www.zemtvs.com’ is therefore not allowed access.

    Here’s an explanation of the issue:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

    Couple of options:
    1. Serve the fontawesome file from your home domain instead of the CDN
    2. Enable CORS by copying header.php to a child theme and adding the modification discussed here:
    https://bowdenweb.com/wp/2011/05/how-to-enable-cors-in-wordpress.html

    Hope that helps.

    Thread Starter gyjafar

    (@ghulamjafar2)

    Thanks bdbrown
    I googled your suggested option 1, and red article at
    https://sevenspark.com/docs/shiftnav/faqs/icons-not-appearing-firefox
    Author said that
    “Serve the files from the same domain
    BUT
    This solution will work, but you won’t be able to take advantage of your CDN for these files”
    So
    I tried the second solution provided in article
    “Set the font headers to allow cross-origin resource sharing”
    I created new “.htaccess” file in
    public-html/wp-content/themes/hueman/fonts
    and then i pasted the code

    <FilesMatch ".(eot|ttf|otf|woff)">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>

    in that newly created .htaccess file.
    All set as you can see.
    Please give a look at https://www.zemtvs.com
    and suggest if anything went wrong.
    Thanks once again.

    bdbrown

    (@bdbrown)

    You’re welcome. Glad you got it fixed. If you don’t need any further assistance here please mark the topic as Resolved. Thanks.

    Thread Starter gyjafar

    (@ghulamjafar2)

    Problem was resolved but “jet pack” icon was missing on admin panel.
    When i tried browser consol, i found that “www.zemtvs.com” was not getting header permission by “cdn.zemtvs.com”.
    I studied at these two links:
    1.CSS Fonts missing – No Access-Control-Allow-Origin header
    2. WordPress – How to serve static content from a cookieless domain.
    Then i created a “.htaccess” file in “wp-content” ( wp-content is root folder for “cdn.zemtvs.com” ).
    I pasted this code in that newly created “.htaccess” file:

    <IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "https://www.zemtvs.com"
    </IfModule>
    <IfModule mod_headers.c>
    <FilesMatch "\.(svg|ttf|otf|eot|woff|woff2)$">
        Header set Access-Control-Allow-Origin "https://www.zemtvs.com"
    </FilesMatch>
    </IfModule>

    Error in browser consol vanished and i can see “jet pack” icon in admin panel. Now i do not need anymore “.htaccess” file in “public-html/wp-content/themes/hueman/fonts”. Now this new “.htaccess” will work for all themes and plugins for “Access-Control-Allow-Origin”.
    This solution is more better and comprehensive than my previous.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘fa buttons are not being appeared but just squares’ is closed to new replies.