How to use glyphics in bootstrap 3.0

Question

I already used glyphics in bootstrap 2.3, but now I upgraded to bootstrap 3.0. Now I can not use the icon property.

In bootstrap 2.3 below the tag works

<i class="icon-search"></i> 

In bootstrap 3.0, it does not work.

Answer 1

Icons (glyphics) 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> 

The following is a useful list of changes for Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Answer 2

There you go:

 <i class="glyphicon glyphicon-search"></i> 

Additional Information:

http://getbootstrap.com/components/#glyphicons

Btw. you can use this tool, it will also update the code for the icons:

Answer 3

If you download a customized bootstrap 3 distribution, you should:

• Download the full distribution from https://github.com/twbs/bootstrap/archive/v3.0.0.zip
• Expand and upload the entire folder called fonts to your download directory. Put together with other folders "css, js".

Example to:

 \css \js index.html 

Example after loading:

 \css \fonts \js index.html 

Answer 4

If you use less and do not download the font of the icons, you should check the font path, go to variable.less and change the path @ icon-font-path that worked for me.

Answer 5

Bootstrap 3 requires a span tag, not i

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

Answer 6

Include Fonts Copy all font files to the / fonts directory next to your CSS.

• Enable CSS or LESS You have two options for including fonts in your project: vanilla CSS or the source of LESS. For vanilla CSS, just include the compiled CSS file from / css in the repository.
• For LESS, copy the .less files from / less into the existing Bootstrap directory. Then import it into bootstrap.less via @import "Bootstrap-glyphicons.less"; . Recompile when you are ready.
• Add some badges! Once you have added fonts and CSS, you can using the icons. For example, <span class="glyphicon glyphicon-ok"></span>

source

Answer 7

If you use grunt to build your application, it is possible that the path changes during build. In this case, you need to modify your grunt file as follows:

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

Answer 8

Download all files from bootstrap and then enable this css

 <style type="text/css"> @font-face { font-family: 'Glyphicons Halflings'; src: url('/fonts/glyphicons-halflings-regular.eot'); } </style> 

Answer 9

This can help. It contains many examples that will be helpful in understanding.

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