86

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.

Buhake Sindi
  • 87,898
  • 29
  • 167
  • 228
Shivang Gupta
  • 3,139
  • 1
  • 25
  • 24
  • 1
    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 – Shivang Gupta Aug 13 '13 at 10:41
  • Thanks,actually the problem was that i was using .less file directly without converting it to css...oops – Shivang Gupta Aug 13 '13 at 11:56
  • For version 3.0.0, it **breaks** by defaults. Tried a few `solutions`, no one works for me. – Andrew_1510 Oct 16 '13 at 11:09
  • I'm seeing this issue using .less file directly using less.js. Of course, in that situation, I would also like to see it work – Marc Dec 24 '13 at 14:01

9 Answers9

108

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 5
    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 – Shivang Gupta Aug 13 '13 at 10:42
  • Can you show your code that include the bootstrap and glyphicons CSS? Are you seeing any errors in the browser console? – Carol Skelly Aug 13 '13 at 10:51
  • Just make sure you're including the glyphicons.css correctly. It should work fine: http://bootply.com/61521 – Carol Skelly Aug 13 '13 at 11:16
  • 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"; – Shivang Gupta Aug 13 '13 at 11:36
  • Thanks,actually the problem was that i was using .less file directly without converting it to css...oops – Shivang Gupta Aug 13 '13 at 11:55
  • This was extremely helpful! The part that solved my issue was adding the glyphicon class before the glyphicon-(icon) class. I didn't know they had to have both but now I do! – Derek Webb Mar 02 '15 at 04:10
  • 17
    The separate css file link seems to be broken. – Trevi Awater Apr 04 '15 at 09:22
  • It was only relevant for Bootstrap 3.0.. releases after 3.1 included the glyphicons in the CSS again. – Carol Skelly Mar 24 '16 at 12:02
29

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:

TheNiceGuy
  • 3,462
  • 8
  • 34
  • 64
19

If yout download a customized bootstrap 3 distro you must:

  1. Download the full distro from https://github.com/twbs/bootstrap/archive/v3.0.0.zip
  2. 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
Emiliano Díaz
  • 674
  • 7
  • 14
6

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.

alejandro
  • 2,799
  • 1
  • 17
  • 25
4

Bootstrap 3 requires span tag not i

<span class="glyphicon glyphicon-search"></span>`
stranger4js
  • 269
  • 4
  • 15
3

Include the fonts Copy over all the font files to a /fonts directory near your CSS.

  1. 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.
  2. 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.
  3. 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>

source

Mark Anthony Uy
  • 219
  • 3
  • 6
  • 1
    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 – Shivang Gupta Aug 13 '13 at 10:46
3

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
            }]
        }
    },
Anke Wenz
  • 425
  • 6
  • 9
2

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>
User_3535
  • 826
  • 1
  • 13
  • 30
0

This might help. It contains many examples which will be useful in understanding.

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

Mushu
  • 41
  • 1
  • 6
  • Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) 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. – kleopatra Sep 21 '15 at 09:10