Bootstrap 3 Glyphicons无法正常工作

我下载了bootstrap 3.0，但无法使用字形图标。我收到某种“ E003”错误。任何想法为什么会这样？我在本地和在线都尝试过，但仍然遇到相同的问题。

我遇到了同样的问题，除了此页面上的隐藏评论之外，找不到任何有关它的信息。根据Chrome的显示，我的字体文件可以很好地加载，但是图标显示不正确。我正在回答这个问题，因此有望对其他人有所帮助。

我从Bootstrap 3的定制工具下载的字体文件出了问题。要获取正确的字体，请转到Bootstrap主页并下载完整的.zip文件。从那里提取四个字体文件到您的fonts目录，一切正常。

读者注意：关于定制器中的错误，请务必阅读@ user2261073的注释和@Jeff 的答案。这很可能是您造成问题的原因。

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

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

正如丹尼尔（Daniel）所说，这也可能是模仿型问题。Chrome的开发工具在“网络”标签中显示下载的字体：

就我而言，我得到了404的glyphicons-halflings- regular.woff和移动浏览器上不可见的glyphicons。

woff的MIME类型似乎有些混乱，不同的浏览器接受了不止一种MIME类型，但W3C表示：

application/font-woff

编辑：为woff测试以下MIME类型后，当前适用于所有浏览器：

application/x-font-woff

编辑：当前最新版本的Bootstrap（3.3.5）使用.woff2字体，其初始结果与.woff相同，W3C仍在定义规范，但此刻MIME类型似乎是：

application/font-woff2

-如果您遵循最高评分的答案，但仍无法使用：

该Font文件夹必须与CSS文件夹处于同一级别。修复路径bootstrap.css 无法正常工作。

Bootstrap.css必须完全像这样导航到该Fonts文件夹：

@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，而不是依靠Bootstrap来为您做任何事情。去做这个：

您可以在HTML中执行以下操作：

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

或CSS：

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

此线程归功于edsiofi：Bootstrap 3 Glyphicons CDN

如果其他人最终在这里使用Bootstrap> = v4.0：glyphicon支持被删除

发行说明的相关部分：

删除了Glyphicons图标字体。如果需要图标，则一些选项为：

Glyphicons的上游版本

Octicons

字体很棒

资料来源：https : //v4-alpha.getbootstrap.com/migration/#components

如果要使用字形图标，则需要单独下载。

我亲自尝试过Font Awesome，它相当不错。添加图标类似于glypicon方法：

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

我一直在研究我的这个老问题，因为到目前为止，我一直在评论中给出了迄今为止应该是正确的答案，所以我也应该为此感到赞赏。

问题在于，从bootstrap的定制工具下载的glyphicon字体文件与从bootstrap主页上的重定向下载的字体文件不同。可以正常工作的可以从以下链接下载：

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

任何人对旧的不良定制器文件有疑问的人都应覆盖上面链接中的字体。

Azure网站缺少woff MIME配置。您必须将以下条目添加到web.config中

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

如@Stijn所述，从中Bootstrap.css安装此软件包时，默认位置in 不正确Nuget。

更改此部分看起来像这样：

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

您可以添加此行代码并完成。

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

谢谢。

IIS .woff默认情况下不会处理文件，因此在IIS中，您需要向文件中添加一个<mimeMap>条目web.config。

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

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

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

我修改了我的variables.less文件，然后修改了变量

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

原来是

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

造成了问题

这是由于bootstrap.css和bootstrap.min.css中的编码错误所致。当您从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');
}

由于这是使用Glyphicons的主要代码，因此无法正常使用...

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

这就是为什么图标对我不显示的原因：

* {
    arial, sans-serif !important;
}

当我删除了这部分后CSS，一切都按预期进行。重要！是引起麻烦的原因。

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

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

并根据指南（.icon-* ---> .glyphicon .glyphicon-*）进行迁移时：

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

您忘记添加图标类（包含字体参考）：

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

以下是为我修复的问题。我在Firebug控制台中使用“错误的URI”错误。图标显示为E ###号。我必须在“字体”目录中添加一个.htaccess文件。 <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 可能的重复项：firefox上的可下载字体：错误的URI或不允许跨站点访问

这是一个很长的路要走，但这是我的事，因为现在还没有。

如果您使用gulp-sass或grunt-sass即从SASS编译Twitter Bootstrap 。node-sass。确保您的节点模块是最新的，尤其是当您在一个相当老的项目中工作时。

事实证明，一段时间之前，在字形图标@at-root的定义中使用了SASS指令@font-face，请参见https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scsss。

这里的陷阱就是那个node-sass。如果指令太旧，libsass则不支持@at-root。如果是这种情况，您将被@font-face包裹在@at-root其中，浏览器不知道如何处理。这样的结果是，将不会下载任何字体，并且您很可能会看到垃圾而不是图标。

注意：以下可能是一个小众场景，但我想与他人分享，以防其他人发现它有用。

在rails项目中，我们通过使用gem作为Rails引擎的gem进行了很多重用bootstrap-sass。除glyphicon字体路径分辨率外，其他所有项目在主项目中均正常。

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

我们发现，$bootstrap-sass-asset-helper是false该决议中，当我们希望它是真实的，所以路径是不同的。

我们$bootstrap-sass-asset-helper通过执行以下操作在引擎gem中初始化：

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

例如，这导致路径解析为：

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

再次重申，在使用的任何常规Rails项目中都没有必要这样做bootstrap-sass，因为我们恰好正在重用许多视图，因此对我们来说是可行的。希望这可以帮助其他人。

这是官方文档中有关未渲染字体的内容。

更改图标字体的位置Bootstrap假设图标字体文件相对于已编译的CSS文件位于../fonts/目录中。移动或重命名这些字体文件意味着以下列三种方式之一更新CSS：在源Less文件中更改@ icon-font-path和/或@ icon-font-name变量。利用Less编译器提供的相对URL选项。更改已编译CSS中的url（）路径。使用最适合您的特定开发设置的任何选项。

除此之外，可能是您错过了复制 fonts文件夹到根目录的操作

我遇到了这个问题，它是由variables.less文件引起的。覆盖它以设置icon-font-path值可以解决此问题。

结构化的文件如下所示：

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

在Content的根目录中添加我自己的variable.less文件，并在styles.less中引用此文件，可以解决404错误。

Variables.less包含：

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

我从NuGet获得了Bootstrap。当我发布网站时，字形不起作用。

就我而言，我通过将每个字体文件的“生成操作”设置为“内容”并将它们设置为“始终复制”来使其工作。

我为glyphicon-arrow-down设置了一个框宽代码\ e094，实际上我解决了在CSS类中添加glyphicon的问题，例如：

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

如果可以帮助某人...

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

*{font-family: Verdana;}

将从i元素中删除Halflings字体。

我遇到了同样的问题，浏览器无法找到字体文件，而我的问题是由于我的.htaccess文件中存在排除在外的原因，该文件将不应发送给index.php处理的文件列入了白名单。由于无法加载字体文件，因此将字符替换为BLOB。

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

如您所见，图像，rss和xml之类的文件已从重写中排除，但字体文件为.woff和.woff2文件，因此也需要将其添加到白名单中。

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

将woff和添加woff2到白名单允许加载字体文件，然后字形图标应正确显示。

您必须按以下顺序设置：

<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>

对我有用的是替换以下路线：

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

至

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

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

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

http://glyphicons.bootstrapcheatsheets.com/

希望能有所帮助。

@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的引导程序不起作用，但是在代码glyphicons中添加了上述行之后，工作正常。

我只是使用Ctrl + c，Ctrl + v从bootstrap.css重命名了字体，并且可以正常工作。