Bootstrap4.X版本无法显示图标

最新推荐文章于 2023-06-20 16:41:12 发布

YI_111111

最新推荐文章于 2023-06-20 16:41:12 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39419241/article/details/89278066

本文详细介绍了在使用Bootstrap 4.X版本时遇到的图标显示问题及其解决方案。由于图标被分离为独立项目open-iconic，需额外下载并正确配置才能在项目中正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前跟着老师一起使用图标，而且一步一步地跟着老师配置，结果居然用不了
后面查了半天，原来是版本不一样的原因，老师用的是3.X的版本，而我的是4.X的

原来是想说要不我还是用3.3.7版本的bootstrap算了，结果重新安装了，各种报错，无奈只能删了node_modules包，cnpm i重新再来，所以还是使用4.X版本的bootstrap

看了这位大兄弟的才知道如何解决：Bootstrap 4.X版本的图标显示不出来问题，在这里记录下来

因为4.X版本Boostrap把icon分离出来作为一个单独的项目open-iconic，所以单纯的只引入Boostrap项目是不够的，还需要下载open-iconic项目(Git：https://github.com/iconic/open-iconic)

1.因为icon文件被分离出去了，所以要比3.X版本多下载一个open-iconic

npm i https://github.com/iconic/open-iconic.git -D

2.在自己的项目js入口文件中引入，我的是main.js文件

import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

3.在webpack.config.js中配置，因为webpack默认是不支持的，所以需要配置

module:{
        //配置所有第三方loader模块的
        rules:[
            //第三方模块的匹配规则
            {test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}//处理字体文件的loader
        ]
    }

4.最后终于可以在index.html中引用

<span class="oi oi-account-login"></span>

补充一点：刚刚自己试了下这个是不能引用bootstrap3中的组件了，可以去https://useiconic.com/open找自己想要的图标