How do I add more icons to my project using FontAwesome?

Question

I'm using font-awesome in angular 10 and I've got it to work but I'd like to use some icons that I can find on https://fontawesome.com/icons but it seems like a lot of them don't work in my project. I checked font-awesome.css and it doesn't have the same icons as on website. Is there a way to add icon I need from the site to my project?

Answer 1

Check your Font Awesome version. You should search for icons only in this specific version. If you want to use some icons of another version, remove it and add the new one.

There's also a chance you are trying to use some Pro version icons. If you want to use them, you should pay for a Font Awesome Pro subscription.

If this doesn't help, please provide us with the code of the fontawesome installation along with some html of the icons you are trying to use.

Answer 2

尝试从官方网站将真棒字体下载到您的本地计算机，这对我有用。

Answer 3

I have found what was the problem, I didn't have all of the icons because I was using outdated package:

npm install font-awesome 

The newest one(i think) is the one below and it contains icons from fontawesome 5+:

npm install --save @fortawesome/fontawesome-free

after installation i had to add in angular cli styles:

"./node_modules/@fortawesome/fontawesome-free/css/fontawesome.css",
"./node_modules/@fortawesome/fontawesome-free/css/solid.css",