Bootstrap 3 Glyphicons无效

本文翻译自：Bootstrap 3 Glyphicons are not working

I downloaded bootstrap 3.0 and can't get the glyphicons to work. 我下载了bootstrap 3.0，无法让glyphicons工作。 I get some kind of "E003" error. 我收到某种“E003”错误。 Any ideas why this is happening? 任何想法为什么会这样？ I tried both locally and online and I still get the same problem. 我在本地和网上尝试过，我仍然遇到同样的问题。

---

#1楼

参考：https://stackoom.com/question/1F4cm/Bootstrap-Glyphicons无效

---

#2楼

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. 读者注意：请务必阅读@ user2261073的评论和@ Jeff关于定制器中的错误的答案 。 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. 如Daniel所示，它也可能是一个mimetype问题。 Chrome's dev tools show downloaded fonts in the network tab: Chrome的开发工具在网络标签中显示已下载的字体：

---

#3楼

I was having the same issue and couldn't find any information about it except in the hidden comments on this page. 我遇到了同样的问题，除了本页隐藏的评论外，找不到任何相关信息。 My font files were loading just fine according to Chrome, but the icons weren't displaying properly. 根据Chrome，我的字体文件加载得很好，但图标显示不正常。 I'm making this an answer so it will hopefully help others. 我正在给这个答案，所以它有望帮助别人。

Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. 我从Bootstrap 3的自定义工具下载的字体文件出了问题。 To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. 要获取正确的字体，请转到Bootstrap主页并下载完整的.zip文件。 Extract the four font files from there to your fonts directory and everything should work. 从那里提取四个字体文件到你的字体目录，一切都应该工作。

---

#4楼

This is due to wrong coding in bootstrap.css and bootstrap.min.css. 这是由于bootstrap.css和bootstrap.min.css中的编码错误造成的。 When you download Bootstrap 3.0 from the Customizer the following code is missing: 从Customizer下载Bootstrap 3.0时，缺少以下代码：

@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');
}

Since this is the main code for using Glyphicons, it won't work ofc... 由于这是使用Glyphicons的主要代码，因此它不会起作用...

Download the css-files from the full package and this code will be implemented. 从完整包中下载css文件，将实现此代码。

---

#5楼

Do you have all below files in your fonts directory 您的fonts目录中是否包含以下所有文件？

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

---

#6楼

As @Stijn described, the default location in Bootstrap.css is incorrect when installing this package from Nuget . 正如@Stijn所描述的，从Nuget安装此软件包时， Bootstrap.css的默认位置不正确。

Change this section to look like this: 将此部分更改为如下所示：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}