引入iconfont 字体

Lambert-~

于 2023-08-14 09:15:20 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/guo2017/article/details/132268922

本文介绍了如何在Web开发项目中下载并管理ttf、woff和woff2字体文件，通过CSS引入，以及使用Webpack的特定loader处理这些文件，确保页面正确引用自定义图标。

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

首先下载字体到本地
把 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 ：图标名称