Question

I can't get the Glyphicons in Bootstrap to work without JavaScript. When JavaScript is enabled, everything works fine but when it's disabled, it just shows random symbols. (Try visiting http://getbootstrap.com/components/ with JavaScript disabled)

Is there any way I can use those icons without requiring the user to enable JavaScript?

I've also thought about using Font Awesome, but http://fontawesome.io has the same problem.

Edit: Okay, this is weird. It seems to work perfectly fine in Opera, while it doesn't in Firefox. Do I have to specify an encoding or include the font via @font-face or something?

Another edit: The Firefox console shows the following:

downloadable font: download not allowed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): content blocked
source: http://localhost/bs/fonts/glyphicons-halflings-regular.woff bootstrap.min.css

downloadable font: download not allowed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): content blocked
source: http://localhost/bs/fonts/glyphicons-halflings-regular.ttf bootstrap.min.css

downloadable font: no supported format found (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:4)
source: (end of source list) bootstrap.min.css
Was it helpful?

Solution

Font Awesome's icons, don't require JavaScript, as it says right there on the front page of their site. Proof: http://jsbin.com/conerepu/1

Nor do the Glyphicons used by Bootstrap; proof: http://jsbin.com/conerepu/2

Just because their sites require JavaScript, that doesn't mean the icons do.

OTHER TIPS

Okay, it looks like the Firefox add-on "NoScript" caused the problem. After removing it and disabling JavaScript in FF itself, everything works fine.

That wasn't really the answer I was hoping for because a lot of people use NoScript and I don't want to present them with a website full of broken icons, so I'm going to leave the icons out for now. But atleast I know what caused the problem now :/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top