Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hover effects. Here is the code snippet that works:
<a id="hrefSite" href="{{route('about') }}"><i style="all: unset; font-size: 150px;" class="conf conf-ui"></i></a>
However, when I add color: #868e96; inline within the style, it disrupts the hover functionality. The classes conf conf-ui must remain as they are responsible for loading icons like Google and Facebook. I attempted to create a new class for this purpose:
.newStyle{
all: unset; !important;
font-size: 150px;
color: #868e96;
}
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
Unfortunately, this approach does not yield the desired result as the size becomes incorrect.
UPDATE: The HTML structure looks like this:
<div class="col-md-12 col-lg-4">
<div class="cr">
<div class="cr-block cntr"
<div class="icon">
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
</div>
</div>
</div>
</div>