[html] How to use glyphicons in bootstrap 3.0

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.

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

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

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

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

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>

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.

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:

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

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
            }]
        }
    },

Bootstrap 3 requires span tag not i

<span class="glyphicon glyphicon-search"></span>`