• 技术文章 >web前端 >Bootstrap教程

    如何解决bootstrap 图标不显示的问题

    藏色散人藏色散人2021-01-08 14:36:14原创853

    bootstrap图标不显示的解决办法:首先把从网上下载的整个bootstrap放到eclipse中;然后把jQuery的引用放在bootstrap引用前即可。

    本教程操作环境:Windows7系统、bootsrap3.3.7版,该方法适用于所有品牌电脑。

    推荐:《bootstrap教程》《css视频教程

    Bootstrap字体图标不显示问题

    问题:

    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');
    }`

    注意当中的url

    解决办法:

    把从网上下载的整个bootstrap丢到eclipse中。如图

    639e6f081fa13d676b95c95a1404f55.png

    在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>

    注意:jQuery的引用要放在bootstrap引用前,否则会报Uncaught Error: Bootstrap's JavaScript requires jQuery的错误

    更多编程相关知识,请访问:编程教学!!

    以上就是如何解决bootstrap 图标不显示的问题的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:bootstrap模态框如何提交表单 下一篇:bootstrap怎么删除图标
    大前端线上培训班

    相关文章推荐

    • bootstrap modal 如何关闭• bootstrap支持手机吗• bootstrap如何限定日期选择器可选时间范围?(代码示例)• bootstrap-select下拉框如何清除选中的状态?• bootstrap模态框如何提交表单

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网