uni-app x 引入iconfont图标库

在iconfont网站创建属于自己的图标库

1. 进入iconfont 官网 点我速达
2. 创建自己的图标库
3. 下载自己的图标库

转换图标到Base64

1. 进入transfonter官网 点我速达
2. 根据指示将对应的ttf字体图标文件转换为对应格式的Base64
3. 下载转换后的文件

将对应的资源引入项目

引入ttf字体图标

1. 将对应的资源放到指定目录

2. 在指定目录下新建icon.css文件

文件内容如下所示

.iconfont {
  font-family: 'iconfont' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 平台差异化配置 */
/* #ifdef H5 || APP */
@font-face {
  font-family: 'iconfont';
  src: url('/static/fonts/iconfont.ttf') format('truetype');
}
/* #endif */

/* #ifdef MP-WEIXIN */
/* 微信小程序使用 Base64 内联字体 */
@font-face {
  font-family: 'iconfont';
  src: url('data:font/truetype;charset=utf-8;base64,AAAA...') format('truetype');
}
/* #endif */

将刚才使用transfonter转换的Base64格式的字体替换即可

3. 在入口文件引入icon.css文件