twitter-bootstrap – 无法正确显示Twitter Bootstrap glyphicon
我正在研究
Angular.js Todo应用程序视频教程,我遇到了一个问题,包括index.html文件中的Twitter Bootstrap 3 glyphicons(这些图标在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 有关如何正确访问图标的任何想法?非常感谢你的帮助! 解决方法
我首先检查你的libs上的版本.
如果您使用的是this pull request之前的版本,则可能指向不存在的资产. Bootstrap 3.0.0-wip分支将抽象的glyphicons抽象到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'); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |