Version 4.0.1 stable, boostrap glyphicons don't seem to work

[marius-avram]

• I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.0.1
Node	4.2.6
npm	3.5.2
Operating System	Ubuntu 16.04 LTS
etc	etc

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	CSS
Router	ui-router
Client Tests	Mocha
DB	MongoDB
Auth	Y

After I run npm install, and gulp serve the glypicons don't seem to work. They are just missing/square characters. I tried both in chrome and firefox.

If I access the font files from the browser like this they get downloaded:

localhost:3000/assets/fonts/bootstrap/glyphicons-halflings-regular.svg

However I don't understand why they are not showing up correctly in the browser.

[Awk34]

getting any errors?

[marius-avram]

I get some errors when i'm starting the apps from gulp. I don't know if they are of any relevance.

[11:13:27] Starting 'serve'...
[11:13:27] Starting 'clean:tmp'...
[11:13:27] Starting 'lint:scripts'...
[11:13:27] Starting 'lint:scripts:client'...
[11:13:27] Starting 'lint:scripts:server'...
[11:13:27] Starting 'inject'...
[11:13:27] Starting 'inject:css'...
[11:13:27] Starting 'copy:fonts:dev'...
[11:13:27] Starting 'env:all'...
[11:13:27] Finished 'env:all' after 149 ms
[11:13:27] Finished 'clean:tmp' after 532 ms
[11:13:31] gulp-inject 5 files into app.css.
[11:13:31] Finished 'inject:css' after 3.97 s
[11:13:31] Finished 'inject' after 3.97 s
[11:13:34] Finished 'copy:fonts:dev' after 7.02 s
[11:13:35] 
~/server/app.js
  16:17  warning  Unexpected string concatenation                                                                                prefer-template
...
✖ 92 problems (68 errors, 24 warnings)

[11:13:35] Finished 'lint:scripts:client' after 8.56 s
[11:13:35] Finished 'lint:scripts' after 8.56 s
[11:13:35] Starting 'start:server'...
[11:13:35] Finished 'start:server' after 17 ms
[11:13:35] Starting 'start:client'...
[nodemon] 1.10.2

I don't get any errors in the browser console however.

[marius-avram]

I found this ubuntu issue however:

http://askubuntu.com/questions/804639/font-viewer-not-running-in-ubuntu-16-04

Do you think this might be the cause of the problem ?

[Awk34]

@marius-avram that does not look related

[Awk34]

@marius-avram if you look in the network tab of your browser tools, do you see the font files getting loaded?

[DanielClausen]

I'm having this same issue, but I'm running on Windows not Ubuntu. None of the custom fonts are being loaded, neither bootstrap, font-awesome, or my custom fonts. There is no font files in the network tab on Chrome. I've checked the outputted app.css file and it has the font-face nodes. I'm not seeing any errors related to fonts it just seems like the browser isn't even attempting to load the fonts even though they are defined in the CSS.

[chandruk4321]

+1

[joelvictoraluiz]

+1 on windows

[mfsjr]

Getting the same with 4.1.0, just noting a few additional observations:

1. Glyphs are missing with Chrome and Firefox but not Safari
2. gulp builds, i.e., running the /dist build from the command line doesn't have the problem
3. Creating the project with SCSS instead of CSS doesn't exhibit the problem

[zaphinath]

+1 OSX. Using CSS and not SCSS

[duoli]

+1 on Ubuntu with chrome.

[duoli]

to be clarified, with 'glyphicon glyphicon-home', I get the following icon instead.

It seems all the glyphicons are shifted to a different one.

generator-angular-fullstack 4.0.1
Node ^6.2.2
npm ^3.9.5
bootstrap: ~3.1.1
Operating System Ubuntu 16.04 LTS
etc etc

[Awk34]

Try using this for the font in app.css:

/**
 *Font Awesome Fonts
 */

@font-face {
  font-family: 'FontAwesome';
  src: url('~font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('~font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),
  url('~font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'),
  url('~font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),
  url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Scratch that, I've tested an actual solution

[mfsjr]

Sorry, but replacing the font in app.css described above did not fix my issue with 4.1.0 on OSX with Chrome and Firefox.

[Awk34]

Instead, try changing this line in webpack.make.js:

? ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')

to this:

? ExtractTextPlugin.extract('style', 'css!postcss')

[mfsjr]

Appears that webpack.make.js change above fixed it - thanks!

[abbas133]

+1 for the fix

[MichaelJCole]

Hey, if you're getting this with: npm start, it seems to be designed to work after gulp build. If you want to run a development server, use gulp serve