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

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>

Answer 2

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

Answer 3

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

Answer 4

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 5

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