之前跟着老师一起使用图标,而且一步一步地跟着老师配置,结果居然用不了
后面查了半天,原来是版本不一样的原因,老师用的是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>
原文地址:https://blog.csdn.net/qq_39419241/article/details/89278066
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。