Bootstrap 3 Glyphicons не отображается правильно

Question

У меня пока не было много проблем с загрузкой, но сегодня я попытался интегрировать глификоны внутри элемента navbar и не смог заставить его работать. На изображении отображается символ, который появляется в месте глификонов; под ним.

<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> 

<!-- Bootstrap theme --> 
<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 

<!-- Custom styles for this template --> 
<link href="style.css" rel="stylesheet"> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">name</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> About Me</a></li> 
     <li><a class="navbar-link" href="#"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Projects</a></li> 
     <li><a href="#"> Past</a></li> 
     <li><a href="#"> Free Time</a></li> 
    </ul> 
    </div> 
</nav> 

Я первый сошлась документацию BS3 как любое разумное лицо, и нашел это.

Только для использования на пустых элементах: классы значков должны использоваться только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.

Не чувствуя удовлетворения на 100%, я нашел несколько примеров, показывающих значки в объектах кнопок. Одна демонстрация - here. Это привело меня к мысли, что моя проблема выходит за рамки совместимости с BS3. Я продолжал искать и нашел это сообщение helpful post, чтобы повторно загрузить исходный код для файлов шрифтов. Проблема была все еще там, пробовав это. Я также дважды проверил, что мой bootstrap.min.css отформатирован правильно. Для тех, кто все еще может подумать, что это проблема с навигацией, я попытался реализовать кнопку, увиденную в демо, но с той же проблемой.

Нужно ли явно форматировать глификоны в .css? Из того, что я прочитал, у меня есть все необходимое для правильной работы. Пожалуйста, дайте мне знать, что я делаю неправильно.

Для тех, кто ухаживает за мной, я использую Mozilla 34.0.5 на Mac Book Pro OSX 10.9.5 (не то, что ОС должна иметь значение).

UPDATE

Я попытался предложения Shikar, но не мог заставить их работать. Когда я посмотрел в свой bootstrap.min.css, я увидел src:url(../fonts/glyphicons...). Я сделал две попытки изменить эти URL-адреса. Сначала я просто удалил .. до /fonts/. Это ничего не изменило. Затем я понял, что я поместил свой загрузочный блок в отдельный каталог, поэтому я явно вызвал файлы, поставив `/Users/myname/explicitPath/bootstrap-3.3.1/dist/fonts/glyphicons-halflings-regular.eot, а также другие четыре URL-адреса глификона, упомянутые в этой области .css. Это тоже не сработало. Принимая совет @rockerest, я заглянул в инструмент webdev FF и увидел две неудачные загрузки с загружаемым шрифтом. Путь к файлу для этих ошибок не имеет никаких ошибок, но я не понимаю, как использовать bootstrap локально? Могу ли я использовать локальные пути к файлу в bootstrap.min.css?

Answer 1

Так что моя проблема закончилась тем, что bootstrap был по отношению к моему index.html. Ниже представлена ​​структура файла до и после. Я надеялся, что у меня будет только общая папка bootstrap, в которой я могу указать на создание нескольких идей для веб-приложений, но похоже, что ремешок для загрузки должен быть на том же уровне, что и index.html. Перемещая бутстрап в тот же каталог, что и index.html, выполнив grunt dist в каталоге bootstrap и используя явный путь к bootstrap.min.css в .html ссылках, я смог заставить вещи работать правильно. Хотел бы я лучше понять, почему это сработало.

Before     After 
├── webpage/    └── webpage/ 
| └──index.html    ├──index.html 
|        └──bootstrap/ 
└── js/ 
    └──bootstrap/ 

Answer 2

был похож на проблему, решил, что он помещает каталог шрифтов в тот же каталог, где находится папка css. Например, если папка css помещена в корневой каталог, поместите папку шрифтов в корневой каталог.