Bootstrap glyphicon错误:square而不是icon

时间:2014-10-06 13:48:31

标签: javascript jquery html css twitter-bootstrap-3

我正在尝试建立响应式网站。为此,我使用Bootstrap 3.我已经下载了Bootstrap 3并导入到我的网站根目录:

folder

我不知道为什么,但在小屏幕上它没有显示我的图标:

icon

我的代码:

<!DOCTYPE html>

<html lang="lt">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/styles.css">

    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
    <script src="../js/script.js"></script>

    <title>
        title
    </title>

</head>

<body>

    <header class="top" role="header">
        <div class="container">
            <a href="../aplikacija/app.html" class="navbar-brand pull-left">
                Application
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon-align-justify"></span>
            </button>
            <nav class="navbar-collapse collapse" role="navigation">
                <ul class="navbar-nav nav">
                    <li><a href="../aplikacija/app.html">APP</a></li>
                    <li><a href="../ux/ux.html">UX</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="app" class="content">

    </div>

</body>

</html>

2 个答案:

答案 0 :(得分:4)

您的glyphicon span应该包含以下类:glyphicon glyphicon-align-justify而不仅仅是glyphicon-align-justify

答案 1 :(得分:0)

我建议不要在span中使用align justify作为类 - 只需显示glyphicon,然后在外部div中对其进行对齐。

<div class="text-justify">
     <span class="glyphicon glyphicon-align-justify"></span> 
</div>

这里有更多信息 - http://getbootstrap.com/components/#glyphicons-how-to-use