Light
Dark
System
Ask  Question

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.
P
Paolo Perliti 8 months ago
Metronic
6 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

S
Sean Author8 months ago
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.
P
Paolo Perliti 8 months ago
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!
S
Sean Author8 months ago
Hi,

Noted, thanks for the info. We will fix it in the next update soon.

Regards.
S
Sean Author8 months ago
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.
P
Paolo Perliti 8 months ago
Actually it doesn't seem to work...
S
Sean Author8 months ago
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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle