Picture of Chris Gillison
Missing navigation icons (fonts)
by Chris Gillison - Friday, 15 February 2019, 3:30 AM

Hi all,

I've received feedback on a course I'm developing in the framework that for some users icons were missing (blockslider arrows, narrative arrows, hotgraphic popup close buttons, Reveal '+' icons.

The screenshots they sent clearly show that not only was this the case, but that no custom fontsĀ (I'm using WOFFs) were being loaded at all.

Is this a setting that I can do something about, or is it something set in the user's browser/system settings that they will need to change? Is there anything I can do about it (bearing in mind the end users aren't very tech savvy)?!

I attach 2 screenshots to illustrate the problem. Image 1 shows what they're seeing on a screen that has an imageSlider within a blockSlider (arrows missing in orange squares, system fonts only). Image 2 is what they should be seeing.

Any help would be very gratefully received. Many thanks.

Picture of Chris Gillison
Re: Missing navigation icons (fonts)
by Chris Gillison - Friday, 15 February 2019, 4:22 AM

Ah, OK. I've replicated the problem with IE11 Security settings set to 'High'.

Is the only way around this to have a background-image (of the appropriate nav icons) on each of the divs that contain an icon?

Picture of Matt Leathes
Re: Missing navigation icons (fonts)
by Matt Leathes - Friday, 15 February 2019, 10:13 AM

Yeah, it'll likely be caused this setting being set to 'disable':

Either that or their firewall is set to block web fonts.

From what I understand it's a pretty big job to change all the icons in the theme from font to image or .svg - it's typically easier to persuade the client to update their IE settings (usually fairly straightforward in a corporate environment) - or use a different browser.

I did hear from the folks who are working on it that Adapt v5 will contain some improvements to make it easier to switch from using fonts for icons to .svg.