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

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.

getting any errors?

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.

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 ?

@marius-avram

@marius-avram that does not look related

@marius-avram

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

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.

+1

+1 on windows

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

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

+1 OSX. Using CSS and not SCSS

+1 on Ubuntu with chrome.

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

~~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

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.

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

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

to this:

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

fix(webpack:css): disable css-loader sourceMap option

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

+1 for the fix

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

Awk34 commented on Aug 30, 2016

marius-avram commented on Aug 31, 2016

marius-avram commented on Aug 31, 2016

Awk34 commented on Aug 31, 2016

Awk34 commented on Aug 31, 2016

DanielClausen commented on Sep 5, 2016

chandruk4321 commented on Sep 22, 2016

joelvictoraluiz commented on Oct 4, 2016

mfsjr commented on Dec 14, 2016

zaphinath commented on Dec 18, 2016

duoli commented on Dec 28, 2016

duoli commented on Dec 28, 2016

Awk34 commented on Dec 28, 2016

mfsjr commented on Dec 28, 2016

Awk34 commented on Dec 28, 2016

mfsjr commented on Dec 29, 2016

abbas133 commented on Jan 1, 2017

MichaelJCole commented on May 15, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions