Build a Bootstrap 4 Navbar in Angular 8 with angular-fontawesome icons

Angular ❤

Prerequisites

Angular CLI already installed

Node.js Installed

Angular project already set up

Install Bootstrap

$ npm install bootstrap –-save

Install jquery

$ npm install jquery --save

Add the styles and scripts to your angular.json file

styles”: [
  “node_modules/bootstrap/dist/css/bootstrap.min.css”,
  “src/styles.css”
],
“scripts”: [
  “node_modules/jquery/dist/jquery.min.js”,
  “node_modules/bootstrap/dist/js/bootstrap.min.js”
]

Install angular-fontawesome

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
$ npm install @fortawesome/angular-fontawesome@0.5.0

Add font awesome to imports in app.module.ts

import { FontAwesomeModule } from ‘@fortawesome/angular-fontawesome’;
@NgModule({
imports: [
FontAwesomeModule,…
]})

Generate a navigation component

ng g c navigation

In navigation.component.html, add the bootstrap navigation;

Bootstrap Navigation

Add your navigation selector to your app.component.html file

<app-navigation></app-navigation>

You can view progress in browser!

To use your angular-fontawesome icon,

1. Tie the icon you want to use in your navigation.component.ts file

2. Use icon in navigation.component.html template file as below;

<fa-icon [icon]=’faSearch’></fa-icon>

Below is my GitHub gist on my navigation template using the three icons I imported;

Style as desired.

This is my final navigation bar.

Thank you for your time. Happy Coding.