Bootstrap 4 Glyphicons not showing on Angular 4 project
Bootstrap 4 dropped Glyphicons support. (see: https://getbootstrap.com/docs/4.0/migration/#components)
This means that you'll need to use some other icon font, like Font Awesome.
Quick start for Font Awesome
- Grab the script from the get started page
- Paste it in your
<head> - Start using! Search for the icons on FontAwesome.com
- Explore the docs to unleash the full potential of Font Awesome!
Example:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bootstrap + Font Awesome</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> </head> <body> <div class="container"> <!-- display 4 class makes the font size increase --> <h1 class="display-4"><i class="fab fa-stack-overflow"></i></h1> <p>That was easy! <i class="far fa-thumbs-up"></i></p> <button type="button" class="btn btn-primary">Works also with buttons! <i class="fas fa-link"></i></button> </div> </body></html>Angular Font Awesome component
The Font Awesome team is working on an Angular Font Awesome component. It is right now in pre-release, but you can find it here.