我正在使用带有 Glyphicons 的优秀 Twitter 引导库，但是所有图标都呈现为空方块，如下所示：
我已将 Glyphicons 字体上传到我的 Web 根目录，并将bootstrap.css文件更改为指向它们的正确位置，我已经验证了这一点，因为它们200 OK在 Chrome 的开发工具中有请求：
这是我正在使用的标记：
<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>
任何想法为什么字体可能呈现为空框？StackOverflow 上的先前答案都指向字体的不正确路径，这里的情况并非如此，因为路径是正确的。
不是真正的解决方案，但我最终只使用了 Bootstrap CDN： http: //www.bootstrapcdn.com/
我遇到了同样的问题，我能够解决它！
在 IIS 中，我将 woff 和 woff2 的 Mime 类型设置如下：
.woff application/x-font-woff
.woff2 application/font-woff2
在我页面的 CSS 中，我为 woff 和 woff2 创建了从引导 Glyphicon 下载中加载的字体：
@font-face {
font-family: 'Glyphs';
src: url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
}
在 CSS 中，我为 glyphicons 创建了一个类，并指定使用上面我命名为“Glyphs”的字体：
.glyphicon {
font-family: 'Glyphs', sans-serif;
}
我想在任何地方显示一个 glyphicon，我由 glyphicon 类指定，然后是典型的引导 glyphicon 类：
<span class='glyphicon glyphicon-home'></span>
将字体文件夹放在你的css目录中
它应该像
css/fonts/**.svg
css/fonts/**.woff
如果您没有指定这两个类（即只有“glyphicon-star”而不是“glyphicon glyphicon-star”），也会发生这种情况
好的：
<i class="glyphicon glyphicon-star">
坏的
<i class="glyphicon">
根据 Glyphicons 团队的说法，这是 WebKit 中的一个错误：
但我不明白为什么旧版本的 Chrome 会呈现这个。我已经在这里发布了版本，但是一位版主删除了我的答案。
对我来说，这是有效的标记......只是不同的图标类定义：
<a href="http://www.mysite.com/download" class="btn btn-primary">
<span class="glyphicons star"></span>
Download to Computer
</a>
下面的 css 节定义了 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");
}
如果您使用 CDN.. 所需的 EOT 和 woof 文件在 CDN URL 的相对路径中可用.. 即 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
所以如果你想在你的本地机器上使用带有 bootstrap.css 文件的 Glyphicons .. 从上面的链接下载所有这些文件并将其放在相同的相对路径中......即 ../fonts/
并立即尝试...
注意：我不知道该文件的许可（阅读一些用于商业用途的文档）。可能有一些引导程序提供的免费链接来下载这些文件......
对我来说，我注意到在 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');
}
对于那些之前尝试过一切但仍然没有工作的人，我改变了
.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 文件中
我有同样的麻烦。在我的情况下是 mime 类型，但以前不知道，因为我的 iis 不允许我按 ui 添加，因为我显示：
我不认为是哑剧类型，所以尝试了其他解决方案。几个小时后回来看看哑剧类型。
使用了很多解决方案，例如，编辑我的 web.config 超过 30 次：
<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>
更改了代码，测试了 boudles，在 iis 上添加了特性，更改了路径，毕竟意图总是该死的，没有任何效果。
因此，在一个阅读有关使用控制台将 mimes 类型添加到 iis 的论坛中，我尝试像他们所说的那样添加。
以管理员身份打开 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 作为按钮，实际上是一个<a>，如下所示：
<a href="#" id="btnPrevious" class="btn btn-default glyphicon-align-center glyphicon glyphicon-arrow-left"></a>
它看起来棒极了：
然后，有一天，我将 all<a>的样式设置为具有某种字体，如下所示：
.content-panel a {
font-family: 'Roboto', sans-serif;
color: #6B6C6F;
text-decoration: none;
}
这让我<a>的 's 看起来很漂亮，但我的箭头按钮看起来像这样：
经过一些谷歌搜索和尝试答案后，我注意到我所有的其他字形图标都很好，所以它不可能是这些答案之一。它必须对这个特定的图标做些什么。我回滚了一些最新的更改，这似乎有效。我将其缩小到那个 CSS 样式并将其更改为：
.content-panel a:not(.glyphicon) {
font-family: 'Roboto', sans-serif;
color: #6B6C6F;
text-decoration: none;
}
现在，无论您的解决方案是什么（也许您会选择不在<a>.content-panel 上设置所有 's 的样式），这里的问题是我给了一个代表字形图标的元素一个字体系列，它没有效果不太好。希望能帮助到你 ：）
重新构建项目后，图标现在显示正常。
我做了一些比较，结果发现我包含的 bootstrap.css 文件是这样的：
url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')
虽然它应该是：
url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')
请注意，我添加了一个下划线，它现在与<font id="...">.svg 文件中声明的 id 匹配。
从服务器上的引导程序包中复制文件夹“字体”。你完成了。