Web application with Angular CLI does not display bootstrap-sass glyphicons

Question

I have an application I created with Angular CLI, and I am using bootstrap-sass to customize the theme. I am using the following versions...

node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8
bootstrap-sass: 3.3.7

In my .angular-cli.json I have

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js"
  ]

In my html file I have

<span class="glyphicon glyphicon-user"></span>

In my scss file I have

$bootstrap-sass-asset-helper: true;
$icon-font-path: if($bootstrap-sass-asset-helper, "../bootstrap/", "../fonts/bootstrap/");
@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

There are no errors when I run ng serve or ng build and the application runs correctly with no errors in the browser console. However, the icons still do not display. I originally had this application running with the glyphicons displaying properly, and then I migrated the core application code into a new angular-cli application. Is there something I am missing?

@ArrowHead, I had it in my code, just forgot to add it here. — Jacqueline, Mar 08 '17 at 16:08
if you do require("../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss") ?? — federico scamuzzi, Mar 08 '17 at 16:12
@federico, It is properly importing bootstrap as far as I can tell, as it has all the correct css. The only issue is the glyphicons — Jacqueline, Mar 08 '17 at 16:31

score 0 · Accepted Answer · answered Mar 08 '17 at 21:48

This appears to be an issue with the way webpack is configured within angular-cli. Currently you can workaround this by pointing to the bootstrap CDN fonts with the following in the scss file

$bootstrap-sass-asset-helper: false;
$icon-font-path: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/";

Web application with Angular CLI does not display bootstrap-sass glyphicons

1 Answers1