无法正确显示Twitter引导程序图形

我正在通过Angular.js Todo应用程序视频教程，我遇到了一个问题，其中包括index.html文件中的Twitter Bootstrap 3图形（图标显示为非描述性图像， Chrome和Firefox）。无法正确显示Twitter引导程序图形

这是怎么了增加引导和引导，glyphicons css文件中的index.html：

<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

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

来源

2013-08-07 Alexandra

我会先检查你的libs版本。

如果您使用this pull request之前的版本，则可能指向不存在的资产。 Bootstrap 3.0.0-wip分支抽象化了标识符到this 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');

来源

2013-08-07 17:35:59

刚刚尝试了三条建议 – Alexandra

@Alexandra在源代码中，您将看到资产的绝对路径。仔细检查一下你的'fonts'目录和'css'目录是否在同一层。 –

关于你的三点建议：1.我今天刚刚从Bootstrap网站下载了这些库，所以它们应该是最新的; 2.向资产路径添加“/”实际上阻止访问资产，所以我按照原样离开了路径; 3.用代替似乎没有任何区别。我不知道这是否重要，但“glyphicon glyphicon-minus/plus”工作，其他图标尝试不... – Alexandra

无法正确显示Twitter引导程序图形

回答

相关问题