Problems with icons

Hello,


I have several Problems with Icons.

http://www.mindbubbles.de/startseite/das-team/

On that page, the "email to" Icon is invisible (Or White on White). Also the Back to Top Icon is not visible (Or Grey in Grey). I tried several css I found on this page, but none of them worked. On the right hand side you can see a section "last Posts" with strange (Chinese?) Icons. You can find These strange Icons also on this page (Look at the Icon in front of "mehr..." (read more) :

http://www.mindbubbles.de/startseite/projektblog/

This is the behaviour in the Internet Explorer. If I take Google Chrome, I see only a rectangle instead of the Icon, so I think, the Icon is missing.

If I open the Webpage on my mobile device (Android 6) the Icon in the Header (for the menu)  is only a crossed out rectangle. On IOS it looks fine.

Where or how can I change the Color of the Icons and the Icons themself?

How can I check, that the Icons are instalöed correctly on my Server?


 

Comments

  • Hi,

    it’s because of CORS library which hasn’t been installed on your server what you can see on http://pasteboard.co/2LSf7gnm.png

    More details about the CORS you can read on http://enable-cors.org/server.html but we recommend to contact with your server administrator this case because he will be able to help you for sure.

    Thanks!
  • Thanks a lot! Now it works! (I am my own Server Administrator, so I had to add

    <httpProtocol>


    <customHeaders>


    <add name="Access-Control-Allow-Origin" value="*" />


    </customHeaders>


    </httpProtocol>

    In my web.config on my own (I'm using IIS7)

  • We are glad to hear that it helped!
  • You can add this to your .htaccess file:

    # BEGIN WordPress
    # ----------------------------------------------------------------------
    # CORS-enabled images (@crossorigin)
    # ----------------------------------------------------------------------
    # Send CORS headers if browsers request them; enabled by default for images.
    # developer.mozilla.org/en/CORS_Enabled_Image
    # blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
    # hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
    # wiki.mozilla.org/Security/Reviews/crossoriginAttribute
    <IfModule mod_setenvif.c>
      <IfModule mod_headers.c>
        # mod_headers, y u no match by Content-Type?!
        <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
          SetEnvIf Origin ":" IS_CORS
          Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
      </IfModule>
    </IfModule>
    # ----------------------------------------------------------------------
    # Webfont access
    # ----------------------------------------------------------------------
    # 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|woff2|font.css|css|js)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>
    # END WordPress

    This will solve your problem.
Sign In or Register to comment.