Bootstrap 3.2.0 Glyphicons not working

I'm new to bootstrap and its glyphicons don't work for me. After checking the code font-family

glyphicon-user

was "Helvetica Neue",​Helvetica,​Arial,​sans-serif

, not Glyphicons Halflings

. Am I missing something or I need to modify the file css

.

<!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


source to share


3 answers


You need to add a class glyphicon

.

So your range should be:



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

      

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

+10


source


It's not enough to name the glyph, you also need to use the class glyphicon

.

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

      



Also, be careful if you use this in the Opera mobile emulator. It doesn't support these fonts correctly, so you'll end up with an empty square.

+2


source


Follow the instructions for working with Glyphicons icons in boostrap project:

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

Run codeHide result


enter image description here

Thank!

0


source







All Articles