topic Re: Change Icon of Home Button in Web AppBuilder Custom Widgets Questions

Change Icon of Home Button

SumathyAlwar_Arunachalam — Fri, 01 Dec 2017 20:34:12 GMT

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.

Re: Change Icon of Home Button

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:16:03 GMT

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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change Icon of Home Button

SumathyAlwar_Arunachalam — Mon, 04 Dec 2017 16:37:38 GMT

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 ?.

Re: Change Icon of Home Button

RobertScheitlin__GISP — Mon, 04 Dec 2017 16:47:20 GMT

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?

Re: Change Icon of Home Button

SumathyAlwar_Arunachalam — Mon, 04 Dec 2017 16:55:34 GMT

I have made the changes in the actual apps widgets folder

Re: Change Icon of Home Button

RobertScheitlin__GISP — Mon, 04 Dec 2017 17:07:01 GMT

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.

Re: Change Icon of Home Button

SumathyAlwar_Arunachalam — Mon, 04 Dec 2017 17:51:10 GMT

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.

Re: Change Icon of Home Button

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:16:06 GMT

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.

Re: Change Icon of Home Button

SumathyAlwar_Arunachalam — Mon, 04 Dec 2017 18:53:37 GMT

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