Glyphicon not showing

Attempting the Favorite component exercises in the Displaying Data and Handling Events section of the Angular 4 : Beginner to Pro course.

The glyphicon does not show in the browser. I have used the solution files with the same result.

The only difference should be the version of Angular and other libraries that I am using as I am using the latest.

There are no errors in the console and I can see the element being added when inspecting the website source.

Any ideas on what’s going on / how to make it work?

1 Like

According to this stackoveflow post bootstrap 4 (the latest) no longer contains glyphicons.

Reverted to the Bootstrap version Mosh used in the video and saw the icon show up.

Or - as was answered over here, you can use the newer Bootstrap Icons.

Install the package:

$ npm i bootstrap-icons

Import the CSS:

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

Use the classes bi (doubtless standing for “bootstrap icon”) and then bi-<SOME_ICON>. For example, to use the Star Icon:

<i class="bi bi-star"></i>

The nearest matching icons in Bootstrap Icons would be star and star-fill for this exercise (so use classes bi-star and bi-star-fill).

1 Like

Hi all,

If I install bootstrap3 this way:

npm install bootstrap@3

… then I can use it as what Mosh described in the ‘favorite’ solution:

favorite.component.html:

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

app.component.html:

<favorite></favorite>

… It should show the star

image