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 下载的字体文件夹添加到您的项目中，以及下面的示例代码 

&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;

谢谢！

【讨论】：

以上是关于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