Canvas Icons showing up as squares

[firespri24]

I've been using Canvas for several years at multiple organizations using PC and Mac and various web browsers such as IE, Firefox, and Chrome, currently using a Mac with Google Chrome. I've never seen this before ---

My Canvas pages all show the icons as squares, when previously it was working fine. I have no idea where to start to fix this issue. I've attached a screenshot below:

[v_nguyen]

Is it just affecting one course or all? Does it also show the squares in other web browsers? My first thought was emojis, but usually the emojis have the question mark in the middle.

[firespri24]

It's affecting every page. It seems like it only does this in Google Chrome on my current laptop. But previously I could see the icons in Chrome, with no issues. It only started recently.

[v_nguyen · Accepted solution]

Hmm, have you tried clearing your browser's cache yet? Usually that solves the problem

[firespri24]

This helped! Thank you! I also wonder if the reason that happened was also related somehow to the response below about the font itself being blocked somehow. Hopefully that keeps things resolved regardless.

[James]

@firespri24 

This can happen if the InstructureIcons web fonts are not loading. I went into Chrome's developer tools, went to Network, chose Font, and blocked those. Then I forced a reload on the page, and confirmed that was consistent with what you're seeing.

This could be a temporary issue where the name failed to resolve or there was a network problem. If you're lucky, that's all it is and it should correct itself quickly. You might try a control-R / cmd-R to force a reload of the page.

A similar issue could happen if you have added them to a block list (manually or an ad blocker).

You can check the status of the page by going to the developer tools (F12 or right-click and choose inspect). Then switch to Network and select Font. Then reload the page. When I block them, I see (blocked:devtools) in red for the status instead of 200. If they don't show up at all, it might be some other tool (adblocker of some kind) blocking them. If they show up with some other error, it can help you figure out what's going on.

My hope and guess, though, is that it's temporary in nature and doing the force-reload would fix it.

[firespri24]

I cleared my cache and that helped, but I also see what you're getting at with this solution too. I checked after clearing the cache, not before, and things seemed fine. But I am wondering what might have caused the font to not display - if there is something blocking it that I didn't find. Regardless, this is an interesting find that might be useful for if something like that happens again. Thank you for taking the time to reply!

[James]

@firespri24 

The blocked issue is how I verified what you were seeing. The likely cause was a network issue that caused it to either not load or to have a corrupt load. Either clearing the cache or forcing a reload would accomplish the same thing.