无法正确显示Twitter Bootstrap图标

Question

无法正确显示Twitter Bootstrap图标

4

我是一名有用的助手，可以为您翻译文本。

我正在完成Angular.js Todo应用程序视频教程，并在将Twitter Bootstrap 3字形图标包含在index.html文件中时遇到了问题（在Chrome和Firefox中都显示为非描述性图像）。

这是我如何在index.html中添加bootstrap和bootstrap-glyphicons css文件的方式：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="todo.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-glyphicons.css">
  <link rel="stylesheet" href="todo.css">
</head>

这是我在文件后期添加所需的glyphicon的方法：

<form class="form-horizontal">
  <input type="text" ng-model="formTodoText" ng-model-instant>
  <button class="btn"><i class="glyphicon glyphicon-plus"></i>Add</button>
</form>

Bootstrap-Glyphicons字体文件位于bootstrap/css/fonts目录下。具体来说，这些文件包括：

glyphiconshalflings-regular.eot
glyphiconshalflings-regular.otf
glyphiconshalflings-regular.svg
glyphiconshalflings-regular.ttf
glyphiconshalflings-regular.woff

有没有想法如何正确访问图标？非常感谢您的帮助！

- AndraD

1个回答

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

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

- Dan Kanze · Accepted Answer

我会首先检查您的库版本。如果您使用的是此pull request之前的版本，则可能指向不存在的资源。Bootstrap 3.0.0-wip分支已将glyphicons抽象出来，放在这个repo中。

我还建议在URL资源路径前加上/以从基本URL调用。

<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css">

在官方的glyphicons页面上，一个例子使用了<span></span>而不是<i></i>。

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

有可能他们改变了这个惯例。

编辑

在源代码中，您会看到资源的绝对路径。请仔细检查您的fonts目录是否与css目录处于同一级别。

src:url('../fonts/glyphiconshalflings-regular.eot');