Twitter Bootstrap 3 Glyphicons 错误答案

【问题标题】：Twitter Bootstrap 3 Glyphicons errorTwitter Bootstrap 3 Glyphicons 错误
【发布时间】：2014-11-22 12:47:56
【问题描述】：

我正在尝试从 Bootstrap2 升级到 Bootstrap3。到目前为止一切正常，除了 Glyphicons：显示一个正方形而不是图标：

我正在使用 Symfony2。这就是我调用 Bootstrap CSS 的方式：

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

这就是我对字形图标的称呼：

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

我的文件结构如下：

/网络
- /css
  - bootstrap.css
- /字体
  - 4 个字形图标文件

这似乎是一个常见问题（例如，请参阅 this topic、this topic 或 this topic），但在那里找到的解决方案都没有解决我的问题。

我从引导网站下载文件，而不是从定制器。此外，我使用以下文件结构进行了测试（在一个完全不同的文件夹中，但具有相同的引导文件），在这些主题之一中找到：

/测试
- /css
  - bootstrap.css
- /字体
  - 4 个字形图标文件
- index.html

Index.html 蜜蜂：

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

而且这个测试完美运行，所以字形文件没有损坏。

我的真实网站的字符集也是 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');有正确的链接？

【问题讨论】：

标签： css symfony twitter-bootstrap-3

【解决方案1】：

检查您在security.yml 中排除了/fonts 路径的内容

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

如果您直接访问字体（yourhost.com/fonts/glyphicons-halflings-regular.woff）会发生什么？还要检查 firebug 或 chrome 检查器是否有网络选项卡中的错误。

【讨论】：

如你所说，我在 'security.yml' 中添加了这些行。我可以看到 'yourhost.com/fonts/' 的内容，但 'yourhost.com/fonts/glyphicons-halflings-regular.woff' 是 403 禁止的。 Firebug 说了同样的话（403 Forbidden in Network/Fonts tab for glyph...woff 和 glyph...ttf）。我有一个 WAMP 系统，我检查了文件权限，所有用户对所有 4 个文件都有读/写/执行权限。但现在很明显，问题出在这个区域的某个地方！
我尽我所能“摇动”这些文件，我设法让事情正常工作......我相信问题是由于 4 个文件被加密乙>。我删除了它，现在可以了。感谢您让我走上正轨。

【解决方案2】：

将字体目录移动到 css 目录中。
Bootstrap 在该目录中查找字体。
要求： ..yoursite/css/fonts/glyphicons-halflings-regular.woff 示例

【讨论】：