56

我正在从 bootstrap 2.3 迁移到 bootstrap 3，一切正常。但是当我尝试添加一些图标时，图标字体无法正确显示。我试图在这里查看http://bootply.com/61521并且只有“.glyphicon-envelope”被正确显示。其他人则显示像'E001'等等。

我怎样才能解决这个问题？

对于其他浏览器，字形图标可以正常显示，只有firefox无法正常显示。

4

14 回答 14

80

你选择了定制版的 Bootstrap 吗？存在自定义包中包含的字体文件损坏的问题（请参阅https://github.com/twbs/bootstrap/issues/9925）。如果您不想使用 CDN，则必须手动下载它们并将自己的字体替换为下载的字体：

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

之后尝试强力重新加载（CTRL + F5），希望它有所帮助。

于 2013-09-03T14:37:56.980 回答
40

图标和 css 现在从引导程序中分离出来。这是来自另一个stackoverflow答案的小提琴

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");

http://jsfiddle.net/aQrPd/1/

Bootstrap 3 Glyphicons CDN

于 2013-08-15T03:09:22.297 回答
29

好的，上面没有回答我的问题。我的字体文件夹与引导 css 和 js 文件夹位于同一位置（例如 /theme/bootstrap3/..），但它正在根目录中查找字体文件夹（例如 /fonts/glyph..woff）

我的解决方案是将 @icon-font-path 变量设置为正确的相对路径：

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

于 2013-10-23T09:17:36.853 回答
11

Here's the fix that worked for me. Firefox has a file origin policy that causes this. To fix do the following steps:

  1. open about:config in firefox
  2. Find security.fileuri.strict_origin_policy property and change it from ‘true’ to ‘false.’</li>
  3. Voial! you are good to go!

Details: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

You will only see this issue when accessing a file using file:/// protocol

于 2013-09-28T15:20:39.527 回答
6

我在使用本地 apache 服务器时遇到了同样的问题。这解决了我的问题：

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

对于 Amazon s3，您需要编辑 CORS 配置：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
于 2013-10-30T11:13:09.347 回答
5

首先，我尝试通过“官方”方式使用 zip 文件安装 glyphicons 字体。我做不到。

这是我的分步解决方案：

  1. 转到 Bootstrap 的网页，然后转到“组件”部分。
  2. 打开浏览器控制台。在 Chrome 中，Ctrl+Shift+C。
  3. 在“资源”部分的 Frames/getbootstrap.com/Fonts 中，您将找到实际运行 glyphicons 的字体。建议使用私有模式来规避缓存。
  4. 使用字体文件的 URL（右键单击资源列表中显示的文件），将其复制到新选项卡中，然后按 ENTER。这将下载字体文件。
  5. 再次复制选项卡中的 URL 并将字体扩展名更改为 eot、ttf、svg 或 woff，随心所欲。

但是，为了更容易访问，这是 woff 文件的链接。

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

于 2013-09-23T10:32:38.923 回答
3

我最终切换到 Font-Awesome Icons。它们同样好，如果不是更好，你需要做的就是在字体中链接，快乐的日子。

于 2013-12-03T16:17:43.090 回答
2

确保包含字体名称的文件夹的名称是“fonts”而不是“font”

于 2013-09-05T05:47:24.150 回答
1

你可以使用这样的标签：

<i class="fa fa-edit"></i>
于 2015-07-30T12:39:23.663 回答
1

以防万一 ：

例如，我刚刚尝试<span class="icones glyphicon glyphicon-pen"> 过，一小时后我意识到这个图标不包含在引导包中！虽然信封图标工作正常..

希望这可以帮助

于 2016-03-04T23:48:41.633 回答
0

正如其他人所指出的，定制器存在一些问题。

我遇到了字形图标也没有显示的问题，以及导航栏布局的问题。

我使用了该建议并从完整的 zip 中上传了字体/覆盖了自定义版本中的字体并修复了图标问题。

我还从 CDN 中提取了 CDN CSS 和 javascript，而不是我的本地副本。这解决了我的导航栏问题。

所以我建议在你掌握 Bootstrap 的窍门之前，不要使用自定义版本，因为你可能会得到一些令人沮丧的、不需要的结果。

于 2013-09-23T18:42:23.020 回答
0

对我来说，按照 bootstrap.css 中指定的位置放置我的字体文件夹解决了这个问题

大多数情况下，它的 字体 文件夹应该在 bootstrap.css 文件的父目录中。

我遇到了这个问题，并研究了很多答案，如果有人在 2015 年仍然面临这个问题，那么它要么是 CSS 问题，要么是文件的位置不匹配。

该错误已通过引导程序解决

于 2015-03-17T23:27:13.727 回答
0

这是支持上述答案的官方文档。

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

除了这个新用户会犯的错误是，在从官方网站下载引导 zip 之后。他们倾向于跳过字体文件夹以在他们的开发设置中进行复制。所以缺少字体文件夹也会导致这个问题

于 2015-12-09T11:03:25.153 回答
-1
  1. 尝试使用 CDN
  2. 尝试设置 Access-Control-Allow-Origin HTTP 标头
于 2014-04-24T09:26:46.580 回答