Twitter bootstrap 3 引导3图标不工作

我下载了Bootstrap3.0，但无法使图标正常工作。我得到了某种“E003”错误。知道为什么会这样吗？我在本地和网上都试过了，但仍然遇到同样的问题。

读者注意：一定要阅读并关注定制程序中的错误。这很可能是你问题的原因

---

字体文件未正确加载。检查文件是否位于预期位置

@font-face{
字体系列：“字形图标半身人”；
src:url（'../font/glyphicons-halflings-regular.eot'）；
src:url（'../font/glyphions-halflings-regular.eot？#iefix'）格式（'embedded-opentype'）、url（'../font/glyphions-halflings-regular.woff'）、url（'../font/glyphions-halflings-regular.ttf'）格式（'truetype'）、url（'../font/glyphions-halflings-regular.svg#glyphions-halflings-regular'）格式（'svg'）；
}

正如Daniel所指出的，这也可能是一个mimetype问题。Chrome的开发工具在网络选项卡中显示下载的字体：

---

我遇到了同样的问题，除了在本页的隐藏评论中，我找不到任何关于它的信息。根据Chrome，我的字体文件加载得很好，但图标显示不正确。我正在回答这个问题，希望它能帮助其他人

---

我从Bootstrap3的定制工具下载的字体文件有问题。要获得正确的字体，请转到并下载完整的.zip文件。将四个字体文件从那里提取到字体目录中，一切都应该正常。

这是由于bootstrap.css和bootstrap.min.css中的编码错误造成的。从自定义程序下载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');
}

因为这是使用Glyphicons的主要代码，所以它在C

---

从完整的软件包下载css文件，此代码将被实现。

字体目录中是否有以下所有文件

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

---

如@Stijn所述，从

Nuget

安装此软件包时，

Bootstrap.css

中的默认位置不正确

将此部分更改为如下所示：

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

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

---

在我的例子中，我得到了一个404，用于移动浏览器上不可见的glyphicons

woff的MIME类型似乎有些混乱，不同的浏览器接受多种MIME类型，但是：

编辑：在测试woff的以下MIME类型后，当前所有浏览器都可以使用：

application/x-font-woff

编辑：目前最新版本的Bootstrap（3.3.5）使用.woff2字体，其初始结果与.woff相同，W3C仍然使用.woff字体，但目前MIME类型似乎是：

application/font-woff2

---

我有这个问题，它是由variables.less文件引起的。覆盖它以设置图标字体路径值解决了问题

文件结构如下所示：

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

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

在内容的根目录中添加my own variables.less文件，并在styles.less中引用该文件，解决了404错误

Variables.less包含：

@icon-font-path:          "fonts/";

---

我从NuGet那里得到了引导。当我发布我的站点时，glyphs不起作用

---

在我的例子中，我通过将每个字体文件的构建操作设置为“Content”并将它们设置为“Copy Always”，使其正常工作

另一个问题/解决方案可能是具有以下引导2.x代码：

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

您忘记添加图标类（包含字体引用）：

---

下面是我修复它的方法。我在Firebug控制台中使用时遇到“坏URI”错误。图标显示为E####数字。我必须在我的“字体”目录中添加一个.htaccess文件。

标题集访问控制允许原点“*”

---

可能重复的：

您必须按此顺序设置：

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/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.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

@字体面{字体系列：'字形图标半身人'；
src:url（'../font/glyphicons-halflings-regular.eot'）；
src:url（'../fonts/glyphicons halflings regular.eot？#iefix'）格式（'embedded-opentype'），
url（'../fonts/glyphicons ALFLINGS REQUIRE.woff'）格式（'woff'），
url（'../fonts/glyphicons REQUIRE.ttf'）格式（'truetype'），
url（'../fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular'）格式（'svg'）；}

对我有效的方法是从以下位置替换路线：

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

到

---

我修改了less variables.less文件 我修改了变量

@icon-font-path:          "fonts/";    

原来是

@icon-font-path:          "../fonts/"; 

---

它导致了一个问题

默认情况下，IIS不会为

.woff

文件提供服务器，因此在IIS中，您需要向

web.config

文件添加

条目

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

---

我有一个用于glyphicon箭头向下的框宽代码\e094，事实上我解决了在css类中添加glyphicon的问题，如下所示：

<i class="glyphicon  glyphicon-arrow-down"></i>

---

如果它可以帮助某人…

例如，请确保您没有过度指定字体系列

*{font-family: Verdana;}

---

将从i元素中删除半身人字体

这就是在引导3中包含图标的方式

<span class="glyphicon glyphicon-bell"></span>

---

希望这能有所帮助。

注意：下面可能是一个利基场景，但我想分享一下，以防其他人发现它有用

在rails项目中，我们通过使用

引导sass

的gem（一个rails引擎）进行了大量的重用。除了glyphicon字体路径解析之外，主项目中的一切都很好

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

我们发现，

$bootstrap sass asset helper

在解析过程中是

false

，而我们预期它为true，因此路径不同

我们通过执行以下操作，在引擎gem中初始化了

$bootstrap sass asset helper

：

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

e、 g.这导致路径解析为：

/assets/bootstrap/glyphicons-halflings-regular.woff

---

同样，在任何使用

bootstrap-sass

的普通rails项目中，这都是不必要的，我们只是碰巧重用了很多视图，这对我们来说是可行的。希望这能对其他人有所帮助。

我一直在研究这个关于

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

/assets/bootstrap/glyphicons-halflings-regular.woff

http://getbootstrap.com/getting-started/#download

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

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

* {
    arial, sans-serif !important;
}

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

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

<i class="fas fa-chess"></i>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">