twitter-bootstrap 无法正确显示 Twitter Bootstrap 字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18109748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to properly display Twitter Bootstrap glyphicons
提问by AndraD
I was working through the Angular.jsTodo application video tutorial and I encountered a problem including the Twitter Bootstrap 3 glyphicons in the index.html file (the icons show up as non-descriptive images, both in Chrome and in Firefox).
我在学习 Angular.jsTodo 应用程序视频教程时遇到了一个问题，包括 index.html 文件中的 Twitter Bootstrap 3 glyphicons（图标在 Chrome 和 Firefox 中都显示为非描述性图像）。
This is how I am adding the bootstrap and bootstrap-glyphicons css files in index.html:
这就是我在 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>
And this is how I am adding the required glyphicon later in the file:
这就是我稍后在文件中添加所需字形的方式：
<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>
The bootstrap-glyphicons fonts files are in bootstrap/css/fonts. Specifically, the files are:
bootstrap-glyphicons 字体文件位于 bootstrap/css/fonts 中。具体来说，这些文件是：
- glyphiconshalflings-regular.eot
- glyphiconshalflings-regular.otf
- glyphiconshalflings-regular.svg
- glyphiconshalflings-regular.ttf
- glyphiconshalflings-regular.woff
- glyphiconshalflings-regular.eot
- glyphiconshalflings-regular.otf
- glyphiconshalflings-regular.svg
- glyphiconshalflings-regular.ttf
- glyphiconshalflings-regular.woff
Any thoughts on what to do to properly access the icons? Thank you so much for your help!
关于如何正确访问图标的任何想法？非常感谢你的帮助！
回答by Dan Kanze
I would first check the versions on your libs.
我会首先检查你的库上的版本。
If you are using a version before this pull requestyou may be pointing to assets that don't exist. The Bootstrap 3.0.0-wip branch has abstracted glyphicons out to this repo.
如果您使用此拉取请求之前的版本，您可能指向不存在的资产。Bootstrap 3.0.0-wip 分支已经将字形抽象到这个 repo。
I would also preceed the URL asset paths with a /to invoke from base URL.
我还将在 URL 资产路径之前使用/从基本 URL 调用的 。
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css">
On the offical glyphicons lander, an example uses <span></span>rather than <i></i>
在官方的字形着陆器上，一个例子使用<span></span>而不是<i></i>
<span class="glyphicon glyphicon-ok"></span>
It is possible they changed that convention.
他们有可能改变了这个约定。
EDIT
编辑
In the source you will see the absolute paths of the assets. Double check that your fontsdirectory is on the same level as the cssdirectory.
在源代码中，您将看到资产的绝对路径。仔细检查您的fonts目录是否与目录位于同一级别css。
src:url('../fonts/glyphiconshalflings-regular.eot');
