呈现为空框的字形图标答案

【问题标题】：Glyphicons rendering as empty box呈现为空框的字形图标
【发布时间】：2013-09-11 18:51:02
【问题描述】：

我正在使用带有 Glyphicons 的优秀 Twitter 引导库，但是所有图标都呈现为空方块，如下所示：

我已将 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 上的先前答案都指向字体的错误路径，这里的情况并非如此，因为路径是正确的。

【问题讨论】：

你能把我们链接到你的网站吗？
这显然是不正确的路径，旧版本的 bootstrap 或旧版本的 glyphicon。
我觉得这个链接对你有帮助：stackoverflow.com/questions/18222849/bootstrap-3-glyphicons-cdn
@PhillipBurch，这不可能是一个不正确的路径问题，因为开发工具的网络选项卡没有显示 404。我正在使用带有 Glyphicons 的 Bootstrap 3，所以没有版本问题。
我鼓励您在此处下载最新版本的 bootstrap 3：getbootstrap.com/customize。它对我来说很好。

标签： css twitter-bootstrap glyphicons

【解决方案1】：

并不是真正的解决方案，但我最终只使用了 Bootstrap CDN：http://www.bootstrapcdn.com/

【讨论】：

【解决方案2】：

我遇到了同样的问题，我能够解决它！

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

【讨论】：

【解决方案3】：

将字体文件夹放在您的 css 目录中
它应该像

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

【讨论】：

【解决方案4】：

如果您没有指定这两个类（即仅“glyphicon-star”而不是“glyphicon glyphicon-star”），也会发生这种情况

好：

<i class="glyphicon glyphicon-star">

不好

<i class="glyphicon">

【讨论】：

【解决方案5】：

据 Glyphicons 团队称，这是 WebKit 中的一个错误：

WebKit CSS content Unicode bug?

但我不明白为什么旧版本的 Chrome 会呈现这个。我已经在这里发布了版本，但是一位版主删除了我的答案。

【讨论】：

【解决方案6】：

对我来说，是这个标记有效......只是图标类定义不同：

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>

【讨论】：

【解决方案7】：

下面的 css 节定义了 Glyphicons Halflings 的字体系列 //在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 的相对路径中找到.. IE， 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/

现在就试试吧……

注意：我不知道该文件的许可（请阅读一些用于商业用途的文档）。可能有一些引导程序提供的免费链接来下载这些文件...

【讨论】：

【解决方案8】：

对我来说，我注意到在 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');
}

【讨论】：

【解决方案9】：

对于那些之前尝试过一切但仍然没有工作的人，我改变了

.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 文件中

【讨论】：

【解决方案10】：

我也遇到了同样的问题。在我的情况下是 mime 类型，但以前不知道，因为我的 iis 不允许我按 ui 添加，因为我显示：

My iis ui

我不认为是 mime 类型，所以尝试了其他解决方案。几小时后回头看看 mime 类型。

使用了很多解决方案，例如编辑我的 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 的论坛中，我尝试像他们所说的那样添加。

以 admin 身份打开 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。

Result:

然后瞧！那个工作。

我希望这对某人有所帮助。可能对我有用。

【讨论】：

【解决方案11】：

我有一个字形图标作为按钮，实际上是一个<a>，像这样：

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

看起来棒极了：

然后，有一天，我将所有<a> 的样式设置为具有某种字体，如下所示：

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

这让我的<a> 看起来很漂亮，但我的箭头按钮看起来像这样：

经过一些谷歌搜索和尝试答案后，我注意到我的所有其他字形图标都很好，所以它不可能是这些答案之一。它必须对这个特定的图标做些什么。我回滚了一些最新的更改，这似乎有效。我将其缩小到那个 CSS 样式并将其更改为：

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

现在，无论您的解决方案是什么（也许您会选择不在 .content-panel 上设置所有 <a> 的样式），这里的问题是我给出了一个代表字形图标的元素font-family，效果不太好。希望对你有帮助:)

【讨论】：

【解决方案12】：

重新构建项目后，图标现在可以正常显示了。

【讨论】：

【解决方案13】：

我做了一些比较，结果发现 bootstrap.css 文件包含了这个：

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')

它应该是：

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular')

请注意，我添加了一个下划线，它现在与 .svg 文件中 <font id="..."> 中声明的 id 匹配。

【讨论】：

Phil 你忘记了下划线.. 不知道怎么这么久都没有注释！
doh... 我敢打赌，Windows 又开始玩了。我经常剪切和粘贴，发现剪贴板中仍有旧内容。在信任它之前，我已经开始按 Ctrl+C 几次或多次。好地方休！
那里的两个字符串是相同的。我什至对它们进行了 MD5 确定。

【解决方案14】：

从服务器上的引导程序包中复制文件夹“字体”。你就完成了。

【讨论】：