Значок Twitter Bootstrap 3, отображающий квадрат

Файлы шрифтов находятся в нужном месте, а html-код - с charset utf-8.

Вот код:

<!DOCTYPE html>
<html>
<head>
    <meta chaset="utf-8">
    <title>Teste icone</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>

и это структура файла:

-css
   *bootstrap.min.css
-fonts
    *all font files here
*index.html

Странно, что когда я смотрю на отладку, все файлы шрифтов загружаются правильно

Ответы

Ответ 1

Ребята, проблема в том, что файлы шрифтов были повреждены, странно, что я пробовал загрузочный загрузочный файл 3 раза с разных устройств, и во всех случаях у меня была такая же проблема. Самое странное, что я много разбираюсь в течение нескольких дней, и, похоже, у кого-то не было той же проблемы. Итак... вот оно!

Ответ 2

Попробуйте перезагрузить шрифты, может быть поврежден.

Проверьте MD5

MD5 (glyphicons-halflings-regular.eot) = 2469ccfe446daa49d5c1446732d1436d
MD5 (glyphicons-halflings-regular.svg) = 3b31e1de93290779334c84c9b07c6eed
MD5 (glyphicons-halflings-regular.ttf) = aa9c7490c2fd52cb96c729753cc4f2d5
MD5 (glyphicons-halflings-regular.woff) = 7c4cbe928205c888831ba76548563ca3

Ответ 3

в вашем bootstrap.css попытайтесь добавить! важно в .glyphicon font-family..

.glyphicon {
   font-family:'Glyphicons Halflings' !important;
   // more css comes along here
}

Другие css могут вызвать конфликт с изменением семейства шрифтов глификонов.

Ответ 4

Это сработало для меня:

В bootstrap.css это ссылка на шрифты. (Строка 2386 или просто поиск лица)

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

Удаление ".." перед каждой ссылкой для меня

e.g

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

Ответ 5

Я только что попробовал удалить шрифт для значка на сайте tb3, и он отображается как квадрат. Убедитесь, что у вас есть папка с шрифтом на том же уровне, что и ваша папка css, при условии, что в папке с шрифтом есть все файлы.

структура должна быть:

- css
  -bootstrap-theme.css
  -bootstrap-theme.min.css
  -bootstrap.css
  -bootstrap.min.css

-fonts
  -glyphicons-halflings-regular.eot
  -glyphicons-halflings-regular.svg
  -glyphicons-halflings-regular.ttf
  -glyphicons-halflings-regular.woff

Код css: font-family: 'Glyphicons Halflings'

Ответ 7

Для меня это было

src: font-url("../fonts/glyphicons-halflings-regular.eot");

вместо

src: url("../fonts/glyphicons-halflings-regular.eot");

изменено и отлично работает:)

Ответ 8

Для меня это была проблема разрешения. Шрифты не имели соответствующих разрешений

Ответ 9

Проверьте, доступна ли в корневой папке директория "font", так как большинство загрузочных CSS накладываются на шрифты глификона, которые должны быть зажаты в какой-либо папке в корневой папке или в домашней папке.

Ответ 10

Проблема, вероятно, связана с тем, что вы загрузили бесплатную версию Glyphicons, которая включает только басические и социальные иконки. Если вы используете бесплатную версию, некоторые иконки просто не существуют и будут отображать квадрат.

Я переключился на использование CDN и соединился в голове, и все сработало!

CDN: https://www.bootstrapcdn.com/

Ответ 11

Моя папка шрифтов была просто в неправильном каталоге, она должна была идти на один уровень вверх.

Ответ 12

У меня есть эта проблема и после очень поиска:

  • Значки-символы доступны только для использования CDN.
  • вместо использования значков-символов вы можете использовать бесплатные значки Awesome. Дополнительная информация в http://fontawesome.io/3.2.1/get-started/