Glyphicons rendering as empty box

StackOverflow https://stackoverflow.com/questions/18678638

Question

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

enter image description here

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:

enter image description here

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.

Was it helpful?

Solution

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

OTHER TIPS

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

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>

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

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

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>

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

to

.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 had a glyphicon as a button, which was actually an <a>, like this:

<a href="#" id="btnPrevious" class="btn btn-default glyphicon-align-center glyphicon glyphicon-arrow-left"></a>

It looked awesome:

Nice glyphicon

Then, one day, I styled all <a>'s to have a certain font, like this:

.content-panel a {
    font-family: 'Roboto', sans-serif;
    color: #6B6C6F;
    text-decoration: none;
}

Which made my <a>'s look very nice, but my arrow-button look like this:

Ugly glyphicon

After some googling and trying answers I noticed all my other glyphicons were fine, so it couldn't be one of those answers. It had to do something with this specific icon. I rolled back some of my latest changes and that seemed to work. I narrowed it down to that CSS styling and changed it to:

.content-panel a:not(.glyphicon) {
    font-family: 'Roboto', sans-serif;
    color: #6B6C6F;
    text-decoration: none;
}

Now, whatever your solution might be (maybe you would choose not to style all of your <a>'s on the .content-panel like that), the problem here was that I gave an element that represented a glyphicon a font-family, which didn't work out very well. Hope it helps :)

After re-building the project, the icons are now showing up fine.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top