Я работал с видеоруководством Angular.js по приложению Todo и столкнулся с проблемой, включая глификоны Twitter Bootstrap 3 в индексе. .html (значки отображаются как неописуемые изображения как в Chrome, так и в Firefox).
Вот как я добавляю css-файлы bootstrap и bootstrap-glyphicons в 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>
И вот как я добавляю нужный глификон позже в файл:
<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
Любые мысли о том, что сделать, чтобы правильно получить доступ к значкам? Большое вам спасибо за вашу помощь!