Bootstrap 3.2.0 Glyphicons 不工作
Posted
技术标签:
【中文标题】Bootstrap 3.2.0 Glyphicons 不工作【英文标题】:Bootstrap 3.2.0 Glyphicons not working 【发布时间】:2014-10-17 11:00:55 【问题描述】:我是 bootstrap 的新手,它的字形图标不适合我。在我检查了代码之后,glyphicon-user
的 font-family
是 "Helvetica Neue",Helvetica,Arial,sans-serif
而不是 Glyphicons Halflings
。我是否遗漏了什么或者我需要更改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>
【问题讨论】:
【参考方案1】:你需要添加类glyphicon
。
所以你的跨度实际上应该是:
<span class="glyphicon glyphicon-user"></span>
如文档所示:http://getbootstrap.com/components/#glyphicons-how-to-use
【讨论】:
如果 OP 花 10 秒钟阅读文档,他就会知道这一点。 +1 谢谢,很抱歉我的粗心问题。【参考方案2】:仅仅命名字形是不够的,你还必须使用类glyphicon
。
<span class="glyphicon glyphicon-user"></span>
另外,如果您在 Opera 移动模拟器中使用它,请注意。它不能正确支持这些字体,所以你会得到一个空白方块。
【讨论】:
【参考方案3】:按照步骤在您的 boostrap 项目中使用 Glyphicons 图标:
-
将最近从http://getbootstrap.com 下载的字体文件夹添加到您的项目中,以及下面的示例代码
<span class="glyphicon glyphicon-user"></span>
谢谢!
【讨论】:
以上是关于Bootstrap 3.2.0 Glyphicons 不工作的主要内容,如果未能解决你的问题,请参考以下文章
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-star
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-heart
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-tags
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-repeat
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-share
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-tag