Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Keenicons not working on my angular Project


for the Bootstrap Icons is working fine , but for keeicons not working in html nothing apear just i put this into html for example :

<i class="ki-outline ki-graph-up text-primary"></i>


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 (4)


Hi Haykel, I have the same problem and just stumbled on your post.

In the keenicons style.css, the classes call the keenicons like this


.ki-message-question .path1:before {
content: "\ed27";
opacity: 0.3;
}

so you need to do something like this to invoke the icon

<i class="ki-outline ki-graph-up text-primary"><span class="path1"></span></i>

this doesn't make any sense to me either



Hi Haykel,

Could you please try using the latest version of Metronic Angular (v8.1.9) instead of v8.1.8? The issue with Keenicons not working should be resolved in the latest version. We have tested adding the `< i class="ki-outline ki-graph-up text-primary">< /i>` icon in an Angular project, and it is displaying as expected.

Please update your project to the latest version and let us know if the issue persists. If you encounter any further difficulties, please provide more details or error messages, and we'll be happy to assist you.

Thanks



Hi,

May I know, are you working on Metronic Angular or your own existing Angular project with Metronic?

Thanks



on Metronic Angular Project v 8.1.8


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