Глификон, представляющий собой пустую коробку

Я использую отличную библиотеку бутстрапов Twitter с Glyphicons, однако все значки отображаются как пустые квадраты, например:

Я загрузил шрифты Glyphicons в свой веб-корень и изменил файл bootstrap.css, чтобы указать на их правильные местоположения, которые я проверил, потому что у них есть 200 OK запросы в инструментах Chrome dev:

Это разметка, которую я использую:

<a href="#" onclick="location.href='http://www.mysite.com/download'; return false;" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

Любые идеи, почему шрифт может отображаться как пустые поля? Предыдущие ответы на StackOverflow указывают на неправильные пути к шрифтам, что здесь не так, поскольку пути верны.

Ответ 1

На самом деле это не решение, но в итоге я просто использовал CDN Bootstrap: http://www.bootstrapcdn.com/

Ответ 2

У меня была такая же проблема, и я смог ее решить!

В IIS я устанавливаю типы Mime для woff и woff2 следующим образом:
```
.woff application/x-font-woff
.woff2 application/font-woff2
```

В CSS для моей страницы я создал загруженный шрифт из загрузочной загрузки Glyphicon для woff и woff2:

@font-face {
  font-family: 'Glyphs';
  src:  url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
        url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
}

В CSS я создал класс для глификонов и указал, чтобы использовать вышеупомянутый шрифт, который я назвал "Glyphs":
```
.glyphicon {
    font-family: 'Glyphs', sans-serif;
}
```
В любом месте, где я хотел отобразить глификон, я задал класс glyphicon, а затем типичный класс бутстрапов глификон:
```
<span class='glyphicon glyphicon-home'></span>
```

Ответ 3

В соответствии с командой Glyphicons это ошибка в WebKit:

Содержимое веб-сайта CSS Unicode ошибка?

Но я не согласен с тем, почему старая версия Chrome делает это. Я опубликовал здесь версии, но один модератор удалил мой ответ.

Ответ 4

Поместите папку шрифтов в каталог css
Он должен выглядеть как

css/fonts/**.svg
css/fonts/**.woff

Ответ 5

для меня эта разметка, которая работает... просто определения классов значков, которые отличаются:

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>

Ответ 6

Ниже css stanza определяет семейство шрифтов для Glyphicons Halflings // внутри bootstrap.css

@font-face {
    font-family: "Glyphicons Halflings";
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), 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");
}

Если вы используете CDN, требуемые файлы EOT AND woof доступны в относительном пути URL-адреса CDN. то есть, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.eot https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff2 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.ttf https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

Итак, если вы хотите использовать Glyphicons с файлом bootstrap.css в вашей локальной машине. загрузите все эти файлы из приведенной выше ссылки и поместите ее в один и тот же относительный путь... i.e../fonts/

и попробуйте сейчас...

Примечание. Я не знаю о лицензировании для этих файлов (прочитайте некоторые документы для использования в бизнесе). может быть, есть какая-то бесплатная ссылка, предоставленная загрузчиком, чтобы загрузить этот файл...

Ответ 7

Для меня я заметил, что в версии sass _glyphicons.scss раздел:

@at-root {
  // Import the fonts
  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot #iefix')) format('embedded-opentype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
  }
}

пришлось заменить так, как это было:

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}

Ответ 8

для тех, кто пробовал все до и все еще не работал, я изменил

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

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

в файле bootstrap.css

Ответ 9

Это также может произойти, если вы не указали оба класса (т.е. только "звезда-глификон" вместо "глификон-звезда глификона" )

Хорошо:

<i class="glyphicon glyphicon-star">

Bad

<i class="glyphicon">

Ответ 10

У меня была такая же проблема. В моем случае был тип mime, но он не знает раньше, потому что мой iis не позволил мне добавить ui, поскольку я показываю:

My iis ui

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

Используется множество решений, таких как edite my web.config более 30 раз:

<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
        <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

Изменен код, проверены boudles, добавлены характеристики на iis, изменен путь, после всех намерений dat damn square всегда, ничего не работает.

Итак, в форуме, читающем о добавлении типов mimes в iis с консолью, я попытался добавить, как они сказали.

Открыл cmd как admin и отправил текст:

C:\Windows\System32\inetsrv>appcmd.exe set config /section:staticContent
/+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"

Где:

"C:\Windows\System32\inetsrv" это корневая папка iss.

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" Это командная строка для настройки этого mime в appcmd, как вы знаете, iis.

Результат:

И эт voilà! которые работают.

Надеюсь, это может помочь кому-то. Может быть полезно для меня.

Ответ 11

Я сделал несколько сравнений, и оказалось, что в файле bootstrap.css я содержал это:

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')

пока он должен прочитать:

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')

Заметьте, что я добавил символ подчеркивания, который теперь соответствует объявленному id внутри <font id="..."> в файле .svg.

Ответ 12

Скопируйте папку "fonts" из пакета bootstrap на вашем сервере. И все готово.