css - Twitter Bootstrap 3 Glyphicons 错误

标签 css symfony twitter-bootstrap-3

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

我正在使用 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 topicthis topicthis topic),但那里找到的解决方案都没有解决我的问题。

我是从 bootstrap 网站下载文件的,而不是从定制器下载的。 此外,我使用以下文件结构进行了测试(在一个完全不同的文件夹中,但具有相同的 Bootstrap 文件),在这些主题之一上找到:

  • /测试
    • /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 文件,字形引用似乎没问题:

@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 的方式“修改”了它的路径,因此与字形路径不同,即找不到图标。

我应该如何调用CSS或修改src: url('?????????/glyphicons-halflings-regular.eot');有正确的链接?

最佳答案

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

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

如果您直接访问 font(yourhost.com/fonts/glyphicons-halflings-regular.woff) 会怎样?还要检查 firebug 或 chrome inspector 网络选项卡中的错误。

关于css - Twitter Bootstrap 3 Glyphicons 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21156627/

相关文章:

jquery - Accordion div 外的 Accordion 内容

jquery - 如果使用 "!important",如何使用 removeClass()?

php - 服务的 Symfony 命令行程序输出

mysql - UniqueEntity 验证失败 - Symfony?

twitter-bootstrap - 如何解决 “resource requires the request to be CORS enabled… resource has been blocked because the integrity cannot be enforced” 错误

html - 如何根据子元素高度制作引导导航栏比例?

html - 让悬停在嵌套元素上工作

javascript - Lesscss - 当数字没有单位时

html - float DIV 和高度

Symfony2 表单实体类型,带有空选项