Bootstrap 3 Glyphicons无效

Question

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

Answer 1

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

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

Answer 2

读者注意:请务必阅读@ 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的开发工具在网络标签中显示已下载的字体:

Answer 3

在我的情况下,我获得了404 字形 - 半身像 - regular.woff,以及移动浏览器上的非可见字形.

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

application/font-woff

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

application/x-font-woff

编辑:此时最新版本的Bootstrap(3.3.5)使用与.woff初始结果相同的.woff2字体,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,而不是依靠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

Answer 6

我正在仔细阅读我的这个老问题,因为到目前为止我应该给出正确的答案,我在评论中给出了这一点,我认为我也值得赞扬.

问题在于,从bootstrap的自定义工具下载的glyphicon字体文件与从bootstrap主页上找到的重定向下载的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

如果有人在这里结束并使用Bootstrap> = v4.0:将删除glyphicon支持

发布说明中的相关部分:

删除了Glyphicons图标字体.如果您需要图标,一些选项是:

Glyphicons的上游版本

Octicons

字体很棒

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

如果您想使用glyphicons,您需要单独下载.

我个人尝试过Font Awesome,它非常棒.添加图标类似于glypicon方式:

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

Answer 9

正如@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 10

.woff默认情况下IIS不会服务器文件,所以在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

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

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

谢谢.

Answer 12

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

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

原来是

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

这引起了一个问题

Answer 13

这是由于bootstrap.css和bootstrap.min.css中的编码错误造成的.从Customizer下载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文件,将实现此代码.

Answer 14

您的fonts目录中是否包含以下所有文件？

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

Answer 15

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

* {
    arial, sans-serif !important;
}

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

Answer 16

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

Answer 17

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

Answer 18

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

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

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

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