首页 文章

Bootstrap 3 Glyphicons无效

提问于
浏览 次
334

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

twitter-bootstrap-3 glyphicons

30 回答

  • 229

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

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

    回复于
  • 38

    读者注意：请务必阅读@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

    回复于
  • 5

    在我的情况下，我得到的是 glyphicons-halflings-regular.woff 的404，以及移动浏览器上的不可见的字形 .

    看起来有一些关于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类型似乎是：

    application/font-woff2
    回复于
  • 3

    -If you followed the highest rated answer and it's still not working ：

    Font 文件夹 MUST 与CSS文件夹位于同一级别 . 修复 bootstrap.css will not 工作中的路径 .

    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');
}
    回复于
  • 2

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

    回复于
  • 3

    我正在仔细研究我的这个古老的问题，因为到目前为止应该是正确的答案，我在评论中给出了，我认为我也值得赞扬 .

    问题在于 glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. 正在运行的那些是可以从以下链接下载的那些：

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

    任何有旧的自定义程序文件问题的人都应该覆盖上面链接中的字体 .

    回复于
  • 5

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

    <configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration>
    回复于
  • 2

    正如@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');
}
    回复于
  • 15

    如果其他人在这里结束并使用Bootstrap> = v4.0： glyphicon support is dropped

    发布说明中的相关部分：

    删除了Glyphicons图标字体 . 如果你需要图标，一些选项是：Glyphicons Octicons Font Awesome的上游版本

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

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

    我个人尝试了Font Awesome，它非常好 . 添加图标类似于glypicon方式：

    <i class="fas fa-chess"></i>
    回复于
  • 5

    默认情况下，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>
    回复于
  • 6

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

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

    原来是

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

    这引起了一个问题

    回复于
  • 2

    这是由于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文件，将实现此代码 .

    回复于
  • 6

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

    glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
    回复于
  • 4

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

    以下是为我修复它的原因 . 我在Firebug控制台中使用"bad 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

    回复于
  • 5

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

    * {
    arial, sans-serif !important;
}

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

    回复于
  • 21

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

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

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

    这里的问题是 node-sass 即 . libsass 如果太旧，则不支持 @at-root 指令 . 如果是这种情况，你会得到一个包含在 @at-root 中的 @font-face ，浏览器不知道如何处理 . 结果是没有下载任何字体，你可能会看到垃圾而不是图标 .

    回复于
  • 50

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

    在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 是 $bootstrap-sass-asset-helper ，当我们预期它是真的时，所以路径是不同的 .

    我们通过执行以下操作导致 $bootstrap-sass-asset-helper 在引擎gem中初始化：

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

    例如这导致路径解决：

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

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

    回复于
  • 3

    以下是关于不渲染字体的官方文档 .

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

    除此之外，你可能错过了复制 fonts folder to the root directory

    回复于
  • 2

    我有这个问题，它是由variables.less文件引起的 . 覆盖它以设置icon-font-path值解决了问题 .

    结构化文件如下所示：

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

    在Content的根目录中添加我自己的variables.less文件并在styles.less中引用它解决了404错误 .

    Variables.less包含：

    @icon-font-path:          "fonts/";
    回复于
  • 9

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

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

    回复于
  • 4

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

    *{font-family: Verdana;}

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

    回复于
  • 18

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

    回复于
  • 3

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

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

    谢谢 .

    回复于
  • 8

    您必须按此顺序设置：

    <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>
    回复于
  • 3

    对我有用的是取代以下路线：

    @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');
}
    回复于
  • 463

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

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

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

    回复于
  • 75

    这是您在bootstrap 3中包含图标的方式

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

    http://glyphicons.bootstrapcheatsheets.com/

    希望有所帮助 .

    回复于
  • 7
    @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与命名空间和glyphicons不工作，但在代码glyphicons上面添加上面的行工作正常 .

    回复于
  • 2

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

    回复于

相关问题