CSS Background transparency without affecting child element using LESS

I found many solutions on the internet and tried but nothing can’t solve my problem. I’m using FontAwesome and LESS on my website but when I added font-icon, it affected by the opacity (rgba) of parent element. Here is my code:


Hope anyone can help me out. Thank in advance.

Not at all familiar w/less. But read that an hack for such a situation is to have two entirely diff components (divs, what have you) and position them with relative and absolute positioning. Rather than parent child.
I thinks this was where i read it.

The background colour is on top of the icon.

Try this:

#section-video .icon-wrap .icon-container:before {z-index:-1}

sheesh…bout time you showed up Paul!

Thank you. I’m using Fontawesome in demo, actually I created custom font-icon with Icomoon and used <span> tag instead <i> tag. If I add z-index before, the background will disappear too. How can I fix this?

The code I gave you is working with font-awesome in your original codepen. If you have changed the html and methods then create a new codepen as I have no idea what new code or methods you may be using.

The answer I gave is working and if you are using a similar system the answer will be the same and you just need to manipulate the z-index of the items so that the icon is not under the transparent background.

Thank Paul so much. I’ve tried and it worked like a charm. Thank you.