1. 博主原文
你在使用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>
但是他的显示却是这个样子的:
网上查找了很多解决办法,说法不一。下面来看看我是如何解决的。
发现不能显示之后我使用了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?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), 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'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }在idea中就会发现@font-face这部分报红,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。
所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist\fonts,就会发现如下文件:
,所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中,我是这样引用的,可能你也正在犯跟我一样的错误:
<link rel="stylesheet" href="../libs/bootstrap.css">在webstrom中看到我的libs目录是这样的:
是的,在使用bootstrap的大多样式的时候,单单是bootstrap.css这个文件就够了,不必引入全部的,这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候,是需要关联到字体图标相关的文件才得以实现的,所以当我引入整个bootstrap-3.3.7(您也可以部分引入,只要将你想要的功能的相关文件全部引入且目录无误即可),然后再在我的html中这样引入:
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">这样就能够正常显示字体图标:
总结:分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与bootstrap.css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。
2、Yii中使用
以上是博主的内容,讲述了不能加载的原因是没有找打目标的文件,下面介绍在Yii中,对于上述问题的解决方式。
首先去Bootstrap官网下载,打开
下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
解压后找到Yii项目当中调用其的路径,我的如图所示,把压缩包中的font文件夹拷贝出来,放置在与CSS文件夹同级的目录下
这里因为自己之前改写过bootstrap.min.css没有直接让CSS文件夹进行替换,如果之前并没有进行相关修改,可以直接使用原始的文件,就是把三个目录都拷贝出来,放在default文件夹下。注意这三个文件夹同级即可。这样CSS一会就可以调用到font文件夹下的内容。
然后在html源码的head头中包含<link type="text/css" rel="stylesheet" href="/assets/default/css/bootstrap.min.css" />
这里的路径是bootstrap.min.css所在的绝对路径。
因为已经将font文件夹引入进来,所以调用的时候便可以正常显示内容了。
3、图标列表
最后附上菜鸟教程列出的字体图标
打开