Bootstrap 3 Glyphicons不起作用
我下载了bootstrap 3.0，无法获得glyphicons的工作。 我得到某种“E003”错误。 任何想法为什么发生这种情况？ 我在本地和在线都尝试过，但我仍然遇到同样的问题。
我有同样的问题，除了在这个页面的隐藏评论，找不到任何有关它的信息。 根据Chrome我的字体文件加载得很好，但图标显示不正确。 我正在做这个答案，所以希望可以帮助别人。
我从Bootstrap 3的定制工具下载的字体文件有问题。 要获得正确的字体，请转至Bootstrap主页并下载完整的.zip文件。 从那里提取四个字体文件到你的字体目录，一切都应该工作。
请注意读者：请务必阅读@ 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所指出的那样，这也可能是一个模仿types的问题。 Chrome的开发工具在networking标签中显示下载的字体：
在我的情况下，我得到了一个404的glyphicons-halflings-regular.woff ，以及在移动浏览器上不可见的glyphicons。
看起来对于woff的MIMEtypes有一些困惑，不止一种MIMEtypes被不同的浏览器所接受，但是W3C说 ：
application/font-woff
编辑：在testing以下woff的MIMEtypes在当前所有浏览器上工作：
application/x-font-woff
编辑：此时Bootstrap的最新版本（3.3.5）使用与.woff相同的初始结果的.woff2字体，W3C仍在定义规范，但目前MIMEtypes似乎是：
application/font-woff2
– 如果你按照最高评分的答案，它仍然不工作 ：
Font文件夹必须与CSS文件夹在同一层。 修复bootstrap.css的path将不起作用。
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'); }
如果其他解决scheme无法正常工作，则可能需要从外部源导入graphics文件，而不是依靠Bootstrap来为您做所有事情。 去做这个：
你可以在HTML中做到这一点：
<link href="bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
或CSS：
@import url("bootstrap/3.0.0/css/bootstrap-glyphicons.css")
从这个线程信用edsiofi： Bootstrap 3 Glyphicons CDN
我正在审视我这个古老的问题，因为到目前为止应该是正确的答案，是我在评论中给出的，我想我也应该得到赞扬。
问题在于， 从bootstrap的定制工具下载的glyphicon字体文件与从bootstrap主页上find的redirect下载的字形文件不一样。 那些正在工作的应该是可以从以下链接下载的：
http://getbootstrap.com/getting-started/#download
任何有旧的不好定制程序文件的问题应该覆盖上面的链接的字体。
Azure网站缺lesswoff MIMEconfiguration。 您必须将以下条目添加到web.config中
<configuration> <system.webServer> <staticContent> <mimeMap fileExtension="woff" mimeType="application/font-woff" /> </staticContent> </system.webServer> </configuration>
正如@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'); }
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>
我修改了我的variablesless.less文件我修改了variables
@icon-font-path: "fonts/";
原来是
@icon-font-path: "../fonts/";
这是造成一个问题
这是由于bootstrap.css和bootstrap.min.css编码错误所致。 从定制程序下载Bootstrap 3.0时缺less以下代码：
@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文件，这个代码将被执行。
你的字体目录下面有所有的文件吗？
glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff
另一个问题/解决scheme可能是这个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或跨站点访问
这就是为什么这些图标没有显示给我的原因：
* { arial, sans-serif !important; }
在我删除了这部分的CSS ，所有的工作都应该如此。 重要的是那个造成麻烦的人。
这是一个很长的拍摄，但是这是我的情况，因为它已经不在这里了。
如果你正在使用gulp-sass或grunt-sass编译来自SASS的Twitter Bootstrap。 node-sass 。 确保你的节点模块是最新的，特别是如果你正在做一个相当老的项目。
事实certificate，在某些时候，在@font-face的@font-face的定义中使用SASS指令@at-root ，请参阅https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss 。
这里的问题是node-sass ie。 如果太旧， libsass不支持@at-root指令。 如果是这种情况，你会得到一个包含在@at-root中的@font-face ，浏览器不知道该怎么做。 这样做的结果是没有字体将被下载，你可能会看到垃圾，而不是图标。
这里是官方文档有关字体不呈现的说法。
更改图标字体位置Bootstrap假定图标字体文件将位于../fonts/目录中，相对于已编译的CSS文件。 移动或重命名这些字体文件意味着通过以下三种方式之一更新CSS：在源文件Less文件中更改@ icon-font-path和/或@ icon-font-namevariables。 利用Less编译器提供的相对URL选项。 更改编译的CSS中的url（）path。 使用最适合您的特定开发设置的任何选项。
除此之外，它可能是你错过了将字体文件夹复制到根目录
我从NuGet获得了Bootstrap。 当我发布我的网站时，字形不起作用。
在我的情况下，我通过将每个字体文件的“构build操作”设置为“内容”并将其设置为“始终复制”来实现。
确保你没有指定字体系列，例如
*{font-family: Verdana;}
将从i元素中删除半身人的字体。
注意：下面可能是一个利基的情况，但我想分享它，以防其他人可能会觉得有用。
在一个rails项目中，我们通过一个使用bootstrap-sass的Rails引擎来重新使用它。 除了glyphicon字体path分辨率外，主项目中的所有内容都很好。
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
我们发现$bootstrap-sass-asset-helper在parsing期间是false的，因为这个path是不同的。
我们通过执行以下操作，使$bootstrap-sass-asset-helper在引擎gem中被初始化：
// explicit sprockets import to get glyphicon font paths correct @import 'bootstrap-sprockets'; @import "bootstrap/variables";
例如，这导致pathparsing为：
/assets/bootstrap/glyphicons-halflings-regular.woff
再说一遍，在任何使用bootstrap-sass正常rails项目中，这都不是必须的，我们只是重复使用了很多的意见bootstrap-sass ，这对我们来说是成功的。 希望这可以帮助别人。
我遇到了同样的问题，浏览器无法find字体文件，我的问题是由于我的.htaccess文件中的排除是白名单文件，不应该发送到index.php进行处理。 由于字体文件无法加载，字符被replace为BLOB。
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA]
正如你所看到的，重写时不包括像image，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添加到白名单允许加载字体文件，然后字形应该正确显示。
我有这个问题，这是由variables.less文件引起的。 覆盖它来设置图标字体path值解决了问题。
文件结构如下所示：
\Content \Bootstrap \Fonts styles.less variables.less
在Content的根目录中添加我自己的variables.less文件，并在styles.less中引用它，解决了404错误。
Variables.less包含：
@icon-font-path: "fonts/";
您必须按以下顺序设置：
<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');}
我正在使用命名空间和graphics不工作的引导程序，但添加上面的代码graphics工作正常行后。
我只是使用Ctrl + c，Ctrl + v重新命名了bootstrap.css的字体，
您必须按以下顺序设置：
<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>
这个答案适用于使用Nancy（NancyFx）的任何人。
我有一个ASP.NET的NancyFX应用程序，我通过NuGet获得了Boostrap。
我的图标没有工作，但事实certificate，这不是一个错误的字体文件，不正确的CSS相对目录path，或其他答案中提到的其他事情的问题。
问题是，我错过了一个约定，告诉南希在哪里寻找内容。 一旦我意识到，解决scheme只是添加以下重载到我的启动文件：
protected override void ConfigureConventions(NancyConventions nancyConventions) { base.ConfigureConventions(nancyConventions); nancyConventions.StaticContentsConventions.Add( StaticContentConventionBuilder.AddDirectory("/fonts")); nancyConventions.StaticContentsConventions.Add( StaticContentConventionBuilder.AddDirectory("/Scripts")); }
我有一个框宽度代码\ e094为glyphicon-arrow-down，实际上我解决了在CSS类中添加象形文字的问题：
<i class="glyphicon glyphicon-arrow-down"></i>
如果它可以帮助某人
