Bootstrap Glyphicons not displaying in angular2

Question

I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --save My code snippet is

Answer 1

Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead:

npm install --save fortawesome/fontawesome-free

OR install the official Angular Fontawesome Package: https://github.com/FortAwesome/angular-fontawesome

and add the css File to your .angular-cli.json

"apps": [
          {
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],

Replace CSS class with the Font Awesome classes:

<i class="navbar-toggler-icon fa fa-bars"> </i>

recompile app: ng serve

Answer 2

if you are using bootstrap 4 glyphicon is no longer supported you should try an old version

Answer 3

if you include bootstrap files through styleUrls this will make an issue, I don't know why, but I found that the borwser looks at different location for glyphicons.

@Component({
   moduleId: module.id,
   selector: 'app-projects',
   templateUrl: 'projects.component.html',
   styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
   providers:[ProjectsService]
})

using above method for calling bootstrap stylesheet file causes following error "GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff "

what you can see from the error is that the browser is looking at localhost:4200/fonts/... where it should be localhost:4200/vendor/bootstrap/dist/fonts/...

anyway, a workaround is to make sure that you added the dist folder of bootstrap inside angular-cli-build.js file in vendorNpmFiles array as 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' and remove bootstrap stylesheet from styleUrls.

then add to the index.html the following line:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

dont forget to ng serve or ng build

Answer 4

Please run

npm install glyphicons --save

and than please import glyphicons in your component

 import icons from 'glyphicons';
    var icons = require('glyphicons');
    console.info('This is' + icons.heart+ ' Glyphicons!')

You can check once in your browser console.

Answer 5

There is angular-cli-build.js file of root of the project if your application has been scaffold by angular-cli (using 'ng init' or 'ng new').

angular-cli-build.js instructs build of the project (using 'ng serve' or 'ng build') to place 3rd-party libraries into vendor folder.

There is fonts folder, in bootstrap distribution folder, holding glyphicons files. Those bootstrap files needs to be placed into vendor folder too.

angular-cli-build.js:

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.min.css',
      'bootstrap/dist/fonts/*'
    ]
  });
};  

For completeness, setup process for bootstrap was in those few steps below:

Commnad line:

npm install bootstrap --save

index.html:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Restart 'ng serve' or just rebuild with 'ng build'

Here is result of page source:

Answer 6

The advice with FontAwesome is correct but only partially. If you just follow the FontAwesome instructions you will fail in an Angular project.

Instead check the hint on this page:

Font Awesome now has an official Angular component that’s available for all who want to easily use our icons in projects. If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.

Okay this means in an Angular project you need to use the following package: Angular FontAwesome

The best page that I have found for me as I am using NPM was this page.

So basically you need to:

1. Install FontAwesome in NPM
2. Import the module AngularFontAwesomeModule in your app.module.ts
3. Add the CSS in the angular-cli.json file

The details are all described in the link above.

4. To finally add an icon you can add a power-off icon in the app.component.html file:

Code:

<fa-icon [icon]="faPowerOff"></fa-icon>

5. AND you need to add the code in the related app.component.ts file:

Code:

    import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
    ...
    export class AppComponent implements OnInit {
      faPowerOff = faPowerOff;
    ...

ONE IMPORTANT NOTE!

Please realize you need to install the correct version of AngularFontawesome in NPM for your Angular version. Check this page for the compatibility table.

I used Angular 5 so I had to install it like this:

npm install @fortawesome/angular-fontawesome@0.1.1

The entry will then be added to your package.json file.