一些 bootstrap 字形未加载
Some bootstrap glyphicons not loading
我有一个使用 Bootstrap Sass 源构建的 WordPress 主题。样式有效,但大多数字形图标无效(只有星号和加号)。我正在将我的 Bootstrap 编译为 style.css
并且相对于此,有一个名为 fonts
的文件夹,其中包含字形(我设置了 $icon-font-path: "fonts/";
)这是一个片段从我编译的 style.css
中可以看出字体路径是正确的:
@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-asterisk:before { content: "a"; }
.glyphicon-plus:before { content: "b"; }
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }
我检查了网络选项卡以查看它是否正在加载字形字体,它们仅在字形工作时出现(星号,加号)。否则,字体文件甚至不会显示在网络选项卡中(甚至 404
)。
问题是内容值没有用引号引起来。这仍然是 www.getbootstrap.com sass source download, but was recently fixed in the bootstrap-sass github 存储库的问题。
我有一个使用 Bootstrap Sass 源构建的 WordPress 主题。样式有效,但大多数字形图标无效(只有星号和加号)。我正在将我的 Bootstrap 编译为 style.css
并且相对于此,有一个名为 fonts
的文件夹,其中包含字形(我设置了 $icon-font-path: "fonts/";
)这是一个片段从我编译的 style.css
中可以看出字体路径是正确的:
@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-asterisk:before { content: "a"; }
.glyphicon-plus:before { content: "b"; }
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }
我检查了网络选项卡以查看它是否正在加载字形字体,它们仅在字形工作时出现(星号,加号)。否则,字体文件甚至不会显示在网络选项卡中(甚至 404
)。
问题是内容值没有用引号引起来。这仍然是 www.getbootstrap.com sass source download, but was recently fixed in the bootstrap-sass github 存储库的问题。