Bootstrap 3 Glyphicons无效

时间：2013-08-21 23:00:08

标签： twitter-bootstrap-3 glyphicons

我下载了bootstrap 3.0，无法让glyphicons工作。我收到某种“E003”错误。任何想法为什么会这样？我在本地和网上尝试过，我仍然遇到同样的问题。

48 个答案:

答案 0 :(得分：470)

我遇到了同样的问题，除了本页隐藏的评论外，找不到任何相关信息。根据Chrome，我的字体文件加载得很好，但图标显示不正常。我正在给这个答案，所以它有希望帮助别人。

我从Bootstrap 3的自定义工具下载的字体文件出了问题。要获取正确的字体，请转到Bootstrap homepage并下载完整的.zip文件。将四个字体文件从那里解压缩到你的fonts目录，一切都应该有效。

答案 1 :(得分：230)

读者注意：请务必阅读@user2261073's comment和@Jeff's answer，了解自定义程序中的错误。这可能是你问题的原因。

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

@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 network tab font download

答案 2 :(得分：76)

在我的情况下，我在 glyphicons-halflings-regular.woff 上获得了404，在移动浏览器上获得了非可见的glyphicons。

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

application/font-woff

编辑：在测试woff的以下MIME类型后，目前在所有浏览器上都有效：

application/x-font-woff

编辑：此时Bootstrap的最新版本（3.3.5）使用与.woff相同的初始结果的.woff2字体，W3C仍为defining the spec，但目前MIME类型似乎是：< / p> 

application/font-woff2

答案 3 :(得分：51)

- 如果您按照得分最高的答案而且仍然无效：

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

答案 4 :(得分：42)

如果其他解决方案无法正常工作，您可能需要尝试从外部源导入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

答案 5 :(得分：21)

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

问题在于，从bootstrap的自定义工具下载的 glyphicon字体文件与从bootstrap主页上找到的重定向下载的字体文件不同。那些正在运行的字体文件它们应该是可以从以下链接下载的那些：

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

任何遇到旧错误自定义程序文件问题的人都应该覆盖上面链接中的字体。

答案 6 :(得分：18)

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

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

答案 7 :(得分：15)

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

答案 8 :(得分：12)

如果其他人在此结束并使用Bootstrap＆gt; = v4.0：支持glyphicon支持

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

  

删除了Glyphicons图标字体。如果您需要图标，可以选择以下选项：

     

上游版Glyphicons

     

Octicons

     

Font Awesome

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

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

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

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

答案 9 :(得分：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>

答案 10 :(得分：7)

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

@icon-font-path:          "fonts/";
原来是

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

导致问题

答案 11 :(得分：6)

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

* {
    arial, sans-serif !important;
}

我删除了CSS的这一部分后，一切都按照应有的方式进行。重要的是导致麻烦的那个。

答案 12 :(得分：6)

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

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

答案 13 :(得分：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文件，将实现此代码。

答案 14 :(得分：5)

这是一个很长的拍摄，但这是我的情况，因为它已经不存在了。

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

事实证明，在某些时候，SASS指令@at-root用于字形中@font-face的定义，请参阅https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss。

这里的问题是node-sass即。如果libsass指令太旧，@at-root不支持@font-face指令。如果是这种情况，您将获得@at-root包裹在array.any?(&:zero?) && array.uniq.length > 1中，浏览器不知道如何处理。结果是没有下载任何字体，你可能会看到垃圾而不是图标。

答案 15 :(得分：5)

另一个问题/解决方案可能是使用此Bootstrap 2.x代码：

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

以及根据guide（.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>

答案 16 :(得分：5)

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

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

感谢。

答案 17 :(得分：5)

以下是为我修复的内容。我在Firebug控制台中使用“错误的URI”错误。图标显示为E ###数字。我必须在我的'fonts'目录中添加一个.htaccess文件。 <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 可能重复：Downloadable font on firefox: bad URI or cross-site access not allowed

答案 18 :(得分：4)

以下是关于不呈现字体的官方文档。

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

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

答案 19 :(得分：4)

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

在rails项目中，我们正在使用bootstrap-sass重复使用作为Rails引擎的gem。除了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";

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

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

同样，在任何使用bootstrap-sass的普通rails项目中都不需要这样做，我们恰好重复使用了很多视图，这对我们来说很有用。希望这可以帮助其他人。

答案 20 :(得分：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/";

答案 21 :(得分：3)

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

*{font-family: Verdana;}

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

答案 22 :(得分：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个文件，因此这些文件也需要添加到白名单中。 / p> 

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添加到白名单可以加载字体文件，然后字形图就可以正常显示。

答案 23 :(得分：3)

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

在我的情况下，我通过将每个字体文件的Build Action设置为'Content'并将它们设置为'Copy Always'来实现它。

答案 24 :(得分：2)

我有一个盒子宽度代码\ e094用于glyphicon-arrow-down，实际上我解决了在css类中添加 glyphicon 这样的问题：

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

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

答案 25 :(得分：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>

答案 26 :(得分：2)

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

答案 27 :(得分：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');}

我正在使用带有命名空间和glyphicons的bootstrap不能正常工作但在代码字形中添加上面的行后工作正常。

答案 28 :(得分：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');
}

答案 29 :(得分：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>

答案 30 :(得分：2)

这是你在bootstrap 3中包含图标的方法

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

http://glyphicons.bootstrapcheatsheets.com/

希望有所帮助。

答案 31 :(得分：1)

在Eclipse中使用Web片段时遇到此问题。打包到Web片段jar时，字体文件已损坏。 将字体文件复制到使用片段的项目可以解决问题。

答案 32 :(得分：1)

这个答案适用于使用Nancy（NancyFx）的任何人。

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

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

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

protected override void ConfigureConventions(NancyConventions nancyConventions)
{
    base.ConfigureConventions(nancyConventions);
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/fonts"));
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/Scripts"));
}

答案 33 :(得分：1)

如果你使用CDN作为bootstrap CSS文件，它可能是罪魁祸首，因为字形文件（例如 glyphicons-halflings-regular.woff ）也是从CDN中获取的。

在我的情况下，我使用Microsoft的CDN遇到了这个问题，但切换到MaxCDN解决了它。

答案 34 :(得分：1)

如果使用Visual Studio（2015，在我的情况下）创建ASP.NET Webforms Web应用程序，使用Bootstrap主题，默认情况下，glyphicons存储在项目根目录下的/ fonts文件夹中。

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

答案 35 :(得分：0)

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

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

答案 36 :(得分：0)

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

答案 37 :(得分：0)

我在硬盘上搜索了这些文件

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

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

答案 38 :(得分：0)

我遇到了类似的问题。 作为引导的入门者，事实证明我在图标名称之前缺少 glyphicon 关键字。

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

应该是

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

答案 39 :(得分：0)

从该网站下载完整/非自定义包，并使用非自定义包字体替换您的字体文件。它将固定下来。

答案 40 :(得分：0)

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

enter image description here

答案 41 :(得分：0)

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

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)

答案 42 :(得分：0)

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

但问题在我安装＆＃34; glyphicons-halflings-regular.ttf＆＃34;之后才得到解决。我开始在用户界面上正确地获取图标。

答案 43 :(得分：0)

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

因此（作为临时解决方法），我已将_Layout.cshtml中的外部引用（在环境名称=“分段，生产”下）更改为“内部”引用：
从：

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

这样做之后，它再次起作用。

答案 44 :(得分：0)

检查它是glyphicons-halflings-regular.woff而不是glyphiconshalflings-regular.woff

答案 45 :(得分：-2)

我遇到的问题涉及Mac / PC转换。我收到了MAc开发人员的模板，其中包含图像，字体，字形和其他您能想到的内容。将文件加载到PC时可以看到问题。默认情况下，文件名将为绿色。这意味着它们无法工作。您将获得包含损坏链接的原始HTML。

这是快速修复。压缩收到的所有文件，并将其解压缩到另一个文件夹中。所有文件名现在都是黑色的，并且可以完美地运行。

祝你好运。

答案 46 :(得分：-2)

它看起来像你的CSS中的UTF字符问题。只需使用new one更新您的bootstrap css文件。

答案 47 :(得分：-4)

例如，如果您想要glyphicon-chevron-left

的图标

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

相关问题
最新问题