'Font awesome' icons are not showing even though package is installed on angular

Question

I need to add some social media icons I'm not sure other than font awesome if there is anything else I can use for free, I installed the package and added

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

here is my Style.css :

@font-face {
font-family: "FutoSans";
src: local("FutoSans"), url(assets/fonts/FutoSans-Bold.ttf) format("truetype");
}

here is my angular.json

 "styles": [
          {
            "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
  
          },
          "src/styles.css",
       "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
         
        ],

but when I use for example the following tag, it does not show anything

<i class="fab fa-instagram"></i>

Does this answer your question? [Fontawesome icons not showing in angular project](https://stackoverflow.com/questions/65009383/fontawesome-icons-not-showing-in-angular-project) — Dhana D., Aug 15 '21 at 14:55

score 0 · Answer 1 · answered Aug 15 '21 at 15:02

please read the documentation given by the fontawesome angular package. You can get the icons with:

TS

import { faCoffee } from '@fortawesome/free-solid-svg-icons'; <---

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee; <----
}

HTML

<fa-icon [icon]="faCoffee"></fa-icon>

If you want to use only the CSS classes in your HTML download the free fontawesome version (npm i @fortawesome/fontawesome-free) and include the CSS and .js in your angular.json like this:

        "styles": [
          "src/styles.scss",
          "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
        ],
        "scripts": [
          "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
        ]

then you can use the "fab fa-icon" classes

Install npm i @fortawesome/fontawesome-free (not the angular fontawesome package) and add the css and js into your angular json. I've tested it yesterday it works without any problems. — MeDead, Aug 16 '21 at 11:12

score 0 · Answer 2 · answered Aug 15 '21 at 15:03

0

Try this I have this in my project.

npm install font-awesome --save

Add font-awesome link in angular.json :

"../node_modules/font-awesome/css/font-awesome.css"

Use in HTML <i class="fa fa-cog fa-spin"></i>

answered Aug 15 '21 at 15:03

Dinuda Yaggahavita

347
2
10

where in the angularkson you add it?which part? – moris62 Aug 15 '21 at 15:07
"styles": [ "../node_modules/font-awesome/css/font-awesome.css" ]. Note: this in the project section of angular.json not the test section. – Dinuda Yaggahavita Aug 15 '21 at 15:10
i updated my question you add it under the input?i added right above the "src/styles.css" and did not work – moris62 Aug 15 '21 at 15:14
Add this below "src/styles.css": `"node_modules/font-awesome/css/font-awesome.css"` This should work – Dinuda Yaggahavita Aug 15 '21 at 15:31

'Font awesome' icons are not showing even though package is installed on angular

2 Answers2