4

我正在阅读Angular.js Todo 应用程序视频教程，遇到了一个问题，包括 index.html 文件中的 Twitter Bootstrap 3 字形图标（在 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>

这就是我稍后在文件中添加所需字形图标的方式：

<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 中。具体来说，这些文件是：

  1. glyphiconshalflings-regular.eot
  2. glyphiconshalflings-regular.otf
  3. glyphiconshalflings-regular.svg
  4. glyphiconshalflings-regular.ttf
  5. glyphiconshalflings-regular.woff

关于如何正确访问图标的任何想法？非常感谢你的帮助！

4

1 回答 1

6

我会首先检查你的库上的版本。

如果您使用的是此拉取请求之前的版本，则您可能指向不存在的资产。Bootstrap 3.0.0-wip 分支已将字形图标抽象到此 repo中。

我还将在 URL 资产路径之前加上/从基本 URL 调用的 a。

<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');
于 2013-08-07T17:35:59.837 回答