372

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

4

48 回答 48

480

我遇到了同样的问题，除了在此页面上的隐藏评论中找不到任何有关它的信息。根据 Chrome，我的字体文件加载得很好，但图标显示不正确。我正在将此作为答案，因此希望对其他人有所帮助。

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

于 2013-08-27T20:31:42.107 回答
239

读者注意：请务必阅读@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 所指出的，这也可能是一个 mimetype 问题。Chrome 的开发工具在网络选项卡中显示下载的字体：

chrome 网络标签字体下载

于 2013-08-21T23:10:55.530 回答
78

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

看起来对于 woff 的 MIME 类型存在一些混淆，不同的浏览器接受不止一种 MIME 类型，但W3C 说：

application/font-woff

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

application/x-font-woff

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

application/font-woff2
于 2013-10-28T17:12:47.580 回答
59

- 如果您遵循了评分最高的答案，但它仍然无法正常工作：

该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');
}
于 2014-11-05T22:05:08.223 回答
54

如果其他解决方案不起作用，您可能想尝试从外部源导入 Glyphicons，而不是依靠 Bootstrap 为您完成所有工作。去做这个：

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

<link href="//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

于 2015-06-12T12:51:18.337 回答
33

万一其他人在这里结束并使用 Bootstrap >= v4.0: glyphicon 支持被丢弃

发行说明中的​​相关部分：

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

Glyphicons的上游版本

八角形

字体真棒

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

如果要使用 glyphicons，则需要单独下载。

我个人尝试过 Font Awesome，它非常好。添加图标类似于glypicon的方式：

<i class="fas fa-chess"></i>
于 2018-01-02T12:32:56.930 回答
22

我正在查看我的这个老问题，因为到目前为止应该是正确的答案，是我在评论中给出的，我认为我也应该得到它的荣誉。

问题在于从引导程序的定制工具下载的字形字体文件与从引导程序主页上的重定向下载的字体文件不同。那些可以正常工作的是可以从以下链接下载的那些：

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

任何对旧的错误定制器文件有问题的人都应该覆盖上面链接中的字体。

于 2014-10-02T14:11:40.723 回答
19

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

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

谢谢。

于 2018-04-10T05:05:04.043 回答
18

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

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration>
于 2015-02-04T14:44:40.080 回答
16

正如@Stijn 所述，Bootstrap.css从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');
}
于 2013-10-11T19:51:32.927 回答
8

默认情况下， 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>
于 2014-04-30T13:06:56.683 回答
7

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

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
于 2013-10-05T18:05:58.390 回答
7

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

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

原来是

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

它导致了一个问题

于 2014-03-30T06:36:56.010 回答
6

这是由于 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 的主要代码，因此它无法正常工作...

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

于 2013-09-26T10:03:12.137 回答
6

这就是为什么图标没有显示给我的原因：

* {
    arial, sans-serif !important;
}

在我删除了我的这部分之后CSS，一切都按原样进行。!important 是造成麻烦的那个。

于 2015-07-20T17:03:15.253 回答
5

另一个问题/解决方案可能是这个 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>
于 2013-12-29T13:19:00.070 回答
5

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

于 2014-03-08T04:40:57.413 回答
5

这是一个很长的镜头，但这是我的情况，因为它还没有在这里。

如果你使用gulp-sass或grunt-sassie 从 SASS 编译 Twitter Bootstrap。node-sass. 确保您的节点模块是最新的，特别是如果您正在处理一个相当旧的项目。

事实证明，在一段时间之前，SASS 指令@at-root用于@font-facein glyphicons 的定义，请参阅https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .

这里的问题是，node-sass即。如果该指令太旧，libsass则不支持该指令。@at-root如果是这种情况，您将得到一个@font-face包装在@at-root浏览器不知道该怎么做的情况下。这样做的结果是不会下载任何字体，您可能会看到垃圾而不是图标。

于 2015-07-21T22:17:28.247 回答
4

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

在一个 Rails 项目中，我们通过一个使用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，我们只是碰巧重用了很多视图，这对我们来说很有效。希望这可以帮助别人。

于 2014-09-03T18:49:22.450 回答
4

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

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

除此之外，您可能错过了将字体文件夹复制到根目录

于 2015-12-09T11:13:14.980 回答
3

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

文件结构如下：

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

在 Content 的根目录中添加我自己的 variables.less 文件并在 styles.less 中引用它解决了 404 错误。

Variables.less 包含：

@icon-font-path:          "fonts/";
于 2013-12-27T06:33:04.673 回答
3

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

*{font-family: Verdana;}

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

于 2014-05-14T13:03:51.143 回答
3

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

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

于 2013-12-27T14:55:44.117 回答
3

我有一个用于 glyphicon-arrow-down 的框宽度代码 \e094，实际上我解决了在 css 类中添加glyphicon的问题，如下所示：

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

如果它可以帮助某人...

于 2014-05-04T18:22:02.707 回答
3

我遇到了同样的问题，浏览器无法找到字体文件，我的问题是由于我的 .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到白名单允许加载字体文件，然后字形应该正确显示。

于 2016-03-25T00:55:08.150 回答
2

您必须按此顺序设置：

<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>
于 2014-03-08T11:39:09.557 回答
2

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

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

http://glyphicons.bootstrapcheatsheets.com/

希望有帮助。

于 2014-06-20T18:26:07.177 回答
2

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

@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');
}
于 2014-03-28T10:46:21.180 回答
2

我刚刚使用 Ctrl+c、Ctrl+v 重命名了 bootstrap.css 中的字体，并且它起作用了。

于 2015-11-16T13:41:59.163 回答
2 
@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');}

我正在使用带有命名空间和字形图标的引导程序不起作用，但是在代码字形图标中添加上述行之后，它工作正常。

于 2015-10-22T05:08:41.767 回答
2

您必须按此顺序设置：

<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>
于 2016-03-11T09:29:16.123 回答
1

如果您将 CDN 用于引导 CSS 文件，它可能是罪魁祸首，因为字形文件（例如glyphicons-halflings-regular.woff）也是从 CDN 获取的。

就我而言，我使用 Microsoft 的 CDN 遇到了这个问题，但切换到MaxCDN解决了​​这个问题。

于 2014-09-17T18:01:28.737 回答
1

检查是否glyphicons-halflings-regular.woff存在glyphiconshalflings-regular.woff

于 2014-02-12T14:54:01.837 回答
1

此答案适用于使用 Nancy (NancyFx) 的任何人。

我有一个 ASP.NET 托管的 NancyFX 应用程序，我通过 NuGet 获得了 Boostrap。

我的字形图标不起作用，但事实证明这不是字体文件错误、CSS 相对目录路径不正确或其他答案中提到的任何其他问题的问题。

问题是我错过了一个约定，告诉南希在哪里寻找内容。一旦我意识到这一点，解决方案就是将以下重载添加到我的引导程序文件中：

protected override void ConfigureConventions(NancyConventions nancyConventions)
{
    base.ConfigureConventions(nancyConventions);
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/fonts"));
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/Scripts"));
}
于 2014-03-03T00:31:22.150 回答
1

我在 Eclipse 中使用 web 片段时遇到了这个问题。字体文件在打包到 Web 片段 jar 时已损坏。将字体文件复制到使用片段的项目中解决了这个问题。

于 2014-11-03T15:49:35.147 回答
1

如果您使用 Visual Studio（在我的例子中是 2015 年）创建带有 Bootstrap 主题的 ASP.NET Webforms Web 应用程序，默认情况下，字形图标存储在项目根目录下的 /fonts 文件夹中。

如果您开始将 /Content 下的引导文件重新排列到子文件夹中（例如，以支持多个主题），引导程序中的所有引用都../fonts/将中断。您可以将字体文件夹移动到 下的适当相对路径/Content，或者将所有引用从 重命名../fonts为/fonts。

于 2017-09-12T14:02:59.667 回答
1

以前的答案都不适合我....

问题是我正在尝试<span class="icones glyphicon glyphicon-pen"> ，一小时后我意识到这个图标不包含在 Bootstrap 包中！虽然信封图标工作正常..

于 2016-03-04T23:55:03.917 回答
0

我必须创建一些重写条件来允许它们：

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)
于 2014-02-20T09:41:28.857 回答
0

从该站点下载完整/非自定义包，并用非自定义包字体替换您的字体文件。它的意志是固定的。

于 2013-10-27T07:47:22.677 回答
0

我在我的硬盘中搜索了这些文件

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

然后将它们复制到我的.net项目的字体文件中

于 2020-05-12T09:25:55.550 回答
0

我遇到了类似的问题。作为一个在引导程序中的菜鸟，结果我在图标名称之前缺少了glyphicon关键字。

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

本来应该

<span class="glyphicon glyphicon-search"></span>
于 2020-04-21T10:26:42.383 回答
0

我使用 VS2015、ASP.NET MVC 6 (RC)，并且在生产中使用 gliphicons（它在 VS（开发）中工作）时也遇到了问题（参考的错误消息，未显示图标）。
原因似乎是，MS cdn 页面已关闭（至少现在来自瑞士）： http ://www.websitedown.info/ajax.aspnetcdn.com

因此（作为临时解决方法），我已将 _Layout.cshtml 中的外部引用（在环境名称 =“Staging,Production”下）更改为“内部”引用：
来自：

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"

至

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"

这样做之后，它再次工作。

于 2015-12-10T11:25:47.030 回答
0

我也遇到了同样的问题，CSS很好，没有问题。它还包含所有字体。

但是问题只有在我安装了“ glyphicons-halflings-regular.ttf”后才得到解决，我开始在 UI 上正确获取图标。

于 2016-01-28T15:57:38.920 回答
0

我正在使用 Angular2 和 SCSS，作为最佳实践，我只将我正在修改的引导文件复制到我的项目中，其他文件是从node_modules导入的。唯一的问题是 Glyphicons。经过多次尝试，我发现对我来说最好的解决方案是将字体文件复制到我的项目并直接将此路径设置为$ icon-font-path，如图所示：

在此处输入图像描述

于 2017-01-09T05:23:07.203 回答
0

如果您使用的是 CDN，请确保您使用的是最新版本的 CDN 链接。我使用的是以前版本的 CDN 链接，并试图添加我在网站上找到的较新图标（其中包含最新版本的图标），因此它没有显示在网页上。将 cdn 链接更改为最新版本可能会有所帮助。

于 2021-05-24T05:31:22.307 回答
-2

我面临的问题涉及 Mac/PC 转换。我从我们的 MAC 开发人员那里收到了一个模板，其中包含图像、字体、字形图标以及您能想到的所有其他内容。将文件加载到 PC 时会出现问题。文件名默认为绿色。这意味着它们将不起作用。您将获得带有损坏链接的原始 HTML。

这是快速修复。压缩您收到的所有文件，并将它们解压缩到不同的文件夹中。所有文件名现在都将是黑色的，并且可以正常工作。

祝你好运。

于 2014-01-21T21:03:02.380 回答
-2

它看起来像您的 CSS 中的 UTF 字符问题。只需用新的 .css 文件更新您的引导 css 文件。

于 2014-01-27T13:55:08.403 回答
-6

例如，如果您想要 glyphicon-chevron-left 的图标

尝试添加class="glyphicon glyphicon-chevron-left"

于 2014-02-17T09:03:36.997 回答