Twitter Bootstrap 3 Ошибка Glyphicons

Я пытаюсь перейти с Bootstrap2 на Bootstrap3. Все работает до сих пор, кроме Glyphicons: вместо значка отображается квадрат: enter image description here Twitter Bootstrap 3 Ошибка Glyphicons

Я использую Symfony2. Это, как я называю Bootstrap CSS:

<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />

Это, как я называю glyphicons:

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

Моя файловая структура выглядит следующим образом:

/веб
- /css
  - bootstrap.css
- /шрифты
  - на 4 glyphicons файлы

Это кажется, что это общая проблема (см this topic, this topic или this topic для пример), но ни одно из найденных решений не решило мою проблему.

Я загрузил файлы с сайта начальной загрузки, а не из настройки. Кроме того, я сделал анализ со следующей структурой файла (в совершенно иной папке, но с теми же Bootstrap файлами), найденный на одном из этих тем:

/испытательного
- /Css
  - bootstrap.css
- /шрифты
  - в 4 glyphicons файлы
- index.html

Index.html неоспоримым:

<!DOCTYPE html> 
<html> 
<head> 
    <meta chaset="utf-8"> 
    <title>Test icons</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
</head> 
<body> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-star"></span> Star 
    </button> 
</body> 
</html>

И этот тест работает отлично, так что файлы glyphicons не повреждены.

Кодировка моего настоящего сайта - UTF-8.

Я проверил бутстрап.CSS файл и ссылка glyphicons кажется OK:

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
} 

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -moz-osx-font-smoothing: grayscale; 
}

Так что я думаю, как я называю CSS «модифицирует» свой путь, который, следовательно, отличается от пути glyphicons, что иконки не найдено.

Как я могу вызвать CSS или изменить src: url ('????????/glyphicons-halflings-regular.eot'); иметь правильную ссылку?

источник

2014-01-16 Blacksad

Проверьте, что вы exluded/путь шрифтов в security.yml

security: 
    firewalls: 
     assets: 
      pattern: ^/(_(profiler|wdt)|css|images|js|fonts)/ 
      security: false

Что произойдет, если вы непосредственно получить доступ к шрифту (yourhost.com/fonts/glyphicons-halflings-regular.woff)? Также проверьте firebug или chrome inspector на наличие ошибок в сетевой вкладке.

источник

2014-01-16 09:49:21

Я добавил линии в 'security.yml', как вы сказали. Я вижу содержимое «yourhost.com/fonts/», но «yourhost.com/fonts/glyphicons-halflings-regular.woff» запрещен 403. Firebug говорит то же самое (403 Запрет на вкладке «Сеть/Шрифты» для глифа ... woff и glyph ... ttf). У меня есть система WAMP, и я проверял права на файлы, и все пользователи имеют права на чтение/запись/выполнение на всех 4 файлах. Но теперь ясно, что проблема где-то в этой области! – Blacksad

Я «встряхнул» эти файлы всеми возможными способами, и мне удалось это сделать ... Я считаю, что проблема связана с тем, что ** 4 файла были зашифрованы **. Я удалил это, и теперь все в порядке. Спасибо, что поставил меня на правильный путь. – Blacksad

Рад, что я могу помочь –

Переместить каталог шрифтов в каталог css.
Bootstrap ищет шрифты в этом каталоге.
Запрос: ..yoursite/CSS/шрифты/glyphicons-полурослики-regular.woff в примере

источник

2014-04-26 19:44:43

Twitter Bootstrap 3 Ошибка Glyphicons

ответ

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