How to use glyphicons in bootstrap 3 0

Question

I have already used glyphicons in bootstrap 2 3 but now I have upgraded to bootstrap 3 0  Now  I am unable to use the icon property   In bootstrap 2 3  below tag is working   lt i class  icon-search  gt  lt  i gt    In bootstrap 3 0  it s not working

User · Answer

There you go    lt i class  glyphicon glyphicon-search  gt  lt  i gt    More information   http   getbootstrap com components  glyphicons  Btw  you can use this conversion tool  this will also update the code for the icons

User · Answer

Bootstrap 3 requires span tag not i   lt span class  glyphicon glyphicon-search  gt  lt  span gt

User · Answer

Download all files from bootstrap and then include this css    lt style type  text css  gt           font-face               font-family   Glyphicons Halflings               src  url   fonts glyphicons-halflings-regular eot                lt  style gt

User · Answer

Include the fonts Copy over all the font files to a  fonts directory near your CSS    Include the CSS or LESS You have two options for enabling the fonts in your project  vanilla CSS or source LESS  For vanilla CSS  just include the compiled CSS file from the  css in the repository  For LESS  copy over the  less files from  less into your existing Bootstrap directory  Then import it into bootstrap less via  import  bootstrap-glyphicons less    Recompile when ready  Add some icons  After you ve added the fonts and CSS  you can get to using the icons  For example   lt span class  glyphicon glyphicon-ok  gt  lt  span gt    source

User · Answer

If yout download a customized bootstrap 3 distro you must    Download the full distro from  https   github com twbs bootstrap archive v3 0 0 zip Uncompress and upload the entire folder called fonts to your bootstrap directory   Put together with the other folders  css  js     Example Before    css  js index html   Example After Upload    css  fonts  js index html

User · Answer

If you re using less   and it s not loading the icons font you must  check out the font path go to the file variable less and change the  icon-font-path path   that worked for me

User · Answer

If you are using grunt to build your application  it s possible that during build the paths change  In this case you need to modify your grunt file like this   copy            main                files                     src    fonts                       dest   dist fonts                    filter   isFile                   expand  true                  flatten  true                                  src    bower components font-awesome fonts                       dest   dist css                    filter   isFile                   expand  true                  flatten  false

User · Answer

The icons  glyphicons  are now contained in a separate css file     The markup has changed to    lt i class  glyphicon glyphicon-search  gt  lt  i gt    or   lt span class  glyphicon glyphicon-search  gt  lt  span gt    Here is a helpful list of changes for Bootstrap 3  http   bootply com bootstrap-3-migration-guide

User · Answer

This might help  It contains many examples which will be useful in understanding   http   www w3schools com bootstrap bootstrap ref comp glyphs asp

[html] How to use glyphicons in bootstrap 3.0

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3