Web端iconfont使用参考方法:1.unicode参考(不支持多色,支持按字体动态调整图标大小和颜色)2.font-class参考(unicodeA使用方法的变体,语义清晰,容易区分使用的是哪个图标,本质还是使用的字体,所以仍然不支持多色图标)3.Symbolreference(新的使用方法,未来主流,推荐用法。支持多色图标,支持像字体一样的样式调整)兼容unicode>font-class>symbol方法一、unicode参考(下载到本地)①将需要的图标添加到库中,将图标添加到右上角的购物车corner在要添加的项目中(或者在新建的项目中)②将项目中的图标下载到本地,解压下载的压缩包,将下载的文件放入static文件夹中(有demo字样的是详细的配置描述文件,不需要导入)③引用iconcss文件运行时会报错filesearchfailure:'./iconfont.ttf?t=1642736921417'因为iconfont中必须使用绝对路径.css,不能使用相对路径(比如修改下图,需要根据自己的文件修改,把放置位置改成对应的格式路径)④在需要图标的地方使用图标,班上name为iconfont,图标名也可以直接复制运行结果如下图:方法二,unicode参考(网上链接)①复制网上链接②定义样式使用iconfont并全局引用③在需要图标的地方使用图标,类名是iconfont,图标名也可以直接复制运行结果如图:方法三、font-class引用①复制工程下生成的font-class代码②引用iconcss文件③使用icon,选择对应的icon并获取className,应用于页面方法四、symbol引用uniapp不支持symbol多色图标,需要使用工具iconfont-tools来处理①下载到本地assymbol②安装iconfont-tools(windows+R,cmd打开dos窗口,安装iconfont-tools)执行命令为:npminstall-giconfont-tools③解压downloaded压缩包,取出iconfont.js文件,将iconfont.js文件放入iconfont-tools文件夹中(iconfont-tools在node安装路径\node_global\node_modules\下,我把nodejs安装在F盘下)④命令提示符执行命令:iconfont-tools,总是返回汽车使用默认设置。执行完成后会在iconfont-tools文件夹下生成iconfont-weapp文件夹⑤将iconfont-weapp文件夹下的iconfont-weapp-icon.css引用css文件。⑥根据icon实际名称使用icon,注意带上t-icon。效果如下: