14

I'm working on an Angular 4 Project using Bootstrap 4 with Sass, and I want to use the glyphicons but when I use the following code:

<button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span>Like</button>

For example, when making a "like" button, the icon doesn't show.

I configured the project to compile the SCSS stylesheets with the ng-serve command, my angular-cli.json looks like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "front-end-informatorio"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss"

      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

I tried linking this in my index.html:

<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"/>

It made the icons work, but also also changed the whole style of my project.

How do I achieve it without overlapping the styles?

Klooven
  • 3,858
  • 1
  • 23
  • 41
Carlos Pisarello
  • 1,254
  • 5
  • 20
  • 39

1 Answers1

32

Bootstrap 4 dropped Glyphicons support. (see: https://getbootstrap.com/docs/4.0/migration/#components)

This means that you'll need to use some other icon font, like Font Awesome.

Quick start for Font Awesome

  1. Grab the script from the get started page
  2. Paste it in your <head>
  3. Start using! Search for the icons on FontAwesome.com
  4. Explore the docs to unleash the full potential of Font Awesome!

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap + Font Awesome</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- display 4 class makes the font size increase -->
      <h1 class="display-4"><i class="fab fa-stack-overflow"></i></h1>
      <p>That was easy! <i class="far fa-thumbs-up"></i></p>
      <button type="button" class="btn btn-primary">Works also with buttons! <i class="fas fa-link"></i></button>
    </div>
  </body>
</html>

Angular Font Awesome component

The Font Awesome team is working on an Angular Font Awesome component. It is right now in pre-release, but you can find it here.

Klooven
  • 3,858
  • 1
  • 23
  • 41