css - Bootstrap Glyphicons 不使用本地 Bootstrap 版本渲染

标签 css twitter-bootstrap-3 glyphicons

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

右下角有错误的快照:

enter image description here

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

enter image description here

On doing inspect element it contain all glyphicons its snapshot is-

enter image description here

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

最佳答案

它不起作用,因为您从 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 上字体的绝对链接...但这实际上没有意义。

关于css - Bootstrap Glyphicons 不使用本地 Bootstrap 版本渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28645733/

相关文章:

css - 为什么 fontello 的字体图标呈现为空框?

html - 无法在标签中居中输入

div 中的 css 额外空间

javascript - IE javascript 兼容性让我很苦恼

javascript - Internet Explorer 中的 Bootstrap Accordion 与其他浏览器的功能不同

html - 如何使用 Twitter Bootstrap 将 Glyphicons 水平居中

html - 使用 CSS 的信息框 - Bootstrap

html - Bootstrap 3 的事件按钮

html - Bootstrap/HTML - 说明

html - 如何从容器底部滚动获取文本,但将滚动条保持在浏览器的最右侧?