ANGULAR
Complete Angular Tutorial For Beginners Introduction to Angular | What is Angular? Architecture Overview & Concepts of Angular How to Install Angular How to Create a new project in Angular Bootstrapping in Angular: How It Works Internally Angular Components Overview & Examples Data Binding in Angular Interpolation in Angular Property Binding in Angular Event Binding in Angular ngModel & Two way Data binding in Angular NgModelChange & Change Event in Angular Child/Nested Components in Angular angular directives angular ngFor directive ngSwitch, ngSwitchcase, ngSwitchDefa ult Angular Example How to use ngIf, else, then in Angular By example NgClass Example Conditionally apply class Angular ngStyle Directive Angular Trackby to improve ngFor Performance How to Create & Use Custom Directive In Angular Working with Angular Pipes How to Create Custom Pipe in Angular Formatting Dates with Angular Date Pipe Using Angular Async Pipe with ngIf & ngFor angular keyValue pipe Using Angular Pipes in Components or Services Angular Component Communication & Sharing Data Angular Pass data to child component Angular Pass data from Child to parent component Component Life Cycle Hooks in Angular Angular ngOnInit And ngOnDestroy Life Cycle hook Angular ngOnChanges life Cycle Hook Angular ngDoCheck Life Cycle Hook Angular Forms Tutorial: Fundamentals & Concep t s Angular Template-driven forms example How to set value in template-driven forms in Angular Angular Reactive Forms Example Using Angular FormBuilder to build Forms SetValue & PatchValue in Angular StatusChanges in Angular Forms ValueChanges in Angular Forms FormControl in Angular FormGroup in Angular Angular FormArray Example Nested FormArray Example Add Form Fields Dynamically SetValue & PatchValue in FormArray Angular Select Options Example in Angular Introduction to Angular Services Introduction to Angular Dependency Injection Angular Injector, @Injectable & @Inject Angular Providers: useClass, useValue, useFactory & useExisting Injection Token in Angular How Dependency Injection & Resolution Works in Angular Angular Singleton Service ProvidedIn root, any & platform in Angular @Self, @SkipSelf & @Optional Decorators Angular '@Host Decorator in Angular ViewProviders in Angular Angular Reactive Forms Validation Custom Validator in Angular Reactive Form Custom Validator with Parameters in Angular Inject Service Into Validator in Angular template_driven_form_validation_in_angular Custom Validator in Template Driven Forms in Angular Angular Async Validator Example Cross Field or Multi Field Validation Angular How to add Validators Dynamically using SetValidators in Angular Angular HttpClient Tutorial & Example Angular HTTP GET Example using httpclient Angular HTTP POST Example URL Parameters, Query Parameters, httpparams in Angular HttpClient Angular HTTPHeaders Example Understanding HTTP Interceptors in Angular Angular Routing Tutorial with Example Location Strategy in Angular Angular Route Params Angular : Child Routes / Nested Route Query Parameters in Angular Angular Pass Data to Route: Dynamic/Static RouterLink, Navigate & NavigateByUrl to Navigate Routes RouterLinkActive in Angular Angular Router Events ActivatedRoute in Angular Angular Guards Tutorial Angular CanActivate Guard Example Angular CanActivateChild Example Angular CanDeactivate Guard Angular Resolve Guard Introduction to Angular Modules or ngModule Angular Routing between modules Angular Folder Structure Best Practices Guide to Lazy loading in Angular Angular Preloading Strategy Angular CanLoad Guard Example Ng-Content & Content Projection in Angular Angular @input, @output & EventEmitter Template Reference Variable in Angular ng-container in Angular How to use ng-template & TemplateRef in Angular How to Use ngTemplateOutlet in Angular '@Hostbinding and @Hostlistener_in_Angular Understanding ViewChild, ViewChildren &erylist in Angular ElementRef in Angular Renderer2 Example: Manipulating DOM in Angular ContentChild and ContentChildren in Angular AfterViewInit, AfterViewChecked, AfterContentInit & AfterContentChecked in Angular Angular Decorators Observable in Angular using RxJs Create observable from a string, array & object in angular Create Observable from Event using FromEvent in Angular Using Angular observable pipe with example Angular Map Operator: Usage and Examples Filter Operator in Angular Observable Tap operator in Angular observable Using SwitchMap in Angular Using MergeMap in Angular Using concatMap in Angular Using ExhaustMap in Angular Take, TakeUntil, TakeWhile & TakeLast in Angular Observable First, Last & Single Operator in Angular Observable Skip, SkipUntil, SkipWhile & SkipLast Operators in Angular The Scan & Reduce operators in Angular DebounceTime & Debounce in Angular Delay & DelayWhen in Angular Using ThrowError in Angular Observable Using Catcherror Operator in Angular Observable ReTryWhen inReTry, ReTryWhen in Angular Observable Unsubscribing from an Observable in Angular Subjects in Angular ReplaySubject, BehaviorSubject & AsyncSubject in Angular Angular Observable Subject Example Sharing Data Between Components Angular Global CSS styles View Encapsulation in Angular Style binding in Angular Class Binding in Angular Angular Component Styles How to Install & Use Angular FontAwesome How to Add Bootstrap to Angular Angular Location Service: go/back/forward Angular How to use APP_INITIALIZER Angular Runtime Configuration Angular Environment Variables Error Handling in Angular Applications Angular HTTP Error Handling Angular CLI tutorial ng new in Angular CLI How to update Angular to latest version Migrate to Standalone Components in Angular Create Multiple Angular Apps in One Project Set Page Title Using Title Service Angular Example Dynamic Page Title based on Route in Angular Meta service in Angular. Add/Update Meta Tags Example Dynamic Meta Tags in Angular Angular Canonical URL Lazy Load Images in Angular Server Side Rendering Using Angular Universal The requested URL was not found on this server error in Angular Angular Examples & Sample Projects Best Resources to Learn Angular Best Angular Books in 2020

How to Install & Use Angular FontAwesome

In this guide let us learn to install and use Angular FontAwesome icons. FontAwesome is the most popular icon set and toolkit. It has both paid & free versions. This guide shows you how to use the Free version of Angular FontAwesome.

❮ Component Styles How to Add Bootstrap to Angular ❯
Table of Contents

Installing FontAwesome

The main package is @fortawesome/angular-fontawesome. You can install the latest version using the following command.

Example

Try this code » 
                              
 
npm install @fortawesome/angular-fontawesome

Or You can install a particular version as shown below

Example

Try this code » 
                              

npm install @fortawesome/angular-fontawesome@<version>

But before installing you need to know which version to install. Not all versions are compatible with the various Angular versions. The following table should give you an idea

Angular Fontawesome Version Angular Version
0.1.x 5.x
0.2.x 6.x
6.x 6.x && 7.x
0.4.x, 0.5.x 8.x
0.6.x 9.x

Installing Icons

Next, we need to install icons. There are five icon sets available in FontAwesome. They are Solid, Regular, Light, Duotone & Brands. Out of which Solid, Regular & Brands has free icons. Light and Duotone only available as pro packages

Example

Try this code » 
                              

//Icon core package
npm install @fortawesome/fontawesome-svg-core --save

Example

Try this code » 
                              

//icons
 
npm install @fortawesome/free-solid-svg-icons --save
npm install @fortawesome/free-regular-svg-icons --save
npm install @fortawesome/free-brands-svg-icons --save

Using FontAswesome

Now there are two ways by which you can use the FontAwesome

  1. Directly in Component
  2. Using Icon library

Directly in Component

This method is useful when you use the FontAwesome in a few select components.

Open the app.module.ts and import the FontAwesomeModule Module from the @fortawesome/angular-fontawesome library. Add it to imports metadata.

app.module.ts

Example

Try this code » 
                              

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'      //Import here
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule                        //add to imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

In the component file import the icon. For example, we have imported the faCoffee icon from the solid icons package.

app.component.ts

Example

Try this code » 
                              

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';                //import icon
 
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
   faCoffee =faCoffee                              //assign it to a component variable
}

You can use it as shown below in the template. We use the fa-icon directive. Pass the icon to the icon property using the property binding.

app.component.html

Example

Try this code » 
                              

<h1>{{title}}</h1>
 
<fa-icon [icon]="faCoffee"></fa-icon>                    //use it in the component

Example

The following example shows how to use multiple icons

app.component.ts

Example

Try this code » 
                              
 
import { Component } from '@angular/core';
 
import { faCircle,faSquare } from '@fortawesome/free-solid-svg-icons';
import { faCircle as farCircle,faSquare as farSquare } from '@fortawesome/free-regular-svg-icons';
import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  faCircle=faCircle;
  farCircle=farCircle;
 
  faSquare=faSquare;
  farSquare=farSquare
 
  faStackOverflow=faStackOverflow
  faGithub=faGithub
  faMedium=faMedium
 
  title = 'Angular FontAwesome Example';
}
app.component.html

Example

Try this code » 
                              

<h1>{{title}}</h1>
 
<h2>Icons</h2>
<table>
  <thead>
    <tr>
      <td></td>
      <td>Solid Icons</td>
      <td>Regular Icons</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Circle</td>
      <td><fa-icon [icon]="faCircle"></fa-icon></td>
      <td><fa-icon [icon]="farCircle"></fa-icon></td>
    </tr>
    <tr>
      <td>Square</td>
      <td><fa-icon [icon]="faSquare"></fa-icon></td>
      <td><fa-icon [icon]="farSquare"></fa-icon></td>
    </tr>
  </tbody>
</table>
 
<h2>Brands</h2>
 
<p>StackOverflow : <fa-icon [icon]="faStackOverflow"></fa-icon>
</p>
<p>GitHub <fa-icon [icon]="faGithub"></fa-icon>
</p>
<p>Medium <fa-icon [icon]="faMedium"></fa-icon>
</p>

Using Icon library

This method allows you to define the icons once in app.module and use it across the application. We add the icons using the addIcons() or addIconPacks() methods of the FaIconLibrary

  1. Import FontAwesomeModule & FaIconLibrary library.
  2. Import the icons, which you want to use from the icons packages.
  3. Inject the FaIconLibrary in the app.module constructor.
  4. Finally, add the icons to the FaIconLibrary library using the addIcons method.

The following example shows, how we can add icons to the icons library.

app.module.ts

Example

Try this code » 
                              

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
import { FontAwesomeModule, FaIconLibrary  } from '@fortawesome/angular-fontawesome'
import { faCircle,faSquare } from '@fortawesome/free-solid-svg-icons';
import { faCircle as farCircle,faSquare as farSquare } from '@fortawesome/free-regular-svg-icons';
import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
 
  constructor(library: FaIconLibrary) {
 
    // Add an icon to the library for convenient access in other components
    library.addIcons(faCircle,faSquare,farCircle,farSquare
          ,faStackOverflow,faGithub,faMedium);
  }
 
}

No need to import anything the component class.

app.component.ts

Example

Try this code » 
                              
 
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular FontAwesome Example';
}

In the template use the fa-icon directive. Pass the icon along with the package prefix to the icon property using the property binding. The syntax is [icon]="[prefix, iconName]". The prefixes are fas, far & fab for Solid, Regular and Brands icons respectively.

app.component.html

Example

Try this code » 
                              
 
<h1>{{title}}</h1>
 
<h2>Icons</h2>
<table>
  <thead>
    <tr>
      <td></td>
      <td>Solid Icons</td>
      <td>Regular Icons</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Circle</td>
      <td><fa-icon [icon]="['fas','circle']"></fa-icon></td>
      <td><fa-icon [icon]="['far','circle']"></fa-icon></td>
    </tr>
    <tr>
      <td>Square</td>
      <td><fa-icon [icon]="['fas','square']"></fa-icon></td>
      <td><fa-icon [icon]="['far','square']"></fa-icon></td>
    </tr>
  </tbody>
</table>
 
<h2>Brands</h2>
 
<p>StackOverflow : <fa-icon [icon]="['fab','stack-overflow']"></fa-icon>
</p>
<p>GitHub <fa-icon [icon]="['fab','github']"></fa-icon>
</p>
<p>Medium <fa-icon [icon]="['fab','medium']"></fa-icon>
</p>

Search for Icons

You can search for icons from this link.

Features of FontAwesome

size

Example

Try this code » 
                              
 
<h2>Size</h2>
 
<fa-icon [icon]="['far', 'square']" size="xs"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="sm"></fa-icon>
<fa-icon [icon]="['far', 'square']"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="1x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="lg"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="2x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="3x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="4x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="5x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="6x"></fa-icon>
<fa-icon [icon]="['far', 'square']" size="7x"></fa-icon>

Rotate

Example

Try this code » 
                              

<fa-icon [icon]="['fab','github']"  size="4x" ></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" rotate="90"></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" rotate="180"></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" rotate="270"></fa-icon>

Flip

Example

Try this code » 
                              

<fa-icon [icon]="['fab','github']"  size="4x"></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" flip="horizontal"></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" flip="vertical"></fa-icon>
<fa-icon [icon]="['fab','github']"  size="4x" flip="both"></fa-icon>

Animations

Example

Try this code » 
                              

<fa-icon [icon]="['fas','spinner']"  size="4x" spin="true"></fa-icon>
<fa-icon [icon]="['fas','spinner']"  size="4x" pulse="true"></fa-icon>

Border

Example

Try this code » 
                              

<fa-icon [icon]="['fas','coffee']" size="4x" border="true"></fa-icon>
<fa-icon [icon]="['far','circle']" size="4x" border="true"></fa-icon>
<fa-icon [icon]="['fab','stack-overflow']" size="4x" border="true"></fa-icon>

Pull

Example

Try this code » 
                              

<fa-icon [icon]="['fas','coffee']" size="4x" border="true"></fa-icon>
<fa-icon [icon]="['fas','coffee']" size="4x" border="true" pull="left"></fa-icon>
<fa-icon [icon]="['fas','coffee']" size="4x" border="true" pull="right"></fa-icon>

Styles

Example

Try this code » 
                              

<fa-icon [icon]="['fas','coffee']" size="4x" border="true" [styles]="{'stroke': 'red', 'color': 'red'}"></fa-icon>
❮ Component Styles How to Add Bootstrap to Angular ❯

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.

About Us

Our Story Terms of Use Privacy Policy

Contact

Contact Us Report Error Advertise

Interactive Tools

Font Awesome Icon Search Utility HTML Formatter Title & Meta Length Calculator HTML Color Picker
Copyright © 2022 Tutorial Hub Tutorial. All Rights Reserved.