引导字形图标未加载答案

【问题标题】：Bootstrap glyphicons not loading引导字形图标未加载
【发布时间】：2018-05-29 22:07:19
【问题描述】：

这个问题之前已经被问过几次了，但我从来没有见过我现在所处的这种情况。

我正在使用codeigniter 框架和bootstrap 作为前端框架来制作网站。因此，我的项目树大致是这样的

MyProject/
├── application/
├── system/
└── assets/
    └── bootstrap
        ├── css/
        │   └── bootstrap.min.css
        └── fonts/
            ├── glyphicons-halflings-regular.eot
            ├── glyphicons-halflings-regular.svg
            ├── glyphicons-halflings-regular.ttf
            ├── glyphicons-halflings-regular.woff
            └── glyphicons-halflings-regular.woff2

bootstrap.min.css 使用 font-face 包含这些字体，如下所示：

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('/assets/bootstrap/fonts/glyphicons-halflings-regular.eot');
    src: url('/assets/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
         url('/assets/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), 
         url('/assets/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
         url('/assets/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

由于某种原因，css 似乎只是跳过了整个部分，因为字体不仅不起作用，而且它们也没有显示在部分网络下的 chrome 的developer tools 中。它甚至没有显示错误，甚至不存在。

我该如何解决这个问题？

编辑 1 我注意到src 的url 不正确，但这只是一个小错误，因为这与错误未显示在chrome 的developer tools 中这一事实无关。

编辑 2 经过多次尝试，我注意到它在非常基本的 html 中也不起作用，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello</title>

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
        <p><span class="glyphicons glyphicons-search"></span> Hello</p>
    </body>
</html>

然后我开始研究更多这种奇怪的行为，并偶然发现了这个链接，其中指出在 v4.0 中，字形图标已从引导程序中删除。这就是为什么我认为所有字形图标都从引导程序中删除了。

如果你认为我错了，看到我犯的错误，请回复。

【问题讨论】：

标签： css twitter-bootstrap codeigniter twitter-bootstrap-3

【解决方案1】：

您如何在 HTML 中包含字体？您需要将元素放置到字体 before 要引导的元素或用于包含这些字体的任何 CSS。

您可以在 Mozilla 的guide to using web fonts 上阅读更多信息。查看标题“使用在线字体服务”（特别是#5）。当您自己包含文件时，以正确顺序正确包含文件的原则。

编辑：回顾它后，我想我已经看到了这个问题。查看 src url，看起来 bootstrap CSS 期望 fonts 文件夹位于 assets 目录中，而不是 bootstrap 目录中。因此，您要么需要将 fonts 文件夹移动到 assets 目录，要么将引导程序中的 src url 更改为包含 assets/bootstrap/fonts/。

【讨论】：

你的意思是我必须在我自己页面的css 之前包含引导程序的css 吗？
@VellosFree 我很抱歉，我刚刚意识到我的回答有误，但回头看我想我已经看到了这个问题。查看 src url，看起来引导 CSS 期望 fonts 文件夹位于 assets 目录中，而不是 bootstrap 目录中。因此，您要么需要将字体文件夹移动到资产目录，要么将引导程序中的 src url 更改为包含 assets/bootstrap/fonts/。
这是我发现的一个小错误，但仍然可以解决问题。问题是在 chrome 的 developer tools 内部没有显示关于错误 url 的错误，如果我在图像 url 中犯了错误，它会显示。

【解决方案2】：

这可能是一个小错误，但它不应该是：glyphicon glyphicon-search

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello</title>

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
        <p><span class="glyphicon glyphicon-search"></span> Hello</p>
    </body>
</html>

请注意，您在 glyphicon 之后添加了一个额外的“s”...不是 glyphicons，它是 glyphicon...

【讨论】：

老实说，我不知道我是否应该感谢你，因为一方面你确实帮助了我，但你也让我觉得自己像个笨蛋。还是谢谢！
我会接受赞美的！ :D 犯错是人之常情，有些……;)