引导3个Glyphicons不工作引导3个Glyphicons不工作(Bootstrap 3 Gly

我下载的引导3.0和不能得到glyphicons工作。 我得到某种“E003”的错误。 任何想法，为什么发生这种情况？ 我想在本地和在线和我仍然得到了同样的问题。

Answer 1:

我也有同样的问题，但没有找到任何关于它的信息，除非在此页面上隐藏的评论。 我的字体文件加载了蛮好根据Chrome浏览器，但是它们的图标没有正常显示。 我在做这个答案，因此希望能帮助别人。

什么是错的，我是从引导3的定制工具下载的字体文件。 为了得到正确的字体，转到引导网页 ，并下载完整的.zip文件。 从那里四个字体文件解压到你的字体目录下，一切都应该工作。

Answer 2:

请注意，以飨读者：请务必仔细阅读@ user2261073的评论和@杰夫回答关于在定制的错误。 很可能你的问题的原因。

---

字体文件没有被正确加载。 检查文件是否已在其预期的位置。

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

正如丹尼尔表示，它也可能是一个MIME类型的问题。 Chrome的开发工具显示在网络选项卡中下载的字体：

Answer 3:

在我来说，我正在为glyphicons，半身人，regular.woff，并在移动浏览器不可见glyphicons 404。

貌似有关于MIME类型WOFF，不止一个MIME类型被不同的浏览器接受了一些混乱，但W3C说 ：

application/font-woff

编辑：目前，对所有的浏览器测试后，下面的MIME类型WOFF工作：

application/x-font-woff

编辑：在这个时候引导的最新版本（3.3.5）使用.woff2字体相同的初始结果作为.woff时，W3C仍然定义规范 ，但此刻的MIME类型似乎是：

application/font-woff2

Answer 4:

-如果您是收视率最高的答案，它仍然不工作 ：

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

Answer 5:

如果其他的解决方案不工作，你可能想尝试从外部源导入Glyphicons，而不是依靠引导为你做的一切。 去做这个：

您可以在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从这个线程： 引导3 Glyphicons CDN

Answer 6:

我一直在寻找通过我的这个老问题，因为什么被认为是正确的答案到现在为止，是由我在评论中给出的，我想我也应该得到它的信用。

这个问题的事实， 从引导的定制工具下载的glyphicon字体文件不与从在系统启动的网页中发现重定向下载的那些相同撒谎。 正在工作的，他们应该是可以从下面的链接下载的那些的那些：

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

具有老坏定制文件的问题任何人都应该从上面的链接覆盖的字体。

Answer 7:

Azure的网站缺少WOFF MIME配置。 您必须添加以下进入的web.config

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

Answer 8:

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

Answer 9:

如果有人在这里结束了，用引导> = V4.0：glyphicon支持被丢弃

相关部分从发行说明：

扔下Glyphicons图标字体。 如果你需要的图标，有些选项是：

的上游版本Glyphicons

Octicons

字体真棒

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

如果你想使用glyphicons你需要单独下载它。

我亲自试过字体真棒，这是相当不错的。 添加图标类似于glypicon方式：

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

Answer 10:

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>

Answer 11:

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

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

原来是

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

它是导致问题

Answer 12:

这是由于在bootstrap.css和bootstrap.min.css错误编码。 当你从下面的代码缺少定制下载引导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-文件，该代码会被执行。

Answer 13:

你有没有在你的字体目录下的所有文件，如下

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

Answer 14:

这是原因，为什么图标没有出现对我来说：

* {
    arial, sans-serif !important;
}

我已删除了我的这一部分之后CSS ，一切工作像它应该。 该！重要的是一个造成麻烦。

Answer 15:

另一个问题/溶液可以具有这种自举代码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>

Answer 16:

下面就是固定对我来说。 使用Firebug的控制台我得到的“坏URI”错误。 这些图标是显示出来为E ###号。 我不得不添加.htaccess文件在我的“字体”目录。 <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>的可能重复： 可下载的字体上火狐：坏URI或跨网站用户不允许访问

Answer 17:

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

如果你是从使用SASS编译Twitter的引导gulp-sass或grunt-sass即。 node-sass 。 确保您的节点模块是最新的，特别是如果你是在一个比较旧的项目工作。

事实证明，作为一段时间回SASS指令@at-root中的定义使用@font-face在glyphicons，看到https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss 。

这里的小问题，就是node-sass即。 libsass不支持@at-root指令，如果它太旧。 如果是这样的话，你会得到一个@font-face包裹在@at-root它的浏览器不知道该怎么做。 这样做的结果是，没有字体将被下载，你可能会看到垃圾，而不是图标。

Answer 18:

您可以添加这行代码和done。

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

谢谢。

Answer 19:

注意：下面可能是一个小众的情况，但我想分享的情况下，别人可能会觉得它有用。

在Rails项目中，我们通过的宝石，是使用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对发动机的宝石做初始化：

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

例如，这引起了解决的路径：

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

再次，这不应该的项目中使用是在任何正常轨道必要的bootstrap-sass ，我们只是碰巧被重用了很多意见，这摸索出适合我们。 希望这可以帮助别人。

Answer 20:

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

更改图标字体位置引导假定图标字体文件将设在../fonts/目录，相对于编译CSS文件。 移动或重命名这些字体文件是指以下三种方式之一更新CSS：更改@源较少文件图标，字体路径和/或@图标，字体名称的变量。 利用由少编译器所提供的相对URL选项。 更改URL（）在编译的CSS路径。 使用任何选项最适合您的具体开发设置。

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

Answer 21:

我有这个问题，它是由variables.less文件引起的。 重写它来设置图标，字体路径值解决了这个问题。

该文件的结构如下所示：

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

加入我自己的variables.less文件内容的根和styles.less引用此解决了404错误。

Variables.less包含：

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

Answer 22:

我来自的NuGet得到引导。 当我发表我的网站字形没有工作。

在我来说，我得到了它通过设定每一个字体文件的生成操作“内容”的工作，并将其设置为“一直拷贝”。

Answer 23:

请确保您没有结束指定的字体系列，例如

*{font-family: Verdana;}

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

Answer 24:

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

Answer 25:

你必须通过这个命令设置：

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

Answer 26:

什么工作对我来说是从替代路线：

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

Answer 27:

我有glyphicon箭头向下一箱宽度代码\ e094，其实我解决了CSS类一样，加入glyphicon问题：

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

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

Answer 28:

这是你如何包括引导3图标

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

http://glyphicons.bootstrapcheatsheets.com/

希望帮助。

Answer 29:

@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上面行后工作正常。

Answer 30:

我只是改名为使用Ctrl + C，Ctrl + V从bootstrap.css字体和它的工作。

文章来源: Bootstrap 3 Glyphicons are not working