Question

此问题曾被问过几次，但我从未见过这种情况。

我正在使用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＆中显示的事实有任何关系＃39; s 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中，glyphicons从bootstrap中删除。这就是为什么我认为glyphicons一起从bootstrap中删除。

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

Answer 1

这可能是一个小错误，但不应该是：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 ......

Answer 2

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

您可以阅读有关Mozilla guide to using web fonts的更多信息。请查看标题＆＃39;使用在线字体服务＆＃39; （特别是＃5）。当您自己包含文件时，正确地按正确顺序包含文件的原则。

编辑：回头看之后，我想我已经看到了这个问题。查看src网址，看起来引导CSS期望$store_id文件夹位于fonts目录中，而不是引导程序目录。因此，您需要将assets文件夹移动到fonts目录，或者更改bootstrap中的src网址以包含assets。

Bootstrap glyphicons没有加载

2 个答案: