Metronic v.8.1.4
Changing the following selector in style.bundle.css...
(from)i {
line-height: 1;
font-size: 1rem;
color: var(--kt-text-muted);
}
(to)i[class] {
line-height: 1;
font-size: 1rem;
color: var(--kt-text-muted);
}
breaks compatibility in some cases.
Replies (6)
Hi,
Thanks for your feedback. Can you please let us know which pages are affected? We will revise this and consider reverting the change.
Regards.
Custom pages (but you can simply reproduce the issue yourself as well).
For example, I needed to change my own css (app.css, loaded AFTERstyle.bundle.css) this way:
.gender-male { color: var(--gender-male); }
.gender-female { color: var(--gender-female); }to:
.gender-male { color: var(--gender-male) !important; } /*FIXME v8.1.4*/
.gender-female { color: var(--gender-female) !important; } /*FIXME v8.1.4*/
.fa-2x { font-size: 2em !important; } /*FIXME v8.1.4*/HTML:
<span>John Doe<i class="fa fa-male fa-2x gender-male me-1"></i>Male 55y</span>Thank you!
Hi,
Noted, thanks for the info. We will fix it in the next update soon.
Regards.
Hi,
As a hot fix can you please try to replace the Icons style in src/sass/components/helpers/_text.scss:
i {
...
}With
// Icons
i {
&.bi,
&[class^="fonticon-"],
&[class*=" fonticon-"],
&[class^="fa-"],
&[class*=" fa-"],
&[class^="la-"],
&[class*=" la-"] {
line-height: 1;
font-size: 1rem;
color: var(--kt-text-muted);
}
}And recompile the assets folder with gulp or webpack builders.
Regards.
Actually it doesn't seem to work...
This actually reverts the default icon styling as it used to be in v8.1.1. Can you please double-check your code and see it the change was done properly and the CSS fully compiled? Do you have a test URL ?
PS: I changed your question status to "private" in case you provide your test URL.
React Dev Vacancy
