Search code examples
csstwitter-bootstrapmeteorglyphiconsbootswatch

Bootstrap theme having a Glyphicons issue in Meteor

First I used bootswatch:readable theme in the recommended way - linking to it in <head>. But then Bootstrap was loading after my merged custom stylesheets and overriding what was supposed to override Bootstrap.

Then I tried simply installing it with meteor add bootswatch:readable, it would work, my overrides would also work, but the problem would be Glyphicons - I'd get

Failed to decode downloaded font:
http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.woff
OTS parsing error: invalid version tag
http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.ttf
OTS parsing error: invalid version tag

I see the icons path is probably wrong but not sure where or how to fix it.

Solution

  • Found this issue on GitHub that pointed me towards a temporary solution.

    I installed the theme with meteor add bootswatch:readable and added this to my own stylesheet:

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

    And voila, the icons work!