Glyphicon file download

I'm trying to resolve an issue we're running into with Twitter Bootstrap's Glyphicons. In our dev environments and our machines work fine. The problem is when the client tries to view our code. They are forced to have IE network policies that are not allowing the download of the glyphicon's font files. I can tell this is the case because I am checking out the network tab in the IE debugger and it shows it can't download the font file.

I was wondering if there are any alternatives besides somehow extracting the images and using img tags instead. If the latter is the only solution, does anyone have the best way to accomplish this? We know they are there since all other environments are able to see the icons. Thanks for all the responses. It seems that the only way around this was in fact to use images of my own. I was able to minimize code impact by just replacing the bootstrap css :before that was inserting the glyphicon characters and just replace that with styling on the background of the span element using images that someone posted online of the glyphs.

If anyone is interested for each glyph I was using I replaced the commented out code below with the inserted class and this seems to solve my issue. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.

If you're using an icon to convey meaning rather than only as a decorative element , ensure that this meaning is also conveyed to assistive technologies — for instance, include additional content, visually hidden with the.

In this case, you could add an aria-label attribute on the control itself. An icon used in an alert to convey that it's an error message, with additional. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements.

If you'd like more detail, please check out Jan's licensing page. So, how do I add an icon to my webpage? Well, Glyphicons can be used on the web in one of three ways. Icon classes shouldn't be combined with other elements in Bootstrap.

They're designed to be standalone. Firstly, the CSS rule. This method works by including the rendering of the icon before the content using the :before CSS psuedo-element.

Firstly, the web-font is specified with font-family , and then the icon is specified by using the content property alongside a unicode hex entity in this case, f To add this icon to a page, add this HTML tag anywhere in the body of your page. Note: This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks like Wordpress or Moodle theme development, for example.

You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action:. Want more info on the Glyphicons in Bootstrap 3?