logo标签列表

Bootstrap 3.2.0图标无法正常显示

csstwitter-bootstrap-3glyphicons
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>
3个回答
11
3
如果楼主花了10秒钟阅读文档，他就会知道这一点。+1 - j08691
谢谢，非常抱歉我的问题不够仔细。 - Thant Sin Aung
3

仅仅给字形命名是不够的，您还需要使用类 glyphicon。

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

此外，如果您在Opera移动模拟器中使用此功能，请注意。它无法正确支持这些字体，因此您将看到一个空白的正方形。

0

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

  1. 从http://getbootstrap.com最近下载的文件中添加字体文件夹到您的项目中，并使用下面的示例代码

<span class="glyphicon glyphicon-user"></span>
enter image description here

谢谢！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接