CODEWITHSUNDEEP
angularfont-awesome
mark_h
mark_h

Reputation: 5467

Not all free font awesome fonts loading in angular 2+ project

I am using several free Font Awsome icons throughout my project. The majority load just fine for example

<i class="fa fa-search"></i>

shows a magnifying glass icon however

<i class="fa fa-sync"></i>

does not show anything. Both are listed as "Free" on the Font Awsome site

In my angular.sjon file I have the following reference to Font Awesome;

        "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/scss/font-awesome.scss"
        ],

In my package-lock.json file;

"font-awesome": {
  "version": "4.7.0",
  "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
  "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
},

and in my package.json file;

"font-awesome": "^4.7.0",

Why can I not see the icon I am expecting?

I'm relatively new to both Angular and Font Awesome, I would be greatful(i.e. would +1) for guidance if my approach is generally wrong.

Upvotes: 2

Views: 407

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

fontawesome site now show the version 5 and above and you have install old version.

you need to install this package 

npm  install @fortawesome/fontawesome-free

and to import the style file like this

style.scss

@import "@fortawesome/fontawesome-free/css/all.css";

Upvotes: 2

Related Questions