Bootstrap 3 unable to display glyphicon properly

Question

I am migrating from bootstrap 2 3 to bootstrap 3 and everything works well  But when I tried to add some icons  the icon font doesn t displayed properly  I tried to look over here http   bootply com 61521 and only   glyphicon-envelope  was being displayed properly  Others have displayed like  E001  and so on   How can I be able to solve this problem   For other browsers  glyphicons are displayed properly  only firefox was unables to display it properly

User · Answer

Just in case    For example  I just tryed  lt span class  icones glyphicon glyphicon-pen  gt  and after one hour i realized that this icon was not included in the bootstrap pack    While the enveloppe icon was working fine    Hope this helps

User · Answer

As others have noted  there are some issues with the customizer   I was having troubles with the glyphicons not showing either  as well as issues with the navbar layout   I used the suggestion and uploaded the fonts from the full zip overwrote the ones from the customized version and that fixed the icons issues   I also pulled in the CDN CSS and javascript instead of my local copy from the CDN  This fixed my navbar issues   So I recommend until you get the hang of Bootstrap  not to use the customized version since you might get some frustrating  unwanted results

User · Answer

Try using CDN Try setting Access-Control-Allow-Origin HTTP Header

User · Answer

I ended up switching to Font-Awesome Icons  They are just as good if not better  and all you need to do is link in the font  happy days

User · Answer

OK  my problem was not answered by the above  I had the fonts folder at the same location as the bootstrap css and js folders  eg  theme bootstrap3      but it was looking for the font folder in the root  eg  fonts glyph    woff   The solution for me was to set the  icon-font-path variable to the correct relative path   Eg  icon-font-path     fonts

User · Answer

First of all  I try to install the glyphicons fonts by the  oficial  way  with the zip file  I could not do it   This is my step-by-step solution    Go to the web page of Bootstrap and then to the  Components  section  Open the browser console  In Chrome  Ctrl Shift C  In section Resources  inside Frames getbootstrap com Fonts you will find the font that actually is running the glyphicons  It s recommended to use the private mode to evade cache  With URL of the font file  right-click on the file showed on resources list   copy it in a new tab  and press ENTER  This will download the font file  Copy another time the URL in a tab and change the font extension to eot  ttf  svg or woff  ass you like    However  for a more easy acces  this is the link of the woff file    http   getbootstrap com dist fonts glyphicons-halflings-regular woff

User · Answer

the icons and the css are now seperated out from bootstrap   here is a fiddle that is from another stackoverflow answer   import url    netdna bootstrapcdn com bootstrap 3 0 0-rc2 css bootstrap-glyphicons css      http   jsfiddle net aQrPd 1   Bootstrap 3 Glyphicons CDN

User · Answer

I had the same problem using a local apache server  This solved my problem   http   www ifusio com blog firefox-issue-with-twitter-bootstrap-glyphicons  For Amazon s3 you need to edit your CORS configuration    lt CORSConfiguration gt       lt CORSRule gt           lt AllowedOrigin gt   lt  AllowedOrigin gt           lt AllowedMethod gt GET lt  AllowedMethod gt           lt MaxAgeSeconds gt 3000 lt  MaxAgeSeconds gt           lt AllowedHeader gt Authorization lt  AllowedHeader gt       lt  CORSRule gt   lt  CORSConfiguration gt

User · Answer

you can use  tag like this    lt i class  fa fa-edit  gt  lt  i gt

User · Answer

make sure the name of the folder that contains the font name is  fonts  not  font

User · Answer

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 try a strong reload  CTRL   F5   hope it helps

User · Answer

Here s the fix that worked for me  Firefox has a file origin policy that causes this  To fix do the following steps    open about config in firefox Find security fileuri strict origin policy property and change it from    true    to    false     Voial  you are good to go    Details  http   stuffandnonsense co uk blog about firefoxs file uri origin policy and web fonts  You will only see this issue when accessing a file using file     protocol

User · Answer

This is the official documentation supporting the above answers    Changing the icon font location Bootstrap assumes icon font files will be located in the    fonts  directory  relative to the compiled CSS files  Moving or renaming those font files means updating the CSS in one of three ways   Change the  icon-font-path and or  icon-font-name variables in the source Less files  Utilize the relative URLs option provided by the Less compiler  Change the url   paths in the compiled CSS  Use whatever option best suits your specific development setup     Other than this one mistake the new users would do is  after downloading the bootstrap zip from the official website  They would tend to skip the fonts folder for copying in their dev setup  So missing fonts folder can also lead to this problem

User · Answer

For me placing my fonts  folder as per location specified in bootstrap css solved the problem  Mostly its  fonts  folder should be in parent directory of bootstrap css file    I faced this problem   and researching  many answers   if anyone still in 2015 faces this problem then its either a CSS problem   or location mismatch for files    The bug has already been solved  by bootstrap

[css] Bootstrap 3 unable to display glyphicon properly

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to glyphicons