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>
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
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.
Follow the instructions for working with Glyphicons icons in boostrap project:
- add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample
Thank!