Glyphicons rendering as empty box

2019-01-24 02:07发布

问题:

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.

回答1:

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



回答2:

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>
    


回答3:

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

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


回答4:

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.



回答5:

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


回答6:

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>


回答7:

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



回答8:

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


回答9:

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



回答10:

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.



回答11:

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.



回答12:

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