一些引导字形未加载 [英] Some bootstrap glyphicons not loading

问题描述

我有一个Bootstrap Sass源构建的WordPress主题。样式有效，但大多数字形都不起作用（仅星号和加号）。我正在将Bootstrap编译为 style.css ，相对于此，有一个名为 fonts 的文件夹字形（我设置了 $ icon-font-path： fonts /; ）这是我编译的 style.css中的代码片段表示字体路径正确：

I have a WordPress theme that I'm building with Bootstrap Sass source. The styles are working, but most of the glyphicons aren't (only asterisk and plus). I'm compiling my Bootstrap to the style.css and relative to that, there is a folder called fonts which holds the glyphicons (I set the $icon-font-path: "fonts/";) Here is a snippet from my compiled style.css to show that the fonts path is correct:

@font-face { font-family: 'Glyphicons Halflings'; src: url("fonts/glyphicons-halflings-regular.eot"); 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"); }
.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; }

例如，这些工作：

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

但是这些不是：

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

以下是glyphicon类的代码段：

Here's a snippet of the glyphicon classes:

.glyphicon-asterisk:before { content: "\2a"; }
.glyphicon-plus:before { content: "\2b"; }  
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }

我检查了网络标签，看它是否正在加载glyphicon字体，并且它们仅在出现时字形图标起作用（星号加号）。否则，字体文件甚至不会显示在网络标签中（甚至不会显示 404 ）。

I checked the network tab to see if it was loading the glyphicon fonts, and they only appear when the glyphicons work (asterisk, plus). Otherwise, the font file isn't even shown in the network tab (not even a 404).

推荐答案

问题是内容值未用引号引起来。这仍然是 www.getbootstrap.com sass源下载的问题，但最近已修复在 bootstrap-sass github回购中。

The issue was that the content values were not wrapped in quotes. This is still an issue with the www.getbootstrap.com sass source download, but was recently fixed in the bootstrap-sass github repo.

这篇关于一些引导字形未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！