Meteor + Bootstrap 3 Glyphicons not working

Question

I have been trying to use bootstrap 3 with Meteor, however bootstrap works but the Glyphicons are not. When the file with the icons imports it shows the following error:

Resource interpreted as Font but transferred with MIME type     text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff". 

Answer 1

You've placed this file in the wrong place. All files that should be served by Meteor as a separate entities should be placed inside /public directory.

 

---

 

When Meteor server gets a path, it first checks whether there is a matching file in /public. If there is one, it is served. Otherwise Meteor loads itself to the client as a HTML file, and process the path afterwards in the client-side router of choice.

In your case, you're trying to access file that's in the /client dir, not in the /public one, so the second scenario happens. As a result, browser gets HTML file with Meteor code where it supposed to receive a font.

To solve this move the font to a place like /public/fonts/glyphicons-halflings-regular.woff and then access via /fonts/glyphicons-halflings-regular.woff everywhere where it's used in Bootstrap's CSSes.

Answer 2

Here is my bootstrap3 own package structure, which works as expected for me :

bootstrap3
|-> dist (bootstrap3 directory containint js/, css/ and fonts/)
|-> bootstrap_override.css (override fonts paths)
|-> package.js (package definition)

bootstrap_override.css

@font-face{
    font-family:'Glyphicons Halflings';
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot');
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

package.js

Package.describe({
    summary:"bootstrap 3.0 packaged for Meteor."
});

Package.on_use(function(api){
    api.use(["jquery"],"client");
    //
    api.add_files([
        // bootstrap fonts
        "dist/css/bootstrap.min.css",
        "dist/css/bootstrap-theme.min.css", (optional bootstrap2 lookalike theme)
        // bootstrap javascript
        "dist/js/bootstrap.min.js"
    ],"client");
    api.add_files([
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.woff"
    ],"client",{
        // undocumented hint : do not bundle those files along with with js/html resources
        isAsset:true
    });
    api.add_files([
        // overriding css
        "bootstrap_override.css"
    ],"client");
});

This package specify that the fonts are special resources that shouldn't be bundled on the client along with regular js/html, quoting core dev David Glasser "it needs to be unprocessed and separately fetchable". (see https://github.com/meteor/meteor/issues/1357)

The bootstrap_override.css file is necessary to override the defaults relatives paths defined in bootstrap.css with our package related absolute paths.

You can alternatively also use the bootstrap-3 package from atmosphere. (https://atmosphere.meteor.com/package/bootstrap-3)