Glyphicons rendering as empty box

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.

This is obviously an incorrect path, an older version of bootstrap or an older version of glyphicon. — Phillip Burch, Sep 08 '13 at 00:29
I think this link help you : http://stackoverflow.com/questions/18222849/bootstrap-3-glyphicons-cdn — Faisal Khan Samrat, Sep 08 '13 at 10:49
@PhillipBurch, it can't be an incorrect path issue because the network tab of the dev tools doesn't show a 404. I'm using Bootstrap 3 with the Glyphicons included in that so there's no version issue either. — John Dorean, Sep 08 '13 at 18:07
I'd encourage you to download the latest version of bootstrap 3 here: http://getbootstrap.com/customize/. It works fine for me. — Phillip Burch, Sep 08 '13 at 21:00

score 8 · Accepted Answer · answered Sep 16 '13 at 13:37

8

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

answered Sep 16 '13 at 13:37

John Dorean

3,744
9
51
82

score 4 · Answer 2 · answered Jan 08 '18 at 03:56

4

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

answered Jan 08 '18 at 03:56

Paul Schroeder

1,460
1
14
21

score 3 · Answer 3 · edited Nov 11 '15 at 01:55

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

score 3 · Answer 4 · edited Jun 16 '16 at 23:27

3

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

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

edited Jun 16 '16 at 23:27

gre_gor

6,669
9
47
52

answered Jun 16 '16 at 22:32

Asghar Abbas

31
1

score 1 · Answer 5 · edited May 23 '17 at 12:32

1

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 14 '14 at 20:06

Marcos Antonio Ferreira Doming

11
1

score 0 · Answer 6 · answered Oct 01 '13 at 23:43

0

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>

answered Oct 01 '13 at 23:43

stukennedy

1,088
1
9
25

score 0 · Answer 7 · edited Jun 11 '15 at 14:07

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

score 0 · Answer 8 · answered Nov 10 '15 at 23:33

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

score 0 · Answer 9 · answered Oct 02 '17 at 16:22

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

Beli Mon · Answer 10 · 2018-01-29T19:43:37.047

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.

Jon Koeter · Answer 11 · 2021-01-10T17:26:30.640

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:

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:

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

score 0 · Answer 12 · edited May 05 '21 at 01:41

0

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

edited May 05 '21 at 01:41

Ajith Gopi

1,509
1
12
20

answered May 03 '21 at 15:44

caseyteknology

1

score -1 · Answer 13 · answered Oct 11 '13 at 11:55

-1

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.

answered Oct 11 '13 at 11:55

Phil

2,232
1
26
35

2

Phil you forgot the underscore.. not sure how this went uncommented for so long! – Hugh Wood Jun 07 '14 at 14:49
doh... I bet that's Windows playing up again. I frequently cut&paste and find I've still got old content in the clipboard. I've started to press Ctrl+C a couple or more before trusting it. Good spot Hugh! – Phil Jun 07 '14 at 18:41
21

The two strings there are identical. I even MD5'ed them to be sure. – Polynomial Aug 05 '14 at 14:49

score -2 · Answer 14 · answered May 21 '16 at 15:01

-2

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

answered May 21 '16 at 15:01

Klaas

108
9

Glyphicons rendering as empty box

14 Answers14

Linked