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

 <button *ngIf="pos.name == uname" type="button" class="btn btn-default       btn-sm delete" (click)="DeleteBulletin();">
   <span class="glyphicon glyphicon-trash glyph"></span>  Delete
 </button>

I have included bootstrap in my styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

The glyphicon appears as shown-

Answer 1

I installed bootstrap3 as npm install bootstrap@3 and it started working

just need to add in angular-cli.json:-

   "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],

Answer 2

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 3

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 4

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 5

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

npm install --save font-awesome

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 6

You have to import

<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

to your index.html