下载字体图标

下载彩色的 iconfont 字体图标

解压 iconfont

安装转换插件

npm install -g iconfont-tools

转换 iconfont

在目录下打开cmd命令行

iconfont-tools

修改

将 iconfont-weapp-icon.css 里的背景相关属性添加 !important

引入

只需要将iconfont-weapp-icon.css引入项目，全局使用就好了

// main.js
import "./static/iconfont/iconfont-weapp-icon.css"

页面使用

复制要用的图标的class的 class-name ：icon-renlianheshen

// 如果转换的时候 prefix 设置为 t-icon
// 设置css文件的prefix： t-icon
// 则在页面这样使用
<i class="t-icon t-icon-renlianheshen"/>

// 如果转换的时候 prefix 设置为 icon
// 设置css文件的prefix： icon
<i class="icon icon-renlianheshen"/>
    
// 如果转换的时候 prefix 设置为 i
// 设置css文件的prefix： i
// 则在页面这样使用
<i class="i i-renlianheshen"/>    

/* 用 width 和 height 控制字体图标的大小 */
.t-icon{
	width：18rpx; 
	height：18rpx;      
}

效果