引入iconfont 字体

最新推荐文章于 2024-08-20 17:37:56 发布

Lambert-~

最新推荐文章于 2024-08-20 17:37:56 发布

阅读量117

点赞数

文章标签： javascript vue.js react.js

本文链接：https://blog.csdn.net/guo2017/article/details/132268922

版权

首先下载字体到本地
把 ttf、woff、woff2 这三个文件需要copy到项目中一般是放在静态文件夹里面
下载的文件中有一个iconfont.css 文件，把这个css copy 到项目里面并在main.js 中引入（修改css 中ttf woff woff2 文件的路径）

需要添加三个loader 加载器  
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
},
{
    test: /\.(woff2?|woff?|ttf?)$/i,
    use: ['file-loader'],
    
    // wenpack 5 需要加上这句话，webpack 5 新增加了资产模块内容，他会替换字体、图像的加载器
    // 其他版本没有测试（应该不需要）
    dependency: { not: ['url'] },  
}  


页面直接引用
<i class="iconfont icon-quanping_o"></i>
iconfont : 是基类 必须加上
icon-quanping_o ：图标名称