DDR爱好者之家

本地Bootstrap文件字体图标引入却无法显示问题的解决方法
站长资源 2024/11/28 佚名
46 1538
DDR爱好者之家 Design By 杰米

你在使用bootstrap字体图标的时候，是否遇到引用本地Bootstrap文件无法显示字体图标，而使用CDN服务器上bootstrap却能正常显示的问题。

在不能正常显示的时候，比如我要在一个按钮中使用一个√的字体图标，我的代码是这样子的：

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootstrap字体图标</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
 <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button> 
 </div> 
</body> 
</html>

但是他的显示却是这个样子的：

本地Bootstrap文件字体图标引入却无法显示问题的解决方法

网上查找了很多解决办法，说法不一。下面来看看我是如何解决的。

发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件，发现可以正常显示。所以问题应该出现在引入文件这里。
ctrl+左键进入glyphyicon，发现实现的代码是这样的：

@font-face {
 font-family: 'Glyphicons Halflings';

 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot"text-align: center">本地Bootstrap文件字体图标引入却无法显示问题的解决方法


所以glyphyicon这个样式，必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。

而在我的引用bootstrap文件中，我是这样引用的，可能你也正在犯跟我一样的错误：

<link rel="stylesheet" href="../libs/bootstrap.css">




在webstrom中看到我的libs目录是这样的：


本地Bootstrap文件字体图标引入却无法显示问题的解决方法


是的，在使用bootstrap的大多样式的时候，单单是bootstrap.css这个文件就够了，不必引入全部的，这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候，是需要关联到字体图标相关的文件才得以实现的，所以当我引入整个bootstrap-3.3.7（您也可以部分引入，只要将你想要的功能的相关文件全部引入且目录无误即可），然后再在我的html中这样引入：

<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">




这样就能够正常显示字体图标：


本地Bootstrap文件字体图标引入却无法显示问题的解决方法


总结：分析了那么多，意思就是字体图标这个样式的实现，需要关联到glyphyicon相关文件，你在引入bootstrap.css文件时，你要确保在与bootstrap.css的相对路径下，能够让他找到这些关联文件，而CDN服务器上的正式如此，如此才能让图标正常显示。


如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：


Bootstrap学习教程


Bootstrap实战教程


Bootstrap Table使用教程


Bootstrap插件使用教程


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米