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-

look here: http://stackoverflow.com/questions/35659094/bootstrap-glyphicon-not-showing-in-form/35660280#35660280 — Arthur Tsidkilov, Jun 20 '16 at 07:03
You could check the console for a `404` error, where it tries to load the font file. — Maximilian Riegler, Jun 20 '16 at 07:10
Dropped the Glyphicons icon font. If you need icons, some options are: the upstream version of Glyphicons Octicons Font Awesome — pearpages, Jan 23 '17 at 11:18

Sebastian Viereck · Answer 1 · 2022-10-17T09:44:24.547

30

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

npm install --save fortawesome/fontawesome-free

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

Update: Since Font Font-Awesome 5 and Angular 5 there is an offical angular-fontawesome package available:

https://github.com/FortAwesome/angular-fontawesome#installation

edited Oct 17 '22 at 09:44

answered Apr 19 '18 at 12:14

Sebastian Viereck

5,455
53
53

In my case I didn't have a angular-cli.json file. Instead I added to src/styles.css: @import "~font-awesome/css/font-awesome.css" After this it worked as a charm! – Koen Zomers Jul 29 '18 at 18:50
With the above comment I noticed that only the regular icons would work for me. Not the other ones. By following the steps in the following article, everything works and I can use types icons instead of using clases: https://www.npmjs.com/package/angular-font-awesome – Koen Zomers Jul 29 '18 at 19:03
See [Official Angular component for Font Awesome 5](https://github.com/FortAwesome/angular-fontawesome) for simple installation – Dan Brandt May 16 '20 at 21:24

score 16 · Answer 2 · answered Oct 06 '16 at 07:58

16

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

answered Oct 06 '16 at 07:58

supersonic

197
1
4

score 5 · Answer 3 · answered Apr 13 '17 at 19:49

5

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

answered Apr 13 '17 at 19:49

Shobhit

167
1
2
5

I have the same problem. I tried this solution, but no luck... any ideas? – maia Jul 11 '17 at 22:17
The problem was having the bootstrap 4.x in my index.html --> replacing it with worked. – maia Jul 11 '17 at 22:32
Thanks. My problem was referencing bootstrap.min.css instead of bootstrap.css. – mohghaderi Feb 23 '18 at 20:02
this works！ bootstrap.min.css instead of bootstrap.css – albert yu Mar 02 '18 at 01:39

David · Answer 4 · 2016-07-31T19:36:27.297

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:

score 3 · Answer 5 · answered Jan 24 '18 at 06:51

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>

score 2 · Answer 6 · answered May 26 '20 at 06:51

2

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

answered May 26 '20 at 06:51

Sohaib El Mediouni

155
1
10

score 1 · Answer 7 · answered Aug 24 '16 at 17:55

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

score 0 · Answer 8 · edited Dec 07 '18 at 07:37

0

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.

edited Dec 07 '18 at 07:37

Eric Aya

69,473
35
181
253

answered Dec 07 '18 at 07:32

Samudrala Ramu

2,088
1
15
36

Invest · Answer 9 · 2019-07-19T09:27:14.783

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:

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

The details are all described in the link above.

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>

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.

score 0 · Answer 10 · answered Aug 15 '19 at 21:02

I did the same as @Sebastian Viereck . But i did

npm install --save-dev @fortawesome/fontawesome-free

and on the angular.json

"styles": ["node_modules/bootstrap/dist/css/bootstrap.css",
           "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
            "src/styles.css"
 ],

It looks that fontawesome has a new paid version

score 0 · Answer 11 · answered Apr 22 '20 at 08:41

From https://www.w3schools.com/bootstrap4/bootstrap_icons.asp -

Bootstrap 4 does not have its own icon library (Glyphicons from bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons. To use Font Awesome icons, follow these steps:

Install Font-Awesome from the terminal in your project folder

npm install --save font-awesome

and add the following line to your main stylesheet -

@import "~font-awesome/css/font-awesome.css";

You can now access all the icons available in the installed Font-Awesome library. Refer this link for the complete list of icons - Official Font Awesome Website

Bootstrap Glyphicons not displaying in angular2

11 Answers11

Linked