Firefox has a strict setting(this) that prevents your HTML file from accessing your web fonts from folders not on the root. This only happens when you work locally and not from files on a server. You have to change a setting in Firefox to display the glyphicons when you develop locally. -open “about:config” in your … Read more
FULL CSS SOLUTION I have written a CSS print stylesheet solution that should solve 80-90% of this problem occurring for sites that require the icons(glyphicons) from bootstrap to show up when printing without requiring the user to turn on “print background images” in their browser and this solution will work in ALL major browsers(Chrome, Safari, … Read more
This process might be one option. You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set. When you are … Read more
Don’t use i. The i element has a meaning which isn’t appropriate for general icons: […] a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another … Read more
Did you choose the customized version of Bootstrap? There is an issue that the font files included in the customized package are broken (see https://github.com/twbs/bootstrap/issues/9925). If you do not want to use the CDN, you have to download them manually and replace your own fonts with the downloaded ones: https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot After that … Read more
I was having the same issue and couldn’t find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren’t displaying properly. I’m making this an answer so it will hopefully help others. Something was wrong with the font files … Read more
Migrating from Glyphicons to Font Awesome is quite easy. Include a reference to Font Awesome (either locally, or use the CDN). <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”> Then run a search and replace where you search for glyphicon glyphicon- and replace it with fa fa-, and also change the enclosing element from <span to <i. Most of the … Read more
Without Bootstrap: We’ll get to Bootstrap in a second, but here’s the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn’t … Read more