Twitter Bootstrap 3 Glyphicons错误 [英] Twitter Bootstrap 3 Glyphicons error
问题描述
我尝试从Bootstrap2升级到Bootstrap3。一切都工作到目前为止，除了Glyphicons：显示一个正方形，而不是图标：
我使用Symfony2。这是我如何调用Bootstrap CSS：
< link rel =stylesheethref ={{asset（'css / bootstrap.css'）}}type =text / css/>
这是我如何调用glyphicons：
< span class =glyphicon glyphicon-search>< / span>
我的文件结构如下：
- / web
- / css
- bootstrap。 css
- / fonts
- 4个glyphicons档案
-
- / css
>我从引导网站下载了文件，而不是从定制器。
此外，我使用以下文件结构进行测试（在完全不同的文件夹中，但是具有相同的Bootstrap文件）：
- / test
- / css
- bootstrap。 css
- / fonts
- 4个glyphicons档案
-
- index.html
- / css
Index.html beeing：
<！DOCTYPE html&
< html>
< head>
< meta chaset =utf-8>
< title>测试图标< / title>
< link rel =stylesheettype =text / csshref =css / bootstrap.css>
< / head>
< body>
< button type =buttonclass =btn btn-default btn-lg>
< span class =glyphicon glyphicon-star>< / span>星
< / button>
< / body>
< / html>
这个测试工作完美，所以glyphicons文件没有损坏。
我的真实网站的字符集也是UTF-8。
我检查了bootstrap.css文件，并且glyphicons引用看起来OK：
@ font-face {
font-family：'Glyphicons Halflings';
src：url（'../ fonts / glyphicons-halflings-regular.eot'）;
src：url（'../ fonts / glyphicons-halflings-regular.eot？#iefix'）format（'embedded-opentype'），
url（'../ fonts / glyphicons-halflings -runue.woff'）format（'woff'），
url（'../ fonts / glyphicons-halflings-regular.ttf'）format（'truetype'），
url /fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular'）format（'svg'）;
}
。glyphicon {
position：relative;
top：1px;
display：inline-block;
font-family：'Glyphicons Halflings';
-webkit-font-smoothing：antialiased;
font-style：normal;
font-weight：normal;
line-height：1;
-moz-osx-font-smoothing：grayscale;
}
所以我想我的方法是调用CSS修改因此不同于glyphicons路径，这是没有找到的图标。
我应该如何调用CSS或修改src：url ?? / glyphicons-halflings-regular.eot'）; c>
/ code> security：
firewalls：
assets：
pattern： ^ /（_（profiler | wdt）| css | images | js | fonts）/
security：false
如果您直接访问字体会出现什么情况（ yourhost.com/fonts/glyphicons-halflings-regular.woff ）？还可以检查firebug或chrome检查器在网络标签中的错误。
I'm trying to upgrade from Bootstrap2 to Bootstrap3. Everything works so far, except the Glyphicons: a square is displayed instead of the icon:
I'm using Symfony2. This is how I call Bootstrap CSS:
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />
This is how I call the glyphicons:
<span class="glyphicon glyphicon-search"></span>
My file structure is as follows:
- /web
- /css
- bootstrap.css
- /fonts
- the 4 glyphicons files
- /css
It seems that this is a common problem (see this topic, this topic or this topic for example), but none of the solution found there solved my problem.
I downloaded the files from bootstrap website, not from the customizer. Moreover, I made a test with the following file structure (in a complete different folder but with the same Bootstrap files), found on one of those topics:
- /test
- /css
- bootstrap.css
- /fonts
- the 4 glyphicons files
- index.html
- /css
Index.html beeing:
<!DOCTYPE html>
<html>
<head>
<meta chaset="utf-8">
<title>Test icons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
</body>
</html>
And this test works perfectly, so the glyphicons files are not corrupted.
The charset of my real site is UTF-8 as well.
I checked the bootstrap.css file and the glyphicons reference seems OK:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
So I guess the way I call the CSS "modifies" its path which is consequently different from the glyphicons path, which is the icons are not found.
How should I call the CSS or modify the src: url('????????/glyphicons-halflings-regular.eot'); to have the proper link?
Check what you have exluded /fonts path in security.yml
security:
firewalls:
assets:
pattern: ^/(_(profiler|wdt)|css|images|js|fonts)/
security: false
What happens if you directly access font(yourhost.com/fonts/glyphicons-halflings-regular.woff)? Also check firebug or chrome inspector for errors in network tab.
这篇关于Twitter Bootstrap 3 Glyphicons错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
