HE Standard Icons in Tiles

🛎️ Get Help
1

Anyone know how I can bring in the standard HE Window icon into a variable string tile? This CSS works with a lightbulb_outline but I can't for the life of me get it to bring in the standard closed window icon.

#tile-10::before {
  font-family: 'Material Icons';
  content: "he-window_1";
  font-size: 40px;
  position: absolute;
  top: 15px;
  left: 2.5px;
}

Sample when using content: "he-window_1"

image

Sample when using content: "lightbulb_outline"

image

3

I tried using the Hubitat font, but it didn’t work

4

Yeah, me too..... I've also tried the codes from Markus' post on the NOOBs CSS topic with no luck.....

5

The font-family on a tile icon when it's chosen in the UI is hubitat, so just need to dig into the CSS file to find the window_1 icon and the CSS applied...

6 
#tile-2::before {
  font-family: 'hubitat' !important;
  content: "\ecad";
  font-size: 40px;
  position: absolute;
  top: 15px;
  left: 2.5px;
}

image

If you are interested how I worked it out....

I could see the he-window_1 was actually the name of the CSS class, not the text content (not sure how the other light bulb one works like that...). When I looked up the Chrome Dev Tools tab and located the element on a button tile where I set the custom icon, I could see the content and font family settings to use.

image
image1903×930 157 KB

7

Brilliant! Thanks Simon, can't believe I didn't think to look at the actual content and was focused on the fact that the icon name in the selector was different. This did the trick on bringing in the standard HE icon, but now I'm stuck on using the Open vs Closed based on the variable.string content. If all windows are closed, it should show the closed icon and if at least 1 window is open it should show the open icon. Any thoughts on how to make the before and after objects behave this way?

Cheers

Here's the CSS:

#tile-10 > div.flex.flex-col.w-full.text-center.h-full > div.flex-grow-0.w-full {
    position: absolute;   
    visibility: hidden;
    height: 100% !important;
    width: 100% !important;
    font-family: Trebuchet MS;
}

#tile-10 variable.string {
    visibility: hidden;
}

#tile-10 .flex.flex-col.w-full.text-center.h-full::before {
  font-family: 'hubitat';
  content: "\ecad";
  font-size: 36px;
  position: absolute;
  top: 10px !important;
  left: 5px;

}

#tile-10 .flex-col {
   position:relative;   
   left: 10px;
   font-family: Trebuchet MS;
   text-wrap: wrap;
   padding-left: 20px;
   padding-right: 20px;
}

#tile-10 .flex-grow {
   position:relative;   
   left: 10px;
   font-family: Trebuchet MS;
   text-wrap: wrap;
   padding-left: 25px;
   padding-right: 25px;
}

#tile-10 .flex.flex-col.w-full.text-center.h-full::after {
  font-family: 'hubitat';
  content: "\ecac";
  font-size: 36px;
  position: absolute;
  top: 10px;
  left: 5px;
}

Here's how it looks with windows closed:

image

Here's how it looks with windows open:

image