У меня есть тема WordPress, которую я создаю с исходным кодом Bootstrap Sass. Стили работают, но большинство глификонов нет (только звездочка и плюс). Я компилирую свой 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: "\2a"; }
.glyphicon-plus:before { content: "\2b"; }
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }
Я проверил вкладку сети, чтобы увидеть, загружаются ли шрифты глификонов, и они появляются только тогда, когда глификоны работают (звездочка, плюс). В противном случае файл шрифта даже не отображается на вкладке сети (даже 404
).