Install glyphicon library in Angular 15.x

Angular
1

Hi all,

I just signed up for the “Angular 4: Beginner to Pro” recently. While most of the lessons are still relevant, I found the lessons involved using the glyphicon library (i.e., bootstrap 3.x) no longer work since the glyphicon library was not included in the current bootstrap library. After sometime searching, I’ve found a work around that allow me to install and use glyphicon in Angular 15.x to continue with Mosh’s lessons.

First of all, this is my environment:

    Angular CLI: 15.0.4
    Node: 18.12.1
    Package Manager: npm 8.19.2
    OS: win32 x64
    
    Angular:
    ...
    
    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.1500.4 (cli-only)
    @angular-devkit/core         15.0.4 (cli-only)
    @angular-devkit/schematics   15.0.4 (cli-only)
    @schematics/angular          15.0.4 (cli-only)

Here are the steps for this work around…

1. Installing bootstrap & bootstrap-icon

    npm i boostrap@3 bootstrap-icons@1 --save

… This is what I found in "package-lock.json:

...
        "bootstrap": "^3.4.1",
        "bootstrap-icons": "^1.10.3",
...

2. Setup global styles import bootstrap
Add these lines to the top of ‘src/styles.css’

@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";

3. Start using glyphicon
For example, I’ve created a module called ‘favorite’ and in ‘favorite.component.html’ I have:

      <span class="glyphicon glyphicon-heart"></span>

… in ‘app.component.html’, I have:

      <favorite></favorite>

It produces:
image

This work around helps me to resolve the issues with glyphicon, so I can continue with Mosh’s Angular lessons. I hope it’ll help.

Many cheers.

1 Like