全国咨询热线:18720358503

小程序订制开发_本地Bootstrap文件字体图标引入却

类别:媒体报道 发布时间:2021-01-12 浏览人次:

本地Bootstrap文件字体图标引入却无法显示问题的解决方法       这篇文章主要为大家详细介绍了本地Bootstrap文件字体图标引入却无法显示问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

你在使用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 
 button span /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;

,提示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服务器上的正式如此,如此才能让图标正常显示。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

小程序订制开发_本地Bootstrap文件字体图标引入却

当地Bootstrap文档字体样式标志引进却没法显示信息难题的处理方式 本文关键为大伙儿详尽详细介绍了当地Bootstrap文档字体样式标志引进却没法显示信息难题的处理方式,具备一定...

2021-01-12
网站优化之怎样吸引外链

seo优化之如何吸引住外部链接创作者:做SEO的都了解,最好的连接是吸引住来的,并不是”发”出去的。网站能吸引住连接,归根结底靠的是內容。內容的方式能够是各种各样各种各样...

2021-01-12
广州凡科互联网科技股份有限公司招聘行政人事

招聘人数:6职位信息1.根据各部门岗位需求,负责招聘、培训、考勤和绩效考核统计等工作;2.执行并完善员工入职、转正、异动、离职等相关政策及流程;3.草拟员工薪资、福利方案,...

2021-01-12
微信小程序开发要趁早!

要是客户应用过这一微信小程序,那麼下一次客户检索的情况下,要是应用过的微信小程序名字里包括有效户检索的重要字,该微信小程序毫无疑问会排到最前边。1、重要词的关键性设...

2021-01-12
网站设计DIV+CSS

因为每一个原素都是有其各有系统软件默认设置的內外行高值,且不在同访问器中显示信息实际效果不一样,因而在设定网页页面款式之初应用使用通配符*将全部原素的默认设置內外行...

2021-01-12
广州市手机上网站建设_dedecms难学吗

dedecms难学吗 发布時间: 来源于于:19建设网站网 浏览频次:737 ...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信