用asp做网站上网帮助,wordpress jsdelivr,做地方门户网站赚钱吗,广东专业的网络推广bootstrap中不显示字体图标的原因是什么#xff1f;怎么解决#xff1f;下面本篇文章给大家介绍一下。有一定的参考价值#xff0c;有需要的朋友可以参考一下#xff0c;希望对大家有所帮助。你在使用bootstrap字体图标的时候#xff0c;是否遇到引用本地Bootstrap文件无法…bootstrap中不显示字体图标的原因是什么怎么解决下面本篇文章给大家介绍一下。有一定的参考价值有需要的朋友可以参考一下希望对大家有所帮助。你在使用bootstrap字体图标的时候是否遇到引用本地Bootstrap文件无法显示字体图标而使用CDN服务器上bootstrap却能正常显示的问题。在不能正常显示的时候比如我要在一个按钮中使用一个√的字体图标我的代码是这样子的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?#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文件中我是这样引用的可能你也正在犯跟我一样的错误在webstrom中看到我的libs目录是这样的是的在使用bootstrap的大多样式的时候单单是bootstrap.css这个文件就够了不必引入全部的这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候是需要关联到字体图标相关的文件才得以实现的所以当我引入整个bootstrap-3.3.7(您也可以部分引入只要将你想要的功能的相关文件全部引入且目录无误即可)然后再在我的html中这样引入这样就能够正常显示字体图标总结分析了那么多意思就是字体图标这个样式的实现需要关联到glyphyicon相关文件你在引入bootstrap.css文件时你要确保在与bootstrap.css的相对路径下能够让他找到这些关联文件而CDN服务器上的正式如此如此才能让图标正常显示。更多bootstrap的相关知识可访问web前端自学!
