这个问题之前已被问过几次,但我从未见过我现在所处的这种情况。
我正在建立一个使用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中,glyphicons从bootstrap中删除。这就是为什么我认为glyphicons一起从bootstrap中删除。
如果你认为我错了,看到我犯的错误,请回复。
这可能是一个小错误,但不应该是: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 ......
你是如何在HTML中包含字体的?您需要在元素引导之前将元素放置到字体之前,或者使用任何CSS来包含这些字体。
你可以在Mozilla的guide to using web fonts上阅读更多内容。请在“使用在线字体服务”标题下查找(具体为#5)。虽然您自己包含文件,但正确顺序包含文件的原则。
编辑:回顾过去之后,我想我已经看到了这个问题。查看src网址,看起来bootstrap CSS期望fonts
文件夹位于assets
目录中,而不是bootstrap目录。因此,您需要将fonts
文件夹移动到assets
目录,或者更改bootstrap中的src URL以包含assets/bootstrap/fonts/
。