Bootstrap3 - Глификон не отображается в Chrome, только

Question

Странно, ни один из глификонов Bootstrap3 не отображается в Chrome v31 (отображает небольшой квадрат). Но, отлично работает в FF v26, Opera v18, Safari v5.1 и IE v10. Кроме того, отлично работает в Android 4.x - Chrome и FF.

Испытано с простым кодом: <span class="glyphicon glyphicon-adjust"></span>

Пожалуйста, помогите. Большое спасибо!

Окружающая среда: Windows 8.0

Answer 1

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

1. Щелкните правой кнопкой мыши на элементе и выберите «Осмотреть элемент». Это откроет окно, в котором вы найдете полезную информацию о html и CSS, который применяется к нему.
2. Если это изображение спрайта (как в Bootstrap 2), посмотрите на CSS с правой стороны, ищите самый верхний (не перечеркнутый) background-image. См. URL-адрес спрайта. Если это глификон (как в Bootstrap 3), вместо этого найдите font-family.
3. Перейдите на вкладку Сеть. Возможно, вам потребуется обновить страницу, чтобы получить полезную информацию.
4. Посмотрите, где он загрузил изображение или шрифт спрайта (например, glyphicons-halflings-regular.woff). Если он говорит, что он имеет статус «304», значит, он был загружен из кеша. В этом случае очистка кеша и перезагрузка страницы могут решить вашу проблему.
5. Если это не был статус «304», может возникнуть проблема, когда веб-сервер не обслуживает изображение («404» или аналогичный статус), или по какой-то причине он не подходит правильно.
6. Если очистка кеша не решила проблему, нажмите URL-адрес для спрайта или шрифта на вкладке «Сеть», а затем перейдите на вкладку «Предварительный просмотр». То, что вы должны видеть, - это изображение блока, содержащее значок и все другие значки, или буквенно-цифровые символы в этом шрифте. Если это не то, что вы видите, снова, вероятно, что-то не так с тем, что обслуживает ваш веб-сервер.
7. Если изображение спрайта верное, возможно, что-то не так с вашим CSS, где вы случайно переопределяете положение фона для спрайта. Опять же, вернитесь на вкладку Elements и посмотрите на созданный CSS.

Answer 2

Похоже, это ошибка в WebKit, о котором было сообщено здесь: https://bugs.webkit.org/show_bug.cgi?id=76152

Кроме того, создатель GlyphIcons говорит, что он знает об этой проблеме и будет пытаться использовать различные значения Юникода в следующий выпуск, чтобы обойти эту ошибку: https://twitter.com/glyphicons/status/423426740128854016

Answer 3

Если это помогает, используя bootstrap.css вместо bootstrap.min.css исправил эту проблему для меня.

Answer 4

Примечание для читателей: обязательно прочтите @user2261073's комментарий и @Jeff's answer относительно ошибки в настройке. Вероятно, это причина вашей проблемы.

Файл шрифта загружается неправильно. Проверьте, находятся ли файлы в ожидаемом месте.

@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'); 
} 

Как указал Даниэль, это может быть проблема с миметикой.Dev инструменты Chrome показывают загружаемые шрифты на вкладке сети:

Answer 5

Когда заголовок ответа шрифта «Content-Type: Текст/html; кодировка = UTF-8» хром V38 + будет иметь проблемы, чтобы показать самозагрузки glyphicons, он будет решать это, если заголовок набора ответа в «Content-Type: приложение/шрифт-Уофф»

Answer 6

у меня была такая же проблема. Самым простым решением является непосредственно импортировать CSS из текстовой ссылки, не загружайте его:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

Проблема заключается в том, что использование CSS и другие относительные пути к другим файлам. Поэтому вы можете сделать 2 вещи:
1. Загрузите все относительные пути.
2. Вы можете просто использовать гиперссылку (проще).

Answer 7

My .htaccess in/wp-content вызвал ошибку из-за ограничения типа файла. После добавления woff2 в список разрешенных типов файлов все работает хорошо.

# Protect /Wp-Content/ 
Order deny,allow 
    Deny from all 
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$"> 
    Allow from all 
    </Files> 

Answer 8

У меня была та же проблема, что и вы:

1. Перейти в папку CSS.
2. Открыть файл bootstrap.min.css.
3. Поиск текста глификона в этом.
4. Вы можете узнать его адрес URL.
5. Вы должны изменить имя папки font на номер fonts.
6. Иди и наслаждайся жизнью. :)

Answer 9

Вам необходимо скачать самозагрузки папку шрифтов, и в вашем bootstrap.min.css вы можете найти путь ../fonts для glyphicon, вам необходимо изменить этот путь «шрифты /» удалить ../если ваша папка шрифтов находится в пределах одного и того же bootstarp.min.css.

наслаждаться :)

Answer 10

я обнаружил, что при осмотре CSS из bootstrap.min.css что расположение каталога для «шрифтов» были добавлены пробелы, что означало, что он призывал к файлам, которые не существуют, так как имена файлов в них отсутствуют. Например, он был перечислен весь путь через каждый как

../шрифты/glyphicons - Халфлинги - regular.eot

, когда он должен был

../шрифты/glyphicons-полурослики -regular.eot

После того как я удалил пробелы, повторно загрузил CSS, очистил кеш браузера и перезагрузил (кнопка F5), наконец, появились глификоны. Перед удалением лишних пробелов единственным другим вариантом, который работал для меня, было то, что дал Гинес Идальго, который предложил загрузить CSS через гиперссылку. Но с открытием, что удаление лишних пробелов устраняет проблему, эта опция больше не нужна.