CSS host:before Icon disappears on Toggle status

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

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.

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

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

1 Like

Thank you Jean! That fixed it.
Cheers!