我正在使用优秀的Twitter Bootstrap库和Glyphicons，但是所有的图标都呈现为空白方块，如下所示：
我已将Glyphicons字体上传到我的Web根目录，并更改了bootstrap.css文件以指向它们的正确位置，我已经验证过，因为它们在Chrome的开发工具中有200 OK请求：
这是我使用的标记：
<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>
有什么想法可以解决字体呈现为空白方块的问题吗？StackOverflow上以前的答案都指向字体路径不正确，但这里并非如此，因为路径是正确的。
<i class="glyphicon glyphicon-star">
糟糕
<i class="glyphicon">
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>
将字体文件夹放置在您的CSS目录中
应该像这样进行
css/fonts/**.svg
css/fonts/**.woff
据Glyphicons团队称，这是WebKit中的一个bug:
WebKit CSS content Unicode bug?
但我不明白为什么旧版本的Chrome也可以渲染此内容。我在这里发布了版本信息，但一位管理员删除了我的回答。
对我来说，我注意到在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');
}
@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");
}
如果你想在本地机器上使用 bootstrap.css 文件中的 Glyphicons，那么请从上面的链接下载所有文件并将其放在相同的相对路径中，即 ../fonts/
现在可以尝试了...
注意：我不知道这些文件的许可证（阅读一些商业使用文档）。也许 Bootstrap 提供了一些免费链接来下载这些文件...
<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>
修改了代码，测试了包，添加了IIS上的特性，更改了路径，但是最终那个该死的方框总是出现，什么都不起作用。
于是，在一个论坛上阅读有关使用控制台向IIS添加MIME类型的内容时，我尝试按照他们说的方式添加。
以管理员身份打开cmd并输入：
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 ']" 这是在appcmd中设置mime的命令行，正如您所知，iis。
就这样！它可以工作。
我希望这能对某人有所帮助。对我来说可能很有用。
对于那些之前尝试了所有方法但仍然没有成功，我进行了修改
.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 文件中
对我来说，这个标记是有效的...只有图标类定义不同：
<a href="http://www.mysite.com/download" class="btn btn-primary">
<span class="glyphicons star"></span>
Download to Computer
</a>