You can get vector icons and social logos on your website with Font Awesome. Font awesome has the most popular icon set and toolkit. In this article, you will learn how to install font-awesome in angular. There are two methods by which you can install font-awesome in angular.
I have used the Bootstrap CSS framework in this project for a better design. If you don’t know how to use bootstrap in angular, refer to the following tutorial:
How to install bootstrap in angular
But for using font awesome it is not necessary to use bootstrap.
Method 1: Using CDN Link
Step1:
By using this method you have to paste the following CDN link into the head tag of index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">Example: Refer following example in which I’ve pasted the CDN link in the head tag of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FontAwesomeAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
<app-root></app-root>
</body>
</html>Step2:
Open the app.component.html file from your project and put the following code in it.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="https://devconquer.com">DevConquer</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/category/javascript/">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/category/angular/">Angular</a>
</li>
</ul>
</nav>
<div class="jumbotron">
<h1 class="text-center">fontawesome in angular</h1>
<div class="flex-center">
<i class="fas fa-thumbs-up"></i>
<a class="nav-link" href="https://www.facebook.com/DevConquer">Facebook</a>
</div>
<div class="flex-center">
<span class="fas fa-thumbtack"></span>
<a class="nav-link" href="https://in.pinterest.com/DevConquer/">Pinterest</a>
</div>
<div class="flex-center">
<i class="fas fa-hashtag"></i>
<a class="nav-link" href="https://twitter.com/DevConquer">Twitter</a>
</div>
</div>Open the app.component.css file and paste the following CSS
.flex-center {
display: flex;
align-items: center;
}Step 3:
Run your project and you will see output like the following:
Method 2: By installing npm package
Step 1:
Install fontawesome npm package by the following command:
npm install @fortawesome/angular-fontawesomeInstall necessary supporting packages:
npm install @fortawesome/fontawesome-svg-corenpm install @fortawesome/free-solid-svg-iconsStep 2:
Import FontAwesomeModule in the app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 3:
Open the app.component.ts file from your project and put the following code in it.
import { Component } from '@angular/core';
import { faThumbsUp, faThumbtack, faHashtag } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'font-awesome-angular';
faThumbsUp = faThumbsUp;
faThumbtack = faThumbtack;
faHashtag = faHashtag;
}Open the app.component.html file and paste the following code into it.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="https://devconquer.com">DevConquer</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/category/javascript/">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://devconquer.com/category/angular/">Angular</a>
</li>
</ul>
</nav>
<div class="jumbotron">
<h1 class="text-center">fontawesome in angular</h1>
<div class="flex-center">
<fa-icon [icon]="faThumbsUp"></fa-icon>
<a class="nav-link" href="https://www.facebook.com/DevConquer">Facebook</a>
</div>
<div class="flex-center">
<fa-icon [icon]="faThumbtack"></fa-icon>
<a class="nav-link" href="https://in.pinterest.com/DevConquer/">Pinterest</a>
</div>
<div class="flex-center">
<fa-icon [icon]="faHashtag"></fa-icon>
<a class="nav-link" href="https://twitter.com/DevConquer">Twitter</a>
</div>
</div>Open the app.component.css file and paste the following CSS in it.
.flex-center {
display: flex;
align-items: center;
}Step4:
Run your project and you will see output like the following:
Conclusion:
In this tutorial, you learned how to use font awesome in angular. I have explained two methods by which you can use font awesome. You can choose any method you like. If you have any problems ask me through a comment.
Bookmarked!, I like it!