Best way to use Bootstrap and FontAwesome using NPM in Angular app
In the article, I show you the best way to use Bootstrap and FontAwesome in your Angular app using NPM. FontAwesome is the biggest icon library to use in the website or applications, here FontAwesome provides over 1500 icons for free. This is free open source libraries for a variety of JavaScript front end frameworks such as Angular, Vue.js, React, etc. They are two methods to install Bootstrap & FontAwesome in your Angular project one is using CDN and another with Node Package Manager (NPM) the best way to use the FontAwesome is NPM, that provides the best performance for your website or application.
Install Angular CLI project.
Before installing the Bootstrap and FontAwesome first you required to install an Angular project. To install the Angular CLI project here you have an article.
Method 1 – Bootstrap and FontAwesome with CDN
Using Bootstrap and FontAwesome CDN you can use in your Angular project. Copy and paste the following command in your index.html page between head tag. Here we going to use FontAwesome 4.7.0.
|
1 2 3 4 |
<!-- Bootstrap CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- FontAwesome 4.7.0 CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Bootstrap CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- FontAwesome 4.7.0 CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <app-root></app-root> </body> </html> |
Method 2 – Bootstrap and FontAwesome with NPM (Recommended)
NPM is the best practice to install your Bootstrap and FontAwesome in your Angular project. The following commands will help you to install Bootstrap and FontAwesome.
Install both Bootstrap and FontAwesome in a single command.
|
1 |
npm install bootstrap font-awesome --save |
If you like to install only Bootstrap use the following command. To know more about installing Bootstrap for your Angular CLI project here you have an article.
|
1 |
npm install bootstrap –save |
Or you like to install only FontAwesome use the following command.
|
1 |
npm install font-awesome --save |
Once you install Bootstrap and FontAwesome now open angular.json file from your Angular project, in that you need to import the file path of bootstrap and fontawesome files inside the styles[] path, here below you can see the example.
|
1 2 3 4 5 |
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.css", "./node_modules/font-awesome/css/font-awesome.css", "src/styles.css" ], |
Now add the following code in your app.component.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="container"> <p> <button class="btn btn-success"> <i class="fa fa-save fa-lg" aria-hidden="true"></i> Save </button> </p> <p> <button class="btn btn-success"> <i class="fa fa-save fa-2x" aria-hidden="true"></i> Save </button> </p> <p> <button class="btn btn-success"> <i class="fa fa-save fa-3x" aria-hidden="true"></i> Save </button> </p> <p> <button class="btn btn-success"> <i class="fa fa-save fa-4x" aria-hidden="true"></i> Save </button> </p> <p> <button class="btn btn-success"> <i class="fa fa-save fa-5x" aria-hidden="true"></i> Save </button> </p> </div> |
Output:
Conclusion:
As you can see both are working fine, I hope this article will help you to install Bootstrap and FontAwesome. So kindly give your feedback in the comments which helps me to improve myself for the next articles. If you have any doubts please ask in the comment section and If you like this article, please share it with your friends. Thanks a lot.
