文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 3.2.0 Glyphicons不工作

问Bootstrap 3.2.0 Glyphicons不工作
EN

Stack Overflow用户

提问于 2014-08-24 05:24:40

回答 3查看 10.1K关注 0票数 4

我刚接触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>

css

twitter-bootstrap-3

glyphicons

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-08-24 05:32:07

您需要添加类glyphicon。

所以你的跨度实际上应该是：

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

如文档所示：http://getbootstrap.com/components/#glyphicons-how-to-use

票数 11

Stack Overflow用户

发布于 2014-08-24 05:35:28

仅命名字形是不够的，还必须使用类glyphicon。

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

另外，如果您在Opera移动仿真器中使用此工具，请务必小心。它不支持这些字体，所以你会得到一个空白的方块。

票数 2

Stack Overflow用户

发布于 2015-01-13 21:23:23

按照以下步骤在您的引导项目中使用Glyphicons图标：

将最近从http://getbootstrap.com下载的字体文件夹和示例

的以下代码添加到项目中

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

谢谢!

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25466519

复制

相似问题

问Bootstrap 3.2.0 Glyphicons不工作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3.2.0 Glyphicons不工作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3.2.0 Glyphicons不工作
EN