CSS 渲染为空框的字形

Question

提问by John Dorean

I'm using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:

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

enter image description here

在此处输入图片说明

I've uploaded the Glyphicons fonts to my web root and changed the bootstrap.cssfile to point to their correct locations, which I've verified because they have 200 OKrequests in Chrome's dev tools:

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

enter image description here

在此处输入图片说明

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.

为什么字体可能呈现为空框的任何想法？StackOverflow 上的先前答案都指向不正确的字体路径，这里的情况并非如此，因为路径是正确的。

Answer 1

采纳答案by John Dorean

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

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

Answer 2

回答by Vlnflt

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

在 IIS 中，我为 woff 和 woff2 设置了 Mime 类型，如下所示：
```
.woff application/x-font-woff
.woff2 application/font-woff2
```

在我的页面的 CSS 中，我从引导程序 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 创建了一个类，并指定使用上面我命名为“Glyphs”的字体：
```
.glyphicon {
    font-family: 'Glyphs', sans-serif;
}
```
我想在任何地方显示一个字形，我指定了字形类，然后是典型的引导字形类：
```
<span class='glyphicon glyphicon-home'></span>
```

Answer 3

回答by Asghar Abbas

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

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

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

Answer 4

回答by Paul Schroeder

This can also happen if you haven't specified both classes (i.e. only "glyphicon-star" instead of "glyphicon glyphicon-star")

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

Good:

好的：

<i class="glyphicon glyphicon-star">

Bad

坏的

<i class="glyphicon">

Answer 5

回答by Marcos Antonio Ferreira Doming

Acording to Glyphicons team, this is a bug in WebKit:

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

WebKit CSS content Unicode bug?

WebKit CSS 内容 Unicode 错误？

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.

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

Answer 6

回答by Karthikeyan

Below css stanza defines font family for Glyphicons Halflings //inside bootstrap.css

下面的 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");
}

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

如果您使用的是 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

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/

所以如果你想在你的本地机器上使用带有 bootstrap.css 文件的 Glyphicons.. 从上面的链接下载所有这些文件并将其放在相同的相对路径中......即 ../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...

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

Answer 7

回答by tic

For me, I noticed that in the sass version, the _glyphicons.scssthe section:

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

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

Answer 8

回答by stukennedy

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>

Answer 9

回答by Beli Mon

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:

我有同样的麻烦。在我的情况下是 mime 类型，但之前不知道，因为我的 iis 不允许我在显示时通过 ui 添加：

My iis ui

我的 iis ui

I didn't think was mime types so tried others solutions. Hours later back to look about mime types.

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

Used a lot of solutions like, edite my web.config more than 30 times with:

使用了很多解决方案，例如，编辑我的 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>

Changed code, tested boudles, adding characteristics on iis, changed path, after all intents dat damn square always, nothing working.

更改代码，测试 boudles，在 iis 上添加特性，更改路径，毕竟意图始终是该死的方块，没有任何效果。

So, in a forum reading about adding mimes types to iis with console i tried to add like that they said.

因此，在阅读有关使用控制台向 iis 添加 mimes 类型的论坛中，我尝试像他们所说的那样添加。

Opened a cmd as a adminand texted :

以管理员身份打开一个 cmd并发短信：

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.

"C:\Windows\System32\inetsrv"这是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.

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"这是在 appcmd 中设置该 mime 的命令行，如您所知，iis。

Result:

结果：

And et voilà ! that work.

等等！那个工作。

I hope this can help to somebody. Could be useful for me.

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

Answer 10

回答by Jakob Hartman

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

在 bootstrap.css 文件中

CSS 渲染为空框的字形

提问by John Dorean

采纳答案by John Dorean

回答by Vlnflt

回答by Asghar Abbas

回答by Paul Schroeder

回答by Marcos Antonio Ferreira Doming

回答by Karthikeyan

回答by tic

回答by stukennedy

回答by Beli Mon

回答by Jakob Hartman

相关推荐

最近更新

标签

CSS 渲染为空框的字形

提问by John Dorean

采纳答案by John Dorean

回答by Vlnflt

回答by Asghar Abbas

回答by Paul Schroeder

回答by Marcos Antonio Ferreira Doming

回答by Karthikeyan

回答by tic

回答by stukennedy

回答by Beli Mon

回答by Jakob Hartman

相关推荐

CSS：隐藏的对象是否可点击？

CSS 我可以使用 list-style-type 来 div 标签吗？

CSS 将 2 个 Div 垂直居中在另一个内部

将 .css 文件添加到 ejs

相关推荐

最近更新

标签