4

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>

3 Answers 3

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

2
  • 3
    If the OP spent 10 seconds reading the documentation he'd have known this. +1
    – j08691
    Commented Aug 23, 2014 at 21:33
  • Thanks, so sorry for my careless question. Commented Aug 23, 2014 at 21:41
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.

0

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

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

<span class="glyphicon glyphicon-user"></span>
enter image description here

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.