CSS host:before Icon disappears on Toggle status

Community Usage questions
1

Hi,

I've got this code below as a toggle button. Simply want to change CSS properties on on/off status. However, I use a fontawesome icon using :host:before {} to create the icon. My problem is that when the toggle status become "on" the icon disappears. Thoughts?

:host {
background-color:  green;
text-transform: none;
border: none;
border-radius: 5rem;
Font-size: 100%; 
}
:host label {
align-items: flex-end;
padding-bottom: 3%;
color: white;
}
:host.on label {
Font-Size: 100%;
background-color: maroon;
}
:host:before {
filter: invert(1);
Position: absolute;
top: 50%;
left: 50%;
Transform: translate(-50%, -50%);
font-family: 'FontAwesome';
color: black;  
z-index: -1;
Font-Size: 50rem;
content: "\f4d9";
}

Cheers,
DMDComposer

2

The only issue I had with your code was maroon not being a valid css color. Using the html property to insert content would be safer that relying on existing pseudo elements that may be already used by the widget.

3

Thanks Jean for the reply. I see your point using HTML to insert instead of pseudo elements. However, I'm still getting the same issue on the toggle. The toggle is still hiding the "icon" that is made from the HTML when the toggle is turned on. Thoughts?

HTML
<i class="fas fa-camera"></i>

CSS

i {
color: white;
Font-Size: 500%;
Position: absolute;
top: 50%;
left: 50%;
Transform: translate(-50%, -50%); 
}
:host {
background-color:  green;
}
:host.on label {
background-color: red;
}
:host label {
align-items: flex-end;
padding-bottom: 3%;
color: white;
}

Cheers,
Dillon

4

It's a layering issue, set the i element's z-index to 1 and you'll be alright.

1 Like
5

Thank you Jean! That fixed it.
Cheers!