Windows 10 - IE 11 - Confluence does not render navigation bar icons

On Windows 10, using IE 11 specifically, icons are missing from the navigation bar (see attached screenshot). All other browsers and Operating Systems will not exhibit this behavior.

Environment

• OS - Windows 10
• Browser - IE11
• Database - MS SQL
• Confluence - 6.0.x, 5.10.x (Since this issue is related to Windows Policy, it will occur on any version that has untrusted fonts)

Steps to reproduce

1. Install Confluence on a Windows 10 machine
2. IE 11 is installed on Windows 10, you can search for IE to open the browser
3. Log into Confluence
4. Along the navigation bar, you will notice the icons are missing

Expected Results

Icons appear in the navigation bar

Actual Results

Icons are missing (please see screenshot)

Failed Resolution Steps

• Adding Font CSS - Styling Fonts in Confluence

• To fix your apps by installing the problematic fonts (recommended)

  On each computer that has the app installed, right-click the font name, and then click Install.

  The font should automatically install into your %windir%/Fonts directory. If it does not, you have to manually copy the font files into the Fonts directory and run the installation from there.

Cause

Windows 10 has a default security feature that blocks certain fonts: https://support.microsoft.com/en-us/kb/3053676

Workaround 1

Disable this feature:

Using Group Policy

1. Open Local Group Policy Editor.
2. Under Local Computer Policy, expand Computer Configuration, expand Administrative Templates, expand System, and then click Mitigation Options.
3. In the Untrusted Font Blocking setting, you can see the following options:
   • Block untrusted fonts and log events
   • Do not block untrusted fonts
   • Log events without blocking untrusted fonts

Using Registry Editor

1. Open Registry Editor (regedit.exe) and go to the following registry subkey:
   HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Kernel\
2. If the MitigationOptions key is not there, right-click and add a new QWORD (64-bit) Value, naming it as MitigationOptions.
3. Update the Value data of the MitigationOptions key, and make sure that you keep your existing value, like the important note below:
   • To turn this feature on. Type 1000000000000.
   • To turn this feature off. Type 2000000000000.
   • To audit with this feature. Type 3000000000000.
     Important Your existing MitigationOptions values should be saved during your update. For example, if the current value is 1000, your updated value should be 1000000001000.
4. Restart your computer.

Workaround 2

Install the svg icons plugin:

1. This workaround affects all users of your site and adds about 58KB of compressed CSS. For comparison, we already load 150KB of CSS and 700KB of JS on a View Page. These will be cached by the browser most of the time.
2. Download the plugin here: confluence-svg-icons-0.1.1.jar
3. Install the plugin on your instance.
4. The plugin replaces the icons loaded by the font with icons from the custom css provided by the plugin. The icons are base64 encoded svg background-images instead of the atlassian-icons font.
5. Clearing the browser cache might be required to see the effect.
6. Note that this plugin will not make the CSS3114 error disappear as the font will continue to be blocked by the security policy.
7. As this plugin will affect all the users of the site, even users using Confluence on other browsers will get this change.
8. This plugin is provided as-is and is not supported by Atlassian.

In Confluence 6.11 and 6.12 the plugin will hide some icons. Not suitable for these versions.

Workaround 3

Install the font and custom CSS:

1. This workaround could work for individual users who are using Confluence with IE11 on Windows 10.
2. This workaround is designed specifically for Windows 10 with Internet Explorer 11, and stems from this Microsoft article about the security policy. https://technet.microsoft.com/itpro/windows/keep-secure/block-untrusted-fonts-in-enterprise
3. For this Workaround to work the font files will need to be installed on every computer affected by the Security Policy that is using IE11.
4. Download the .ttf file that corresponds to your Confluence version
   • • Confluence Latest: https://aui-cdn.atlassian.com/aui-adg/6.0.6/css/fonts/atlassian-icons.ttf
     • Confluence 6.0: https://aui-cdn.atlassian.com/aui-adg/5.10.1/css/fonts/atlassian-icons.ttf
     • Confluence 5.10: https://aui-cdn.atlassian.com/aui-adg/5.9.24/css/fonts/atlassian-icons.ttf
     • Confluence 5.9: https://aui-cdn.atlassian.com/aui-adg/5.7.34/css/fonts/atlassian-icons.ttf
     • Confluence 5.8: https://aui-cdn.atlassian.com/aui-adg/5.7.26/css/fonts/atlassian-icons.ttf
     • Confluence 5.7: https://aui-cdn.atlassian.com/aui-adg/5.7.20/css/fonts/atlassian-icons.ttf
     • Confluence 5.6 and 5.5: atlassian-icons-confluence-5.6.ttf
5. Install the font locally on Windows (Right-click > Install, or move it to the C:\Windows\Fonts directory). If you have a way to push fonts across your organisation, that could be used here.
6. Add the following CSS to the Global Stylesheet:

   .aui-icon::before { font-family: Atlassian-icons !important; }

1. A computer restart might be required.
2. Check the pages for the fonts. Note that Admin pages will not have the font because they don't load the custom stylesheet, so the icons still won't display on the admin pages.
3. If that still doesn't work, please try with .aui-icon:before < Notice single colon, instead of double colon.