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.

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)

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.

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  :(