simon
July 23, 2022, 12:51pm
1
I think the custom icon update turned on icons for some of my tiles. I had them turned off on a bunch of tiles where I couldn’t get the icon to play nice with the text and voila, they mysteriously came back? Not a huge deal - just posting to see if this is the cause or if I did something else to cause this?
Thanks.
simon
July 23, 2022, 12:54pm
2
While it is doing this I thought I would see if I could keep the icon and move it up in the tile to avoid the text. I can’t seem to move it in css so any pointers would be great. Thanks.
<svg data-v-18f1e223="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="temperature-half" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-temperature-half null"><path data-v-6bff6690="" fill="currentColor" d="M176 322.9l.0002-114.9c0-8.75-7.25-16-16-16s-15.1 7.25-15.1 16L144 322.9c-18.62 6.625-32 24.25-32 45.13c0 26.5 21.5 48 48 48s48-21.5 48-48C208 347.1 194.6 329.5 176 322.9zM272 278.5V112c0-61.87-50.12-112-111.1-112S48 50.13 48 112v166.5c-19.75 24.75-32 55.5-32 89.5c0 79.5 64.5 143.1 144 143.1S304 447.5 304 368C304 334 291.8 303.1 272 278.5zM160 448c-44.13 0-80-35.87-80-79.1c0-25.5 12.25-48.88 32-63.75v-192.3c0-26.5 21.5-48 48-48s48 21.5 48 48v192.3c19.75 14.75 32 38.25 32 63.75C240 412.1 204.1 448 160 448z" class=""></path></svg>
josh
July 23, 2022, 12:56pm
3
There are some HTML changes with the Custom Icons that could impact Custom CSS:
Impact to Custom CSS
Note that if you are using Custom CSS and are targeting the icon/svg elements in the following tile types, you may have to update your CSS. With the introduction of Custom Icons, we also standardized some of the html/classes so icons are more consistent across all tiles.
I’ve used shorthand CSS declarations to describe the changes along with a descriptive note, but if you need more details on anything, feel free to ask.
Hyperlink Tile, Rule Tile
Before: .main-content.icon > svg
After: .main-content > .icon > .svg
.icon
is now a separate sub-element of the .main-content
for consistency
Number Variable Tile, String Variable Tile, Hero Attribute, Temperature Sensor
Before: .data > svg.data-icon.icon
After: .data > div.data-icon.icon > svg
svg
is now a sub-element of .icon
for consistency
Color Control (with Circle Background)
Before: .icon > .icon-circle-holder > .icon-circle, .icon > svg
After: .icon-circle-holder > .icon-circle, .icon > svg
The .icon-circle-holder
is now a sibling of the .icon
so the inner content of .icon
remains consistent