【问题标题】:Bootstrap Glyphicons not rendering using local Bootstrap versionBootstrap Glyphicons 不使用本地 Bootstrap 版本呈现
【发布时间】:2015-04-23 02:54:06
【问题描述】:

我在 django 中使用引导程序,它适用于除图标类之外的所有其他引导程序类,例如:class="glyphicon glyphicon-download-alt"

右下角有错误的快照:

包含 bootstrap.min.css 文件时的快照:

在检查元素时,它包含所有字形图标,其快照是-

只有在我的 html 文件中链接 http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css 时它才有效;但如果我从我的电脑中包含我的bootstrap.min.css,它就不起作用。否则,每个引导类都可以完美运行。希望你能理解我的问题。提前致谢。

【问题讨论】:

  • 您的 PC 中包含的内容是什么意思?你在本地建吗?如果是这样,请在 Chrome 中测试该页面以查看是否出现与 Firefox 中相同的错误。实际上它不一定是 Chrome,但至少是非 Mozilla 的浏览器。
  • 不,我已经从上面的链接下载并保存在我的电脑中,它适用于所有引导类
  • 你也下载了 glyphicons 字体吗?
  • 不,他们不是。请重新阅读我的答案。您复制的 CSS 仅包含指向字形图标的链接,而不是实际字体本身。
  • 成功了。非常感谢。

标签: css twitter-bootstrap-3 glyphicons


【解决方案1】:

它不起作用,因为您从 CDN 链接保存了 CSS 文件。那是行不通的,因为字形图标是相对于该 CSS 文件链接的。示例:

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

这意味着,下载的 Bootstrap 文件正在您的计算机上(您没有)文件夹中寻找字形图标。

您需要从the official download link 正确下载Bootstrap。此官方下载包含一个 /fonts/ 目录,其中包含实际的 glyphicon 字体文件。

或者,您可以将 CDN 文件中的所有字体路径更改为指向 CDN 上字体的绝对链接……但这没有任何意义。

【讨论】:

  • 我试过了,但还是不行。它的快照包含所有 Glyphicons 文件。请帮忙。
  • 如果您下载官方压缩包,它可以直接使用。唯一不会的方法是在不更改相对链接的情况下移动某些内容。
  • 实际上我在 django 中工作,我只是将 css 文件复制到我的静态文件夹中,它适用于其他类。还告诉我什么是CDN。谢谢
  • 您可能还需要将fonts 文件夹复制到您的静态文件夹中。
  • 谢谢,一直在寻找解决这个问题的方法!
【解决方案2】:

我的问题终于解决了。实际上问题是在我们的网站中使用 Glyphicons 时,例如在 django 中,我们还必须从 bootstrap official link 下载的 bootstrap-3.3.2-dist 文件夹中复制字体文件夹

另一个问题是在哪里修复它。查看字体与 css 文件相关的结构,然后粘贴字体文件夹。

引导程序/ ├── 少/ ├── js/ ├── 字体/ ├── 距离/ │ ├── css/ │ ├── js/ │ └── 字体/ └── 文档/ └── 例子/

但它在静态文件夹内的 django 中对我有用。

【讨论】:

  • 我认为只需将 bootstrap.min.css 切换为 dist 中包含的那个即可解决问题。
猜你喜欢
  • 2016-04-03
  • 1970-01-01
  • 2015-03-14
  • 2014-02-25
  • 1970-01-01
  • 2014-12-16
  • 2014-10-17
  • 2013-08-15
相关资源
最近更新 更多