Bootstrap glyphicons没有加载

问题描述 投票:1回答:2

这个问题之前已被问过几次,但我从未见过我现在所处的这种情况。

我正在建立一个使用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我注意到srcurl不正确,但这只是一个小错误,因为这与错误没有在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中,glyphicons从bootstrap中删除。这就是为什么我认为glyphicons一起从bootstrap中删除。

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

css twitter-bootstrap codeigniter twitter-bootstrap-3
2个回答
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 ......


0
投票

你是如何在HTML中包含字体的?您需要在元素引导之前将元素放置到字体之前,或者使用任何CSS来包含这些字体。

你可以在Mozilla的guide to using web fonts上阅读更多内容。请在“使用在线字体服务”标题下查找(具体为#5)。虽然您自己包含文件,但正确顺序包含文件的原则。

编辑:回顾过去之后,我想我已经看到了这个问题。查看src网址,看起来bootstrap CSS期望fonts文件夹位于assets目录中,而不是bootstrap目录。因此,您需要将fonts文件夹移动到assets目录,或者更改bootstrap中的src URL以包含assets/bootstrap/fonts/

© www.soinside.com 2019 - 2024. All rights reserved.