FontAwesome Icons in Angular 6?
Solution 1
all you have to do is:
1 - add this to your index.html:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
2 - use your icon as:
<i class="fas fa-check"></i>
You don't have to add anything in your component.ts
nor in your app.module.ts
nor install anything with yarn or npm.
EDIT: To answer you question, here is a stackblitz with the faCheck used as mentioned in the tutorial, it's working for me: https://stackblitz.com/edit/angular-4ebr9t
check if you installed all the dependencies as said in the tutorial.
Solution 2
1- Install this npm install @fortawesome/fontawesome-free
2- Add this to angular.json
(angular-cli.json
)
"styles": [
"...",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]
3- Now you can use fonts with <i>
tag
Solution 3
I am using Fontawesome in this angular6 project, please take a look on the package.json, maybe it helps to solve your problem: https://github.com/hamilton-lima/portfolio-web/blob/master/package.json
This is what I have installed
"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-brands-svg-icons": "^5.1.0",
"@fortawesome/free-regular-svg-icons": "^5.1.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",
"angular-font-awesome": "^3.1.2",
Make sure to import the necessary icons to the library you are using
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fas, far, fab);
See the example here: https://github.com/hamilton-lima/portfolio-web/blob/master/src/app/shared/shared.module.ts
mororo
Updated on July 05, 2022Comments
-
mororo almost 2 years
I'm trying to use icons from FontAwesome in an Angular project.
I started with the "Getting Started" guide you can find here: FontAwesome Angular Getting StartedEverything works fine, i can see the faCoffee icon wherever i put it in my templates. But if I try to change it to another icon (ex. the "check" icon), nothing is shown.
I changed my icon declaration at component-level to make it look like this:
import { faCheck } from '@fortawesome/free-solid-svg-icons';
Changed the html template to show my new icon:
<fa-icon [icon]="faCheck"></fa-icon>
Then the icon field assignment in my component:
faCheck = faCheck;
Please note that i'm changing essentially only the name of the icon from the examples that i tested and are working at the Url i posted above. Even if I go to the definition of "faCheck" on my declaration, i see that it's defined so I expect it to be available.
Chrome console shows this error when page is loading:
FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.
First attempt to use FontAwesome in my projects, useful general informations are welcome.
UPDATE: Got it working rebuilding my entire application. I was using VS Code, so when you save a file he tries to recreate the final bundle to let you navigate and check your development. I don't know what really happens with components in-memory state. I think the icon was not showing because of some misalignment of references.
-
mororo over 5 yearsOk, it's pretty clear to me how to use them as you stated. But my question is specific about the Angular environment and the official tutorial you can find here: fontawesome.com/how-to-use/on-the-web/using-with/angular
-
mast3rd3mon over 5 yearsyou can also download the file and use a server copy
-
mororo over 5 yearsDon't want to because it's not necessary
-
Observablerxjs over 5 yearsthis way works just fine in the angular environment, I used font awesome like this in my Angular Project and it's working as a charm
-
mororo over 5 yearsI know your way works, i used it several times in the past. But i saw this new approach based on angular components and wanted to try it
-
mororo over 5 yearsGot it working the way i linked here (using new NG component)...changing the icon to a casual "faBug" works. Maybe it's a problem with the specific icon i'm trying to use in my question
-
hamilton.lima over 5 yearsUpdated with a details that can be the root cause
-
hamilton.lima over 5 yearsI dont understand as well :)
-
Aaron Jordan over 5 yearsRemember, importing the entire subset of icons runs the risk of bloating your application. Please only import the specific icons you will be using. github.com/FortAwesome/…
-
hamilton.lima over 5 yearswouldn't tree shaking be able to remove unused icons?
-
amir azizkhani about 5 yearsin dependency of stackblitz example, you used 'fortawesome/angular-fontawesome'