Twitter Bootstrap 3 Glyphicons error

我试图从Bootstrap2升级到Bootstrap3。一切工作到目前为止，除了Glyphicons：显示一个正方形而不是图标： enter image description here Twitter Bootstrap 3 Glyphicons error

我正在使用Symfony2。这是我怎么称呼引导CSS：

<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />

这是我如何调用glyphicons：

<span class="glyphicon glyphicon-search"></span>

我的文件结构如下：

/网络
- /css
  - bootstrap.css
- /字体
  - 4个glyphicons文件

看来，这是一个普遍的问题（见this topic，this topic或this topic为例如），但没有发现解决方案解决了我的问题。

我从bootstrap网站下载文件，而不是从定制程序中下载。此外，我做了以下文件结构的测试（在完全不同的文件夹，但具有相同的引导文件），对这些话题之一发现：

/测试
- /CSS
  - bootstrap.css
- /字体
  - 4个glyphicons文件
- 的index.html

的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>

而且这个测试完美的作品，所以glyphicons文件不会被损坏。

我的真实网站的字符集也是UTF-8。

我检查了bootstrap。CSS文件和glyphicons参考似乎确定：

@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; 
}

所以我想我称之为CSS“修改”，其路径是从glyphicons路径，这是图标都没有发现因此不同的方式。

我该如何调用CSS或修改src：url（'????????/glyphicons-halflings-regular.eot'）;有适当的联系？如果你直接访问字体（yourhost.com/fonts/glyphicons-halflings-regular.woff）在security.yml

security: 
    firewalls: 
     assets: 
      pattern: ^/(_(profiler|wdt)|css|images|js|fonts)/ 
      security: false

来源

2014-01-16 Blacksad

检查你已排除了什么/字体路径，会发生什么？同时检查萤火虫或铬检查器的网络选项卡中的错误。

来源

2014-01-16 09:49:21

在我增加了线条 'security.yml' 如你所说。我可以看到'yourhost.com/fonts/'的内容，但'yourhost.com/fonts/glyphicons-halflings-regular.woff'是403禁止的。萤火虫说同样的事情（403禁止在网络/字体选项卡的字形... woff和字形... ttf）。我有一个WAMP系统，我检查了文件权限，所有用户对所有4个文件都有读/写/执行权限。但现在很清楚，问题在这个地区的某个地方！ – Blacksad

我以各种方式“摇动”了这些文件，并且我设法让这件事情奏效......我相信问题是由于** 4个文件被加密**的事实。我删除了，现在没关系。感谢您让我走上正轨。 – Blacksad

很高兴我能帮到你 –

将您的字体目录移动到css目录中。
Bootstrap在该目录中查找字体。
请求： ..yoursite/CSS /字体/ glyphicons，半身人，regular.woff例如

来源

2014-04-26 19:44:43

Twitter Bootstrap 3 Glyphicons error

回答

相关问题