Bootstrap glyphicon 错误：正方形而不是图标答案

【问题标题】：Bootstrap glyphicon error: square instead of iconBootstrap glyphicon 错误：正方形而不是图标
【发布时间】：2014-10-07 17:21:55
【问题描述】：

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

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

我的代码：

<!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>

【问题讨论】：

hm，当您使用 css 重置时，应该首先加载 css 文件。 Bootstrap 有自己的“重置” normalize.css
如果直接从 bootstrap CDN 链接 css 是否有效：
我将 reset.css 移至 css 声明的顶部。但这并不能解决我的问题...
我已经尝试过引导 CDN。还是不行。
查看 devtools 中的网络选项卡，如果所有文件都正确加载

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

【解决方案1】：

您的 glyphicon span 应具有以下类：glyphicon glyphicon-align-justify 而不是 glyphicon-align-justify

【讨论】：

【解决方案2】：

我建议不要在跨度中使用对齐对齐作为一个类 - 只需显示字形图标，然后在外部 div 中对齐它。

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

【讨论】：

刚刚意识到您正在尝试使用图标对齐对齐而不是对齐 glyicon :P 正如詹姆斯国王所说 - 您只是在跨度类中犯了一个错误。
是的，但这只是设计问题。可以说我只需要制作布局符号。应该可以用吧？