Невозможно правильно отобразить Щебетать Щебетать бутстрапа

Я работал над учебником видеомонтажа Todo, и я столкнулся с проблемой, включающей глификоны Twitter-Bootstrap 3 в файле index.html (значки отображаются как не описательные изображения, как в Chrome и Firefox).Невозможно правильно отобразить Щебетать Щебетать бутстрапа

Это, как я добавляю начальной загрузки и бутстраповские-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

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

Если вы используете версию до 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">

На OFFICAL glyphicons шлюпку, пример использует <span></span> вместо <i></i>

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

Возможно, они изменили эту конвенцию.

EDIT

В источнике вы увидите абсолютные пути активов. Дважды проверьте, что ваш каталог 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

Невозможно правильно отобразить Щебетать Щебетать бутстрапа

ответ

Смежные вопросы