Bootstrap 3.2.0 Glyphicons not working

Question

I'm new to bootstrap & its glyphicons are not working for me. After I've inspect the code, font-family of glyphicon-user was "Helvetica Neue",Helvetica,Arial,sans-serif & not Glyphicons Halflings. Am I missing something or do i need to change the css file.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
    <div class="row">
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon-user"></span>
                </span>
                <input type="text" class="form-control" placeholder="Username"/>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Amount">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" placeholder="US Dollar">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
    </div>
</form>
</body>
</html>

score 11 · Accepted Answer · edited Aug 23 '14 at 21:33

11

You need to add the class glyphicon.

So your span should actually be:

<span class="glyphicon glyphicon-user"></span>

As shown in the documentation: http://getbootstrap.com/components/#glyphicons-how-to-use

edited Aug 23 '14 at 21:33

Tieson T.

20,774
6
77
92

answered Aug 23 '14 at 21:32

Catalin MUNTEANU

5,618
2
35
43

3

If the OP spent 10 seconds reading the documentation he'd have known this. +1 – j08691 Aug 23 '14 at 21:33
Thanks, so sorry for my careless question. – Thant Sin Aung Aug 23 '14 at 21:41

score 3 · Answer 2 · edited Feb 11 '15 at 13:26

3

It's not enough to name the glyph, you have to use the class glyphicon too.

<span class="glyphicon glyphicon-user"></span>

Also, beware if you are using this in Opera mobile emulator. It doesn't support these fonts properly so you'll get a blank square.

edited Feb 11 '15 at 13:26

codenighter

348
1
4
11

answered Aug 23 '14 at 21:35

TSK007

41
2

score 0 · Answer 3 · answered Jan 13 '15 at 13:23

0

Follow the steps to work Glyphicons icons in your boostrap project:

add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample

<span class="glyphicon glyphicon-user"></span>

Thanks!

answered Jan 13 '15 at 13:23

Mohd Abdul Baquee

439
3
7

Bootstrap 3.2.0 Glyphicons not working

3 Answers3

Linked