Bootstrap 3中的字形图标不起作用答案

【问题标题】：Glyphicons in Bootstrap 3 don't workBootstrap 3中的字形图标不起作用
【发布时间】：2015-07-30 19:37:07
【问题描述】：

我知道以前有人问过这个问题，但找不到任何关于如何解决我的问题的具体信息。

我之前做过一个 MVC 项目，其中字形图标工作得很好。

我在另一个不工作的项目中。但是，我从其他人那里接手的这个项目是一个网络表单 项目。我查看了源代码，图标上有 span 标签，但它们没有显示在按钮上。似乎也一切就绪。

字形的图标存在于字体目录中。

有人可以告诉我我可能缺少什么吗？

编辑：在不显示字形图标的地方发布代码。

这是两个按钮的代码，“Stop”和“Penalize”。

<div class="col-md-4">
                                                <button class="btn btn-primary" id="btnStop"><span class="glyphicon glyphicon-stop"></span>Stop</button>
                                                <button class="btn btn-warning" id="btnPenalize"><span class="glyphicon glyphicon-exclamation-sign"></span>Penalize</button>

                                            </div>

这是两个不显示字形图标的按钮的屏幕截图：

编辑 #2 - Firefox 的按钮

您可以在第一张图片中看到使用 IE。在第二张图片中，您可以看到字形图标尝试出现在 Firefox 中，但只是空方块。

这是所有链接的母版页代码...

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="../Content/lib/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/lib/assets/css/datepicker.css" rel="stylesheet" />
    <link href="../Content/assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/assets/css/ace-fonts.css" rel="stylesheet" />
    <link href="../Content/assets/css/ace.min.css" rel="stylesheet" />
    <link href="../Content/assets/css/ace-skins.min.css" rel="stylesheet" />
    <link href="../Content/assets/css/ace-rtl.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-switch/bootstrap2/bootstrap-switch.min.css" rel="stylesheet" />
    <%--<link href="../Content/lib/assets/css/styling-02.css" rel="stylesheet" />--%>
    <link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <%--<link href="../Content/lib/assets/css/ui.jqgrid.css" rel="stylesheet" />--%>
    <link rel="../content/lib/assets/css/ace-skins.min.css" />
    <link rel="../content/lib/assets/css/ace-rtl.min.css" />
    <link href="../Content/lib/assets/css/js-css-menu.css" rel="stylesheet" />
    <link href="../Content/lib/assets/css/js-css-menu.min.css" rel="stylesheet" />

            <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../Content/assets/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="../Content/assets/css/datepicker.css" />
    <link rel="stylesheet" href="../Content/assets/css/ui.jqgrid.css" />

    <style type="text/css">
        .auto-style3
        {
            left: 0px;
            top: 7px;
        }
    </style>
<%-- main page styling  --%>
    <link href="../Content/ryder/css/ryder.css" rel="stylesheet" />

    <script src="../Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <script src="../Scripts/knockout-3.1.0.debug.js"></script>
    <script src="../Content/lib/assets/js/bootstrap.min.js"></script>
    <script src="../Content/lib/assets/js/bootbox3/bootbox.min.js"></script>
    <script src="../Scripts/modernizr-2.6.2.min.js"></script>
    <script src="../Scripts/ryder/scripts.js"></script>
    <script src="../Scripts/ryder/hidden-navs.js"></script>
    <script src="../Scripts/ryder/telerik-controls.js"></script>
    <script src="../Scripts/grid.locale-en.min.js"></script>
    <script src="../Content/assets/js/ace-extra.min.js"></script>

    <%--<script src="Scripts/jquery.jqGrid.min.js"></script>--%>
    <script src="../Content/lib/assets/js/jquery.jqGrid.min.js"></script>
    <script src="../Scripts/json2.min.js"></script>
    <script src="../Content/lib/assets/js/bootstrap-datepicker.min.js"></script>

    <script src="../Scripts/Common.js"></script>
    <script src="../Scripts/DataServices/StopPenalize.js"></script>
    <script src="../Scripts/DataServices/CreditSourceDocs.js"></script>

【问题讨论】：

你能发布一个代码 sn-p 说明其中一个图标不起作用吗？
您的目录结构与字体所在的位置不同。 css 使用相对路径“../fonts/”，您的 bootstrap.min.css 文件在字体目录中向上寻找一层，在字体目录之前有很多层
khilley，我发布了代码和屏幕截图，其中字形图标没有出现在我的编辑中。

标签： twitter-bootstrap webforms glyphicons

【解决方案1】：

我想你错过了 /fonts 的链接，你也试过在另一个资源管理器中测试它吗？

【讨论】：

您能发布一下您是如何使用 glyphicon 的吗？
Esteban，我发布了代码和屏幕截图，其中字形图标没有出现在我的编辑中。
在我运行良好的 MVC 应用程序中，bundleconfig 文件中没有字体链接。

【解决方案2】：

下载引导程序时，您还应该下载一个名为 fonts 的文件夹。您一定错过了这一点，因为这就是解决我的页面问题的原因。文件夹“字体”应位于页面的主目录中。我希望这能解决您的问题。

【讨论】：