Bootstrap 3 glyphicon不工作

我下载了引导3.0，但无法让象形文字工作。我得到一些"E003"错误。知道为什么会这样吗?我在本地和网上都试过了，还是遇到同样的问题。

729878 次浏览
小开

读者注意:一定要阅读@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');
}

正如丹尼尔所指出的，这也可能是一种mimetype问题。Chrome的开发工具显示下载的字体在网络选项卡:

chrome network TAB font download

小开

我也有同样的问题，除了在本页的隐藏评论中，我找不到任何关于它的信息。根据Chrome浏览器，我的字体文件加载正常，但图标显示不正常。我把这个作为答案，希望能帮助到其他人。

我从Bootstrap 3的定制工具下载的字体文件有问题。要获得正确的字体，请到引导主页并下载完整的.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的主要代码，所以它不会在ofc…

从完整的包中下载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');
}
小开

下载完整/非定制包从那里的网站和替换您的字体文件与非定制包字体。意志是固定的。

小开

在我的情况下，我得到了一个404 < em > glyphicons-halflings-regular.woff < / em >，和不可见的字形在移动浏览器。

看起来woff的MIME类型有些混乱，不同的浏览器接受不止一种MIME类型，但是W3C说:

application/font-woff

编辑:在测试以下MIME类型的woff作品目前在所有浏览器:

application/x-font-woff

编辑:目前Bootstrap的最新版本(3.3.5)使用.woff2字体，初始结果与.woff相同，W3C仍然是定义规范，但目前MIME类型似乎是:

application/font-woff2
小开

我遇到了这个问题，它是由变量引起的。更少的文件。重写它以设置icon-font-path值解决了这个问题。

文件结构如下所示:

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

添加我自己的变量。在Content的根目录中添加less文件，并在样式中引用它。Less解决了404错误。

变量。不包含:

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

我从NuGet得到Bootstrap。当我发布我的网站时，符号不起作用。

在我的案例中，我通过将每个字体文件的构建动作设置为“内容”并将其设置为“始终复制”来工作。

小开

另一个问题/解决方案可能是使用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>
小开

我面临的问题是Mac/PC转换。我从MAc开发人员那里收到了一个模板，上面有图像、字体、字形和你能想到的所有东西。当你将文件加载到PC上时，问题就会显现出来。默认情况下，文件名为绿色。这意味着它们不会起作用。你会得到原始的HTML和破碎的链接。

这里有一个快速的解决方法。压缩你收到的所有文件，并将它们解压缩到不同的文件夹中。所有的文件名现在将是黑色的，将工作完美。

祝你好运。

小开

它看起来像一个UTF字符问题在你的css。只要用新的一个更新你的引导css文件。

小开

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

小开

例如，如果您希望图标为glyphicon-chevron-left

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

小开

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

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

这个答案适用于任何使用Nancy (Nancy fx)的人。

我有一个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"));
}
小开

以下是什么修复了它为我。我在Firebug控制台中使用“坏URI”错误。图标显示为e# ##数字。我必须在“fonts”目录中添加一个.htaccess文件。 & lt; FilesMatch“\ (ttf |传递|测试结束| woff) $”比; & lt; IfModule mod_headers.c> 报头设置Access-Control-Allow-Origin "*" & lt; / IfModule> & lt; / FilesMatch> 可能重复:firefox上可下载的字体:错误的URI或跨站点访问不允许

小开

您必须按以下顺序设置:

<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');
}
小开
我修改了我的less变量。更少的文件 我修改了变量

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

最初的是

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

这造成了一个问题

小开

默认情况下，IIS不会服务器.woff文件，所以在IIS中，你需要在你的web.config文件中添加一个<mimeMap>条目;

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

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

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

如果它能帮助某人…

小开

例如，确保你没有过度指定字体族

*{font-family: Verdana;}

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

小开

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

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

http://glyphicons.bootstrapcheatsheets.com/

希望这能有所帮助。

小开

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

在一个rails项目中，我们通过使用bootstrap-sass的rails引擎gem重用了相当多的东西。除了象形字体路径分辨率外，主项目中一切都很好。

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

在解析过程中，我们发现$bootstrap-sass-asset-helper是false，而我们期望它为真，因此路径不同。

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

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

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

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

同样，这在任何使用bootstrap-sass的正常rails项目中都不应该是必要的，我们只是碰巧重用了很多视图，这为我们解决了问题。希望这能帮助到其他人。

小开

如果你使用CDN作为引导CSS文件，它可能是罪魁祸首，因为字形文件(例如glyphicons-halflings-regular.woff)也来自CDN。

在我的例子中，我使用微软的CDN遇到了这个问题，但切换到MaxCDN的解决了它。

小开
最佳答案

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

问题在于从bootstrap的自定义工具下载的Glyphicon字体文件与从bootstrap的主页上找到的重定向下载的文件不相同。那些正常工作的是那些可以从以下链接下载的:

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

任何对旧的糟糕的定制文件有问题的人都应该从上面的链接覆盖字体。

小开
我在Eclipse中使用web片段时遇到了这个问题。字体文件被损坏时，包装在web片段jar。 将字体文件复制到使用片段的项目中就解决了这个问题
小开

-如果你选择了评分最高的答案，但它仍然不起作用:

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

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

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

如果其他解决方案不起作用，您可能希望尝试从外部源导入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")

来自此线程:引导3 Glyphicons CDN的功劳给edsiofi

小开

这就是为什么图标没有出现在我面前的原因:

* {
arial, sans-serif !important;
}

在我删除了CSS的这一部分之后，一切都正常工作了。重要的是引起麻烦的那个。

小开

这是一个很长的拍摄，但这是我的案子，既然它已经不在这里了。

如果你正在使用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，浏览器不知道该做什么。这样做的结果是不会下载任何字体，你可能会看到垃圾而不是图标。

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

我使用bootstrap命名空间和象形文字不工作，但在代码中添加上面一行象形文字工作正常。

小开

我只是用Ctrl+c, Ctrl+v重命名了bootstrap.css的字体，它工作了。

小开

以下是官方文件中关于字体不渲染的说明。

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

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

小开

我工作使用VS2015, ASP。Net MVC 6 (rc)，也有问题(错误消息到引用，图标未显示)与生产中的gliphicons(它在VS(开发)中工作) 原因似乎是，微软cdn页面关闭了(至少现在来自瑞士): http://www.websitedown.info/ajax.aspnetcdn.com < / p > 因此(作为临时解决方案)，我已经改变了_Layout中的外部引用。cshtml(在环境名称下="Staging,Production")到"internal"引用:
来自:< / p > 

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

在此之后，它又可以工作了。

小开

我也面临同样的问题，CSS很好，没有问题。

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

小开

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

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

小开

您必须按以下顺序设置:

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

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

小开

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

enter image description here

小开

如果你使用Visual Studio(2015年，在我的情况下)来创建一个ASP。NET Webforms Web Application，带有Bootstrap主题，默认情况下，字形存储在项目根目录下的/fonts文件夹中。

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

小开

以防有人在这里结束并使用Bootstrap >= v4.0: 取消对象形文字的支持

发行说明中的相关部分:

删除Glyphicons图标字体。如果你需要图标，一些选项是:

Glyphicons的上游版本

Octicons

< a href = " http://fontawesome。io/" rel="noreferrer">Font Awesome . io/" rel="noreferrer">

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

如果你想使用象形文字，你需要单独下载。

我个人尝试过Font Awesome，它是相当好的。添加图标的方式类似于glypicon:

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

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

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

谢谢。

小开
我也有类似的问题。 作为一个bootstrap的新手，原来我在图标名称之前缺少glyphicon关键字 
<span class="glyphicon-search"></span>

应该是

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

我在硬盘里找这些文件

glyphicons-halflings-regular.woff


glyphicons-halflings-regular.woff2


glyphicons-halflings-regular.eot


glyphicons-halflings-regular.svg


glyphicons-halflings-regular.ttf

然后在。net项目中复制它们的字体文件

小开

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


提交答案