Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Font-awesome, Line-awesome or Bootstrap-icons in Metronic for Angular


Hello!

I would like to know how to use font-awesome, line-awesome and bootstrap-icons icons in Metronic for Angular. Because even the demo provided by Keenthemes for Metronic for Angular doesn't correctly display the icons.

As seen here: https://preview.keenthemes.com/metronic8/angular/demo2/crafted/pages/wizards/horizontal

After the title "Choose Account Type" should appear the icon "fas fa-exclamation-circle" but nothing is rendered.

Thanks!


user
Thiago Pires 3 years ago
Angular
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Carmelo D 3 years ago

Hi,

Sorry for the late response.
Glad to see that you solved your issue.
On Monday/Tuesday we have an update, where issues with breadcrumbs should be fixed.

Regards,
Keenthemes support


user
Thiago Pires 3 years ago

I noticed that in the global style file, "styles.scss" is missing the inclusion of the file that imports the icon fonts and some other vendors.

just added

@import "./assets/sass/style.angular.scss";

and worked!

By the way, the breadcrumb for Demo2 is broken.. I solved the problem with some workarounds.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(