Glyphicons dont show when using Angular + Gulp + Browserify

Question

I'm having some major issues getting Glyphicon icons to appear on my page. Ive googled and tried most everything that other people have recommended but nothing seems to work. Only a grey square appears where the icon should be. It happens with every icon as well.

I have a basic understanding of how gulp and browserify work but it's possible that I am not including the font files correctly. The network traffic shows the font files being loaded (picture in link below).

There has to be something simple that I am missing but I just simply cannot figure it out. Any advice or help would be highly appreciated. It's been super frustrating trying to get this to work.

I can post more code if needed. Please just ask. Thank you for reading.

Relative Code. I don't have anything but dependencies in my package.json file

app.js

window.$ = window.jQuery = require('jquery');
var angular = require('angular');
var uibs = require('angular-ui-bootstrap');
var myApp = angular.module('myApp', [uibs]);

style.scss

$icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

gulpfile.js (only relative code)

var gulp = require('gulp'),
    scss = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer')

gulp.task('styles', function () {
        return scss('scss/*.scss', {
            onError: function (e) {
                console.log(e);
            }
        })
            .pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
            .pipe(gulp.dest('dist/css/'))
            .pipe(refresh(lrserver));
    });

// Browserify task
gulp.task('browserify', function () {
    // Single point of entry (make sure not to src ALL your files, browserify will figure it out for you)
    gulp.src(['app/app.js'])
        .pipe(browserify({
            insertGlobals: true,
            debug: true
        }))
        // Bundle to a single file
        .pipe(concat('bundle.js'))
        // Output it to our dist folder
        .pipe(gulp.dest('dist/js'));
});

It appears that that @font-face gets generated properly. The urls here seem to be correct.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

I forgot to add that this shows in the browser console when it tries to load the icons:

Failed to decode downloaded font: http://localhost:5000/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

Answer 1

It definitely has something to do with the paths provided in the style.scss file that.

I added a new gulp task

// Copies fonts to /dist (for Bootstrap glyphicons)
gulp.task('fonts', function() {
    return gulp.src('./node_modules/bootstrap/fonts/*')
        .pipe(gulp.dest('./dist/fonts'))
});

That will move the font files into my dist folder. Then, I changed the path in style.scss to

$icon-font-path: "../fonts/";

and everything seems to be working now. Was unaware that i needed to bundle the fonts as well. If there is a better way of doing this, I am all ears.