Bootstrap字体图标不显示问题
2017-10-24 11:08
323 查看
bootstrap使用字体图标时只显示一个框,不显示图标。
出现的原因是:bootstrap.css文件没有正确关联上字体文件glyphicons-halflings-regular.eot。
查看bootstrap.css源码可知:
2
3
4
5
6
注意当中的url
把从网上下载的整个bootstrap丢到eclipse中。如图
在jsp页面中的引用:
2
3
4
5
6
7
注意:jQuery的引用要放在bootstrap引用前,否则会报
问题分析:
出现的原因是:bootstrap.css文件没有正确关联上字体文件glyphicons-halflings-regular.eot。 查看bootstrap.css源码可知:
`@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'); }`1
2
3
4
5
6
注意当中的url
我的解决办法:
把从网上下载的整个bootstrap丢到eclipse中。如图 在jsp页面中的引用:
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>bootStrap表单</title> <script type="text/javascript" src="js/jquery.min.js"></script> <link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css"> <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script> </head>1
2
3
4
5
6
7
注意:jQuery的引用要放在bootstrap引用前,否则会报
Uncaught Error: Bootstrap's JavaScript requires jQuery的错误
相关文章推荐
- Bootstrap字体图标不显示问题
- 本地Bootstrap文件字体图标引入却无法显示问题的解决方法
- 360 浏览器 不显示 bootstrap 字体图标问题
- Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
- 在Yii中解决引入本地Bootstrap文件字体图标无法显示问题
- 使用bootstrap轮播功能时候,glyphicon图标不显示问题
- 今天在学习bootstrap,在使用字体图标的时候,无法显示
- 页面静态资源做cdn之后的字体图标不显示的问题
- Bootstrap中Glyphicons 图标不显示问题
- nginx环境下bootstrap中font-awesome图标不显示的问题
- 前端——bootstrap无法显示图标问题
- Bootstrap字体图标无法正常显示的解决方法
- 使用Bootstrap后,关于IE与Chrome显示字体的问题
- react中iconfont字体图标不显示问题
- 关于字体图标在firefox上本地访问无法显示的问题分析
- 关于字体图标在firefox上本地访问无法显示的问题分析
- firefox(ff)下无法显示bootstrap图标问题的解决方案(转)
- 解决bootstrap中glyphicon无法显示图标只显示方框的问题
- 火狐打开本地bootstrap页面,小图标无法正常显示问题
- 开启cdn后无法显示字体图标——CDN服务器跨域问题