Twitter Bootstrap 3 图标错误

Question

Twitter Bootstrap 3 图标错误

3

我将尝试从Bootstrap2升级到Bootstrap3。目前为止，一切都正常，除了Glyphicons：显示的是一个方块而不是图标： enter image description here

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

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

这是我调用glyphicons的方式：

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

我的文件结构如下：

/web
- /css
  - bootstrap.css
- /fonts
  - 四个字体图标文件

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

我从 Bootstrap 网站下载了文件，而不是使用定制工具。此外，我在一个完全不同的文件夹中使用了以下文件结构进行测试（但包含相同的 Bootstrap 文件），该文件结构在其中一个主题中找到：

/test
- /css
  - bootstrap.css
- /fonts
  - 四个字体图标文件
- 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的方式“修改”了它的路径，因此与glyphicons路径不同，这导致图标无法找到。

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

- Blacksad

2个回答

0

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

- Karmavil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexey B. · Accepted Answer

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

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

如果直接访问字体文件(yourhost.com/fonts/glyphicons-halflings-regular.woff)会发生什么？同时在网络选项卡中检查Firebug或Chrome Inspector是否有错误。