【发布时间】：2015-03-31 19:18:24
【问题描述】：
我有一个使用 Bootstrap Sass 源代码构建的 WordPress 主题。样式有效，但大多数字形图标无效（只有星号和加号）。我正在将我的 Bootstrap 编译为style.css，相对于此，有一个名为fonts 的文件夹包含字形图标（我设置了$icon-font-path: "fonts/";）这是我编译的style.css 中的一个sn-p 以显示字体路径正确：
@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 类的 sn-p：
.glyphicon-asterisk:before { content: "\2a"; }
.glyphicon-plus:before { content: "\2b"; }
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }
我检查了网络选项卡以查看它是否正在加载字形字体，并且它们仅在字形工作时出现（星号，加号）。否则，字体文件甚至不会显示在网络选项卡中（甚至没有 404）。
【问题讨论】：
-
我记得前段时间引导编译器创建了无效的字体文件。当时图标要么显示错误的图标，要么只留下一个小方块来表示未知字符。当您使用不起作用的图标时，您会看到正方形吗？编辑：这是一个答案的链接，显示了我在说什么 - stackoverflow.com/a/18474869/2375493
标签： wordpress twitter-bootstrap sass glyphicons bootstrap-sass