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
<i class="icon-search"></i> In bootstrap 3.0, it's not working.
9 Answers
The icons (glyphicons) are now contained in a separate css file...
The markup has changed to:
<i class="glyphicon glyphicon-search"></i> or
<span class="glyphicon glyphicon-search"></span> Here is a helpful list of changes for Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide
8 Comments
Shivang Gupta
Hi all,I have done the same and followed up the structure but not getting the correct glyphicon...An unidentified 0101 type image is shown instead of glyphicon
Carol Skelly
Can you show your code that include the bootstrap and glyphicons CSS? Are you seeing any errors in the browser console?
Carol Skelly
Just make sure you're including the glyphicons.css correctly. It should work fine: bootply.com/61521
Shivang Gupta
i have added this properly...the structure is css/fonts/....,css/less/...,css/bootstrap.min.css and in bootstrap.min.css i have included @import "less/bootstrap-glyphicons.less";
Trevi Awater
The separate css file link seems to be broken.
|
There you go:
<i class="glyphicon glyphicon-search"></i> More information:
http://getbootstrap.com/components/#glyphicons
Btw. you can use this conversion tool, this will also update the code for the icons:
1 Comment
Fernando Kosh
Bootply Migration save a lot of time converting code to TWB 3. Very useful, @Michael / Buhake-Sindi.
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
fontsto 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 
1 Comment
Devner
This works perfectly fine (Jan 2016). Thanks for sharing!
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.
Comments
Bootstrap 3 requires span tag not i
<span class="glyphicon glyphicon-search"></span>` 
Comments
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,
<span class="glyphicon glyphicon-ok"></span>
1 Comment
Shivang Gupta
Hi all,I have done the same and followed up the structure but not getting the correct glyphicon...An unidentified 0101 type image is shown instead of glyphicon
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 }] } }, 
Comments
Download all files from bootstrap and then include this css
<style type="text/css"> @font-face { font-family: 'Glyphicons Halflings'; src: url('/fonts/glyphicons-halflings-regular.eot'); } </style> 
Comments
This might help. It contains many examples which will be useful in understanding.
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
1 Comment
kleopatra
Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.
solutions, no one works for me.