CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Shivang Gupta
Shivang Gupta

Reputation: 3339

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.

Upvotes: 86

Views: 254312

Answers (9)

User_3535
User_3535

Reputation: 862

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>

Upvotes: 2

Mushu
Mushu

Reputation: 41

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

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

Upvotes: 0

TheNiceGuy
TheNiceGuy

Reputation: 3730

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:

Upvotes: 29

Anke Wenz
Anke Wenz

Reputation: 415

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

Upvotes: 2

stranger4js
stranger4js

Reputation: 267

Bootstrap 3 requires span tag not i

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

Upvotes: 4

alejandro
alejandro

Reputation: 2847

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.

Upvotes: 6

Emiliano D&#237;az
Emiliano D&#237;az

Reputation: 694

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

Upvotes: 19

Carol Skelly
Carol Skelly

Reputation: 362780

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

Upvotes: 108

Mark Anthony Uy
Mark Anthony Uy

Reputation: 229

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

Upvotes: 3

Related Questions