Glyphicons rendering as empty box

I'm using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:

I've uploaded the Glyphicons fonts to my web root and changed the bootstrap.css file to point to their correct locations, which I've verified because they have 200 OK requests in Chrome's dev tools:

This is the markup I'm using:

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

Any ideas why the font may be rendering as empty boxes? Previous answers on StackOverflow all point to incorrect paths to the fonts, which isn't the case here as the paths are correct.

Not really a solution, but I ended up just using the Bootstrap CDN: http://www.bootstrapcdn.com/

Vlnflt

I was having the same problem and I was able to solve it!

In IIS, I set the Mime Types for woff and woff2 as follows:

.woff application/x-font-woff
.woff2 application/font-woff2

In the CSS for my page, I created a loaded the font from the bootstrap Glyphicon download for woff and 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');
}

In the CSS, I created a class for glyphicons and specified to use the above font that I titled "Glyphs":
```
.glyphicon {
    font-family: 'Glyphs', sans-serif;
}
```
Anywhere I wanted to display a glyphicon, I specified by glyphicon class then the typically bootstrap glyphicon class:
```
<span class='glyphicon glyphicon-home'></span>
```

Asghar Abbas

Place the fonts folder in your css directory
It should go like

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

This can also happen if you haven't specified both classes (i.e. only "glyphicon-star" instead of "glyphicon glyphicon-star")

Good:

<i class="glyphicon glyphicon-star">

Bad

<i class="glyphicon">

Marcos Antonio Ferreira Doming

Acording to Glyphicons team, this is a bug in WebKit:

WebKit CSS content Unicode bug?

But I don't undertend why an older version of Chrome render this. I have posted here the versions, but one moderator deleted my answer.

for me it's this markup that works ... just the icon class definitions that are different:

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

Karthikeyan

Below css stanza defines font family for Glyphicons Halflings //inside 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");
}

If you are using CDN.. the required EOT AND woof files are available in CDN URL's relative path.. i.e, 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

So If you want to use Glyphicons with bootstrap.css file in you local machine.. download all those files from the above link and put it in the same relative path... i.e ../fonts/

and try now...

Note: I don't know about the licensing for that files (read some docs for business use). may be there is some free link provided by bootstrap to download these file...

For me, I noticed that in the sass version, the _glyphicons.scss the section:

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

had to be replaced with how it used to be:

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

for those who have tried everything before and still didnt work I changed

.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
}

in the bootstrap.css file

i had the same trouble. In my case was the mime type, but doesn't know before because my iis didn't let me add by ui as i show:

My iis ui

I didn't think was mime types so tried others solutions. Hours later back to look about mime types.

Used a lot of solutions like, edite my web.config more than 30 times with:

<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>

Changed code, tested boudles, adding characteristics on iis, changed path, after all intents dat damn square always, nothing working.

So, in a forum reading about adding mimes types to iis with console i tried to add like that they said.

Opened a cmd as a admin and texted :

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

Where:

"C:\Windows\System32\inetsrv" it's the root folder of iss.

And:

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" It's the command line to setup that mime in appcmd, as you know, iis.

Result:

And et voilà ! that work.

I hope this can help to somebody. Could be useful for me.

I did some comparisons and it turns out the bootstrap.css file I had contained this:

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

whilst it should read:

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

Notice I've added an underscore which now matches the id declared inside <font id="..."> in the .svg file.

Copy the folder "fonts" from the bootstrap package on your server. And you're done.

来源：https://stackoverflow.com/questions/18678638/glyphicons-rendering-as-empty-box

标签

css

twitter-bootstrap

glyphicons