I have a wordpress based website released. I have used a theme, that allows icons to be used. These icons are not small images, but shortcodes that I use on the page.

Open

http://<my ip address>

You will notice nice icons for bullets and slider arrows. But if you open the same website using the domain name

http://<my domain name>

You will notice that the icons are not visible. Instead just rectangular boxes. What am I missing here ?

Edit :

I have modified my .htaccess and restarted apache, and still get this error on my web debugger (Chrome F12)

Font from origin 'http://' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://>' is therefore not allowed access.

My .htaccess

# BEGIN W3TC Browser Cache
<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
    </IfModule>
</IfModule>
# END W3TC Browser Cache

What Finally Worked

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

One more missing piece of the puzzle

.htaccess file was not being read only. I figured out that I did not have a httpd.conf in /etc/apache2 folder. Realized that apache2 has changed the location of its conf file to /etc/apache2/sites-enabled/000-default.conf.

I added 4 lines just under

DocumentRoot /var/www/html

<Directory "/var/www/html">
    Options FollowSymLinks
    AllowOverride All
</Directory>

Note my .htaccess is under /var/www/html

And my .htaccess file is

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "http://www.example.com"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

Dont forget to replace example.com in the above .htaccess. And yes one more thing, chwon www-data:www-data .htaccess is important too.

up vote 1 down vote accepted

Did you see that on mcruiseon.com your console drops this error? I guess this is related to your icon issue

Font from origin 'http://' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://' is therefore not allowed access.

  • where do I see this error.. AND A BIG THANKS – Siddharth Nov 28 '15 at 12:46
  • I see this link. stackoverflow.com/questions/25577981/… – Siddharth Nov 28 '15 at 12:49
  • I am trying to figure out where in the .htaccess to add this line Header add Access-Control-Allow-Origin "*" – Siddharth Nov 28 '15 at 12:50
  • you should see it on any webdeveloper tool. In Google Chrome -> F12 – MrKainig Nov 28 '15 at 12:50
  • can you please improve your answer.. I would like to keep SO clean. As of now the answer is in my question. Feel free to add it to your answer. I'll clean up the question after that. – Siddharth Dec 24 '16 at 18:35

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.