Невозможно правильно отобразить глификоны Twitter Bootstrap

Я работал с видеоруководством 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. В частности, это файлы:

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

Любые мысли о том, что сделать, чтобы правильно получить доступ к значкам? Большое вам спасибо за вашу помощь!


person AndraD    schedule 07.08.2013    source источник


Ответы (1)


Я бы сначала проверил версии ваших библиотек.

Если вы используете версию до этого запроса на включение, возможно, вы указываете на ресурсы, которые не существует. Ветка Bootstrap 3.0.0-wip абстрагировала глификоны в этот репозиторий.

Я бы также предварил пути ресурсов URL с помощью / для вызова из базового URL.

<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css">

В официальном посадочном модуле с глификоном в примере используется <span></span>, а не <i></i>.

<span class="glyphicon glyphicon-ok"></span>

Возможно, они изменили это соглашение.

ИЗМЕНИТЬ

В исходнике вы увидите абсолютные пути к активам. Дважды проверьте, что ваш каталог fonts находится на том же уровне, что и каталог css.

src:url('../fonts/glyphiconshalflings-regular.eot');
person Dan Kanze    schedule 07.08.2013
comment
@Alexandra В исходном коде вы увидите абсолютные пути к активам. Дважды проверьте, что ваш каталог fonts находится на том же уровне, что и каталог css. - person Dan Kanze; 07.08.2013
comment
Что касается ваших трех предложений: 1. Я только что загрузил библиотеки сегодня с веб-сайта Bootstrap, поэтому они должны быть самыми последними; 2. добавление / к путям ресурсов фактически предотвращает доступ к ресурсам, поэтому я оставил пути такими, какие они есть; 3. замена ‹i›‹/i› на ‹span›‹/span›, похоже, не имеет никакого значения. Я не знаю, имеет ли это значение, но глификон глификон-минус/плюс работают, другие значки, которые пробовал, не... - person AndraD; 07.08.2013
comment
/ ничему не мешает. Кажется, что вы сталкиваетесь с проблемой пути. - person Dan Kanze; 07.08.2013
comment
Вы были правы в том, что каталоги шрифтов и css не находятся на одном уровне - это решило мою проблему. - person AndraD; 07.08.2013