Rolando Morales Jr

Icons are boxes in the browser?

The Heart icon when liking something, the icons in creating a topic, they turned into boxes.

Anyone knows a fix on this? Kinda weird, boxes everywhere. 

  • Large

    There are lots of possible reasons, but the most likely cause is a browser addon/extension blocking the site from which the icons are served. Try disabling your ad blocker, pop-up blocker, or any other kind of blocker you may have installed to see if that makes a difference.

    As for what to do about it if it is one of your blocker addons? You can dig through their lists of blocked sites to see if you can figure out which entry is causing the problem and remove it.

  • Large

    Hi,

    Most icons on the CG-COOKIE website originate from the FontAwesome-webfont.


    BACKGROUND RESEARCH

    The icon font (FontAwesome) is loaded via a CSS definition, which names the font-family and imports the font-data using SRC, as seen here:

    @font-face {
      font-family: 'FontAwesome';
      src: url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot");
      src: url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot?#iefix") format("embedded-opentype"),url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-2adefcbc041e7d18fcf2d417879dc5a09997aa64d675b7a3c4b6ce33da13f3fe.woff2") format("woff2"),url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-ba0c59deb5450f5cb41b3f93609ee2d0d995415877ddfa223e8a8a7533474f07.woff") format("woff"),url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-aa58f33f239a0fb02f5c7a6c45c043d7a9ac9a093335806694ecd6d4edc0d6a8.ttf") format("truetype"),url("//1976725556.rsc.cdn77.org/assets/fontawesome-webfont-ad6157926c1622ba4e1d03d478f1541368524bfc46f51e42fe0d945f7ef323e4.svg#fontawesomeregular") format("svg");
      font-weight: normal;
      font-style: normal
    }

    Icon elements then explicitly specify the FontAwesome-font, as part of the main ".fa" class definition:

    .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-style: normal; font-variant-ligatures:
        normal; font-variant-caps: normal; font-variant-numeric: normal; font-variant-east-asian: normal;
        font-weight: normal; font-stretch: normal; font-size: inherit; line-height: 1; font-family: FontAwesome;
        font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:
        grayscale; }
        

    The actual icon-code is then inserted using a "content" attribute, defined as part of an icon-name class, which will insert the Unicode index of the requested font icon. For example, this references the magnification-glass icon using it's index:

    .fa-search:before {
      content: "\f002";
    }


    CONCLUSIONS

    From the above, we will learn the following:

    01 - We can rule out any possibility of problems with Operating System Unicode Emojis, because FontAwesome does not rely on any system fonts (it doesn't even use any standard Unicode indexes, it just defines it's own icon indexes as needed.)

    02 - The font is loaded from "*.cdn77.org" -domain, so make sure your browser or any extensions, are not blocking it.

    03 - The icons should not be affected at all if JavaScript is enabled or not, because they rely entirely on CSS3.

    04 - Make sure you have updated your browser, so that it actually supports webfonts, as defined by @font-face rules, in CSS3.

    05 - Make sure you do not have any global client-side font-overrides active, because such override rules would also override the FontAwesome icon-class font-family rules -- immediately making the icons look like empty rectangles (which mean that the system is unable to find the requested symbol in the specified typeface).

    OUTRO

    Now, maybe I could help you even further, if I knew which browser, and which version of that browser, you are using.

    From the image that you posted, it looks like you might have a global font-override active. That would be my best guess at the moment, as to the reason why you're not seeing the icons.

    Please note, that a global font-override might also be activated by one of your browser extensions! So if you need more help, a list of your active browser extensions might also be helpful, and you could try starting your browser with extensions disabled to confirm that they are not the reason.

    Happy to help you more, if you provide more information and if you cannot solve the problem with this info.

    Cheers!

    Samuel Tekrenius (not affialiated with CG-COOKIE in any way, just another nerd)

  • Icons went back . Didn't do anything, but I guess fix is fix.
  • Large

    This is the type of thing we (around here) call a Microsoft Mystery. :)