2

I have created a website using Ember.js, Ember CLI and Twitter Bootstrap. I have installed Bootstrap using $ bower install --save bootstrap. This was working just fine untill I updated the Bootstrap version to 3.2.0. Now the glyph icons does not work in Firefox, E003 is displayed instead of the icons. How ever, the icons still work in IE and Chrome.

I have figured out that there is an issue with the customized bootstrap and that you should download the orignial package and replace all font files with the standard ones, but this did not work either.

My brocfile.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');
app.import('vendor/moment/moment.js');

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var extraAssets = pickFiles('vendor/bootstrap/dist/fonts', {
    srcDir: '/',
    files: ['**/*'],
    destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(), extraAssets]);
Community
  • 1
  • 1
Karoline Brynildsen
  • 3,598
  • 6
  • 35
  • 45
  • Think I should mention this just in case, but have you made sure that Firefox hasn't just cached your old font file. Try clearing your cached content (Tools - Options - Advanced - Network - Clear cached web content) and even try it on a different computer if you can, just to make doubly and triply sure! – Rob Quincey Aug 12 '14 at 12:36
  • I've tried both that and ctr+F5 / ctr+shift+R for a hard refresh, but it does not help. – Karoline Brynildsen Aug 12 '14 at 13:43
  • Worth a try! Could it be that your server is simply not serving up a font format that Firefox is okay with? Check your network logs in the Chrome developer console and see what version of the Glyphicon font file is being delivered (.woff/.svg/.ttf and I think theres one more). Check this against your Firefox network logs. Is it requesting the same file? Is it requesting something else and saying 'Not Found'?. I'm doubting this is an ember problem considering its ok in IE and Chrome. – Rob Quincey Aug 12 '14 at 13:50
  • Chrome is requesting the .woff file, while Firefox is requesting both the .woff and the .ttf file. File(s) shows up as 'Not Modified' (or 'OK' if I do a hard refresh) in both Chrome and Firefox. – Karoline Brynildsen Aug 12 '14 at 14:00
  • 1
    What I've seen is that the files aren't being served correctly, though I don't know why (you can see in the content received there is no WOFF header or anything like that, while it should be there). I had the same problem but with Font Awesome, and worked around it by loading it from the CDN instead. – Leeft Aug 12 '14 at 18:30
  • I removed the code from the brocfile.js, and added the links to bootstrap css and js from CDN in to the index.html file, and it works! However, I do not like this solution... – Karoline Brynildsen Aug 13 '14 at 07:14
  • Is the site deployed on a server or is it just local at the moment? If it is on a server then double check that your server is set to serve up the relevant MIME types. I personally use IIS, so adding 'ttf' and 'woff' mime types involves going in to IIS Manager and adding the MIME types in there. If you just search for 'add mime type to {your server}' in your favourite search engine there should be instructions on how to do it if they aren't already set up. – Rob Quincey Aug 14 '14 at 10:50
  • The site is not deployed to a server, it is currently only hosted on my PC. But if I did have it deployed to a server, would setting up the IIS help? I mean, since this does work in other browsers than Firefox? – Karoline Brynildsen Aug 14 '14 at 11:50

0 Answers0