Glyphicons呈现为空盒子

Question

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

我已将Glyphicons字体上传到我的网络根目录，并将bootstrap.css文件更改为指向其正确的位置，我已经验证了这些位置，因为他们在Chrome的开发工具中有200 OK个请求：< / p>

这是我正在使用的标记：

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

为什么字体可能会呈现为空框的任何想法？ StackOverflow上的前一个答案都指向不正确的字体路径，但由于路径正确，因此不是这种情况。

Answer 1

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

Answer 2

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

• 在IIS中，我为woff和woff2设置了Mime类型，如下所示：

  .woff application/x-font-woff
  .woff2 application/font-woff2
  

• 在我的页面的CSS中，我创建了一个从bootstrap Glyphicon下载woff和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');
  }
  

• 在CSS中，我创建了一个glyphicons类，并指定使用我标题为＆＃34; Glyphs＆＃34;的上述字体：

  .glyphicon {
      font-family: 'Glyphs', sans-serif;
  }
  

• 我想在任何地方显示一个glyphicon，我是由glyphicon类指定的，然后是典型的bootstrap glyphicon类：

  <span class='glyphicon glyphicon-home'></span>
  

Answer 3

将fonts文件夹放在css目录中 它应该像

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

Answer 4

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

好：

<i class="glyphicon glyphicon-star">

为

<i class="glyphicon">

Answer 5

根据Glyphicons团队的说法，这是WebKit中的一个错误：

WebKit CSS content Unicode bug?

但我并不认为为什么旧版本的Chrome会呈现这一点。我在这里发布了版本，但是一位版主删除了我的答案。

Answer 6

对我而言，这个标记是有效的...只是不同的图标类定义：

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

Answer 7

下面的css节定义了Glyphicons Halflings的字体系列 //在bootstrap.css内部

#!/bin/awk -f

cmd = "bc <<< \"ibase=16;obase=2;"FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF"\""

result = ((cmd | getline binary_vector) > 0 ? binary_vector : -1)
close(cmd)
print "conversion result: " result

如果您正在使用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

所以如果你想在本地机器上使用Glyphicons和bootstrap.css文件.. 从上面的链接下载所有这些文件，并把它放在相同的相对路径...即../ fonts /

现在尝试......

注意：我不知道该文件的许可（阅读一些商业用途的文档）。可能是bootstrap提供了一些免费链接来下载这些文件...

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

Answer 9

对于那些曾经尝试过所有事情并且仍然没有工作的人我改变了

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

到

A_sorted = sort(A); % sort elements
A_diff = diff(A_sorted)~=0; % check if element is the different from the next one 
A_unique = [A_diff true] & [true A_diff]; % check if element is different from previous and next one
A = A_sorted(A_unique); % obtain the unique elements.

bootstrap.css文件中的

Answer 10

我遇到了同样的麻烦。在我的情况下是mime类型，但之前不知道因为我的iis没有让我添加ui，因为我显示：

My iis ui

我没想到是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的控制台，我试图像他们所说的那样添加。

将cmd打开为 admin 并发短信：

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:

等等瞧！那工作。

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

Answer 11

我有一个glyphicon作为按钮，实际上是一个，如下所示：

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

看起来很棒：

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

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

这使我的外观很好看，但是我的箭头按钮看起来像这样：

经过一些谷歌搜索和尝试性答案之后，我注意到我所有其他的glyphicons都很好，因此不可能是这些答案之一。它必须对此特定图标进行操作。我回滚了一些最新的更改，这似乎奏效了。我将其范围缩小为CSS样式，并将其更改为：

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

现在，无论您的解决方案是什么（也许您都选择不对.content-panel上的所有样式进行样式设置），这里的问题是我给了一个代表glyphicon的字体家族元素，效果不是很好。希望能有所帮助：）

Answer 12

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

Answer 13

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

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

虽然它应该是：

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

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

Answer 14

复制文件夹＆＃34; fonts＆＃34;从服务器上的bootstrap包。 而且你已经完成了。