Depending on your Angular version there are different ways.
Posted
Updated
Europe’s developer-focused job platform
Let companies apply to you
Developer-focused, salary and tech stack upfront.
Just one profile, no job applications!
This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators, see fontawesome. It has two versions, pro(paid) and free. The pro version gives you more icons and human support and has slightly different installation procedure. This article is about different methods on how to install fontawesome version (free) in your Angular project.
💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.
The preferred way to add Font Awesome to Angular is via the officially supported Angular Component for Font Awesome 5+. This makes the installation easy and should be done in no time.
You have three options to add this NPM package:
ng add
yarn
npm
To illustrate I'll start with an empty Angular project. Hence, let's create an empty Angular project
ng new angular-fontawesome
ng add
to install Font AwesomeAngular CLI has a feature to easily add support for external libraries in your project ng add
.
This was introduced in Angular v7.
Simply install the fontawesome Angular component for Angular 15. This would be version 0.12.x.
Go to your project root and run.
ng add @fortawesome/[email protected]
After running this command, you will be prompted:
You have successfully installed Font Awesome.
npm i
to install Font AwesomeIf you use npm
in your project, and can't use the Angular CLI with ng add
. You can manually add the packages.
Choose directly the packages you want to install.
Go to your project root and install the main package:
npm install @fortawesome/[email protected]
Add the icon packages you want to install:
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
To install everything at once:
npm install @fortawesome/[email protected] @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
And that's it. You have successfully installed Font Awesome with npm
.
yarn add
to install Font AwesomeIf you use yarn
in your project, and can't use the Angular CLI with ng add
, add the packages manually.
Go to your project root and install the main package:
yarn add @fortawesome/[email protected]
Add the icon packages you want to install:
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons
To install everything at once:
yarn add @fortawesome/[email protected] @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
And that's it. You have successfully installed Font Awesome with yarn
.
If you are on a lower version than Angular 15, you have to check the compatibility table to see which version of @fortawesome/angular-fontawesome
you can use.
Installation with the official package is supported from Angular 9 ongoing.
@fortawesome/angular-fontawesome | Angular | Font Awesome | ng-add |
---|---|---|---|
0.1.x | 5.x | 5.x | not supported |
0.2.x | 6.x | 5.x | not supported |
0.3.x | 6.x && 7.x | 5.x | not supported |
0.4.x, 0.5.x | 8.x | 5.x | not supported |
0.6.x | 9.x | 5.x | supported |
0.7.x | 10.x | 5.x | supported |
0.8.x | 11.x | 5.x | supported |
0.9.x | 12.x | 5.x | supported |
0.10.x | 13.x | 5.x && 6.x | supported |
0.11.x | 14.x | 5 .x && 6.x | supported |
0.12.x | 15.x | 5.x && 6.x | supported |
Starting from Angular 9 you can use ng add
to install the package.
Otherwise, you have to use npm
or yarn
to add the packages.
If you don't want to use the official package, which I don't recommend,
you can install Font Awesome directly and update your styles in angular.json
.
There is a catch. There are two limitations with this approach.
The first is the version of Font Awesome - the maximum version is Font Awesome 4.7.
And, the second is the usage of font-awesome in Angular. You have to use css classes like <i class="fa fa-dashboard"></i>
to render icons.
Install the package. Go to project root and run:
npm i font-awesome
Add the styles font-awesome.css
from the fontawesome package to your angular.json
by updating the styles
import:
{
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
]
}
And that's it. You have successfully installed Font Awesome 4.7.
ng add
for interactive prompts in Angular CLI.angular.json
. There are downsides to this approach.
The maximum version of Font Awesome is 4.7, and you have to apply CSS classes in Angular to display icons.Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about Angular, have a look at these Angular Tutorials.
References (and Big thanks): Angular, fontawesome Angular Component for Font Awesome
Never miss an article.