font awesome icons are not showing angular 6

Question

I have used ngx-tree-select for multi-level-selection.

https://stackblitz.com/edit/ngx-tree-select

Inside dropdown font awesome icons are not showing. When inspect, . font awesome version which I had is "@fortawesome/fontawesome-free": "^5.2.0", and I also installed latest version "@fortawesome/fontawesome-free": "^5.12.0", but still icons are not showing inside dropdown.

plus,minus,check icons nothing showing. Can someone help me to get out of this issue.

I tried with this import in html and tried still I could not see icon — Kavya Shree, Oct 22 '20 at 08:16
are the fa icons working outside of the dropdown & are there any errors in console - specifically the n/w call to load the fa css file — Balaji Krishnan, Oct 22 '20 at 08:37
No errors in console. but after import in index.html also icons are not showing inside dropdown as well outside box. can view but can't show — Kavya Shree, Oct 22 '20 at 08:43
https://ngx-tree-select-njvqck.stackblitz.io - try this. have downloaded the css file locally and referred it in angular.json — Balaji Krishnan, Oct 22 '20 at 08:50
I tried but compilation is getting failed. created one file name as "font-awesome.min.css" and imported in angular.json "./src/font-awesome-5.min.css" — Kavya Shree, Oct 22 '20 at 09:44
Not sure what I am missing.probably its a small mistake but struggling for longtime — Kavya Shree, Oct 22 '20 at 09:49

score 1 · Answer 1 · answered Oct 23 '20 at 07:24

Thanks for helping me. I found the fix for this,

I have imported " " in index.html and few css addition in styles.css

tree-select-item .item.item a span .fa {
    font-family: FontAwesome;
}
tree-select-item .item.item a .fa {
    font-family: FontAwesome;
}

As my application, have default .fa { font-family:"Font awesome 5 free"} this not allowed to show older icons.

score 0 · Answer 2 · answered Oct 22 '20 at 08:19

According to the official documentation here

Add in your head section in index.html

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

font awesome icons are not showing angular 6

2 Answers2