Archer Enhanced User Experience Tool

[MadhuSai1]

Hi Team,

We are using "Archer_Enhanced_User_Experience_Tool" package to enhance the record layout look and feel and so far it was working fine. However, few users are facing issue where the icons are not loading and showing the names instead of icons. Impacted users cleared the browser cache completely and retried in both EDGE and CHROME browsers but issue still persist.

Any suggestions? @ThemistoclesC 

[ThemistoclesC]

The ReformatLayoutCustomObject should be loading the Material Icons font:

/* Imports Material Icons font for rendering new "more" and "delete" buttons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); /* Creates variable for setting background color in view mode */

If you have the user open Developer Tools (F12) on their browser and go into the Network tab, do you see icon?family=Material+icons get loaded with a 200 OK Status Code?

[MadhuSai1]

Hi @ThemistoclesC ,

Does the following URL require Internet access? Our end users do not have internet access, so any alternate option to resolve this issue?

/* Imports Material Icons font for rendering new "more" and "delete" buttons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); /* Creates variable for setting background color in view mode */

[MadhuSai1]

Hi @ThemistoclesC ,

Do you have any Workaround for our issue?

[ThemistoclesC · Accepted solution]

Here's the workaround:
On the Archer web server, unzip the attached file and copy material-icons.woff2 file to the apps\common\fonts folder in the default application folder of your Archer website.

In the ReformatLayoutCustomObject in Archer Accessories Objects, replace:

/* Imports Material Icons font for rendering new "more" and "delete" buttons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 

with this:

    /* References Material Icons font for rendering new "more" and "delete" buttons */

	@font-face {
	  font-family: 'Material Icons';
	  font-style: normal;
	  font-weight: 400;
	  src: url(../apps/common/fonts/material-icons.woff2) format('woff2');
	}

	.material-icons {
	  font-family: 'Material Icons';
	  font-weight: normal;
	  font-style: normal;
	  font-size: 24px;
	  line-height: 1;
	  letter-spacing: normal;
	  text-transform: none;
	  display: inline-block;
	  white-space: nowrap;
	  word-wrap: normal;
	  direction: ltr;
	  -webkit-font-smoothing: antialiased;
	}

Use the Archer Accessories dashboard to redeploy the custom object to all layout you previously deployed it to.