Bootstrap Glyphicons not displaying in angular2

问题:

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-

回答1:

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

回答2:

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"
     ],

回答3:

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

回答4:

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:

回答5:

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

回答6:

If you are using Bootstrap 4, it doesn't include glyphicon in self release. So you coud use another icon package such as FontAwesome or installed the Glyphicons separately.

I am using FontAwesome and that dependencies in my cases:

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

In HTML templates just place a code like that:

<i class="fa fa-refresh" aria-hidden="true"></i>

回答7:

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.