Change Icon of Home Button

[SumathyAlwar_Arunachalam]

Hi , I'm trying to change the icon of Home Button WAB 2.3 . The 'Change Widget Icon' option is disabled for the Home Button and all the default widgets. How do I change the 'Home Button ' Icon in WAB. 

Any input is much appreciated. 

[RobertScheitlin__GISP]

Sumathy,

   Unfortunately this has to be done through a css rule as the JS API is what is in control over the home button not WAB. Add this css rule to the HomeButton\css\style.css file and add a new images folder under the css folder that contains your desired image (i.e. HomeButton\css\images\zoomExtent.png):

.HomeButton .home {
  background-image: url(./images/zoomExtent.png);
  background-position: center center;
  background-repeat: no-repeat;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SumathyAlwar_Arunachalam]

Hello Robert, 

Thanks for the Quick response and much appreciated. I tried as you  have suggested . 

i have created images folder in HomeButton\css and placed the png .Following is the entry I have added in HomeButton\css\style.css

.HomeButton .home {
background-image: url(./images/globe.png);
background-position: center center;
background-repeat: no-repeat;
}

Cleared the browser , and  tried again. But no luck. Still shows the same home icon.

Any more suggestions ?. 

[RobertScheitlin__GISP]

Sumathy,

  I have this working on my end so you must be missing something simple. Are you make these changes in the stemApp widgets folder or your actual apps widgets folder?

[SumathyAlwar_Arunachalam]

I have made the changes in the actual apps widgets folder 

[RobertScheitlin__GISP]

Sumathy,

Well I thought it might be that I tested in WAB 2.6 and 2.3 is different, but I just tested in 2.3 and it worked fine for me there too. I am not sure what to tell you.

[SumathyAlwar_Arunachalam]

Thanks Robert. Actually , the problem is only with the Launchpad theme. I'm able to see the changes reflected in other themes. The problem is I have developed the custom widgets within the same application and users approved everything else and this is the small change they seek for. I'm trying to see to add custom home button with my desired icon. 

[RobertScheitlin__GISP · Accepted solution]

Sumathy,

   That makes a lot of difference then. The Launchpad theme handles things very different than other themes.

In the apps themes\LaunchpadTheme\styles\default\css (assuming you are using the default style) folder open the  launchpad.css file make these changes:

}
.claro .HomeButton .home {
  background-image: url(./images/zoomExtent.png);
  background-position: center center;
  background-repeat: no-repeat;
}
/*.claro .HomeButton .home {
  background-image: none;
}
.claro .HomeButton .home:before {
  font-family: "launchpad-icons" !important;
  content: attr(data-icon);
  font-size: 16px;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "h";
}*/‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And now you need to add the png file to the images "themes\LaunchpadTheme\styles\default\css\images" folder.

[SumathyAlwar_Arunachalam]

Thank you Robert. That perfectly worked !!. Much appreciated your timely help.