Bootstrap 3 Glyphicons are not working

约定不等于承诺〃 2021-11-29 18:48 110阅读 0赞

# [Bootstrap 3 Glyphicons are not working][] #

## 解答1 ##

Note to readers: be sure to read [@user2261073's comment][user2261073_s comment] and [@Jeff's answer][Jeff_s answer] concerning a bug in the customizer. It's likely the cause of your problem.

--------------------

The font file isn't being loaded correctly. Check if the files are in their expected location.

@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.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }

As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:

![chrome network tab font download][]

## 解答2 ##

**-If you followed the highest rated answer and it's still not working**:

The `Font` folder **MUST** be on the same level as your CSS folder. Fixing the path in `bootstrap.css` **will not** work.

`Bootstrap.css` has to navigate to the `Fonts` folder *exactly* like this:

@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.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }

转载于:https://www.cnblogs.com/chucklu/p/11082411.html

[Bootstrap 3 Glyphicons are not working]: https://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-are-not-working
[user2261073_s comment]: https://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working/18369117#comment26972465_18369117
[Jeff_s answer]: https://stackoverflow.com/a/18474869/247702
[chrome network tab font download]: https://i.stack.imgur.com/35vy5.png