Meteor + Bootstrap 3 Glyphics not working

Question

I am trying to use bootstrap 3 with Meteor, but bootstrap works, but Glyphicons does not. When the icon file is imported, the following error is displayed:

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

Answer 1

You have placed this file elsewhere. All files that must be sent by the Meteor as separate objects must be placed inside the /public directory.

---

When the Meteor server receives the path, it first checks to see if there is a corresponding file in /public . If he is, he is served. Otherwise, Meteor uploads itself to the client as an HTML file and then processes the path in the client router of its choice.

In your case, you are trying to access a file that is located in the /client directory, and not in /public , so the second script happens. As a result, the browser receives an HTML file with the Meteor code, where it is supposed to get the font.

To solve this problem, move the font to a place like /public/fonts/glyphicons-halflings-regular.woff and then access it through /fonts/glyphicons-halflings-regular.woff wherever it was used in CSS Bootstrap.

Answer 2

Here is my own bootstrap3 package structure that 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 states that fonts are special resources that should not be connected on the client with regular js / html, citing the main dev David Glasser "it must be unprocessed and separately extracted." (see https://github.com/meteor/meteor/issues/1357 )

The bootstrap_override.css file is needed to override the default sibling paths defined in bootstrap.css, with our absolute package paths.

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

Answer 3

Using Storm, I drilled into the .meteor> local> build> programs> web.browser> packages> twbs_bootstrap> dist> fonts folder to find the glyphicon libraries, and I just copied them to \ public \ fonts.