1 unicode方式 

使用方式<span class="iconfont">&#x33;</span> 缺点不直观 图标颜色需要在css文件中 每个图标单独设置color 不支持在icon iconfont这两个class上设置颜色 不推荐

2 font-class方式

跟unicode差不多 只支持单色图标 不支持彩色图标 不推荐 使用方法如下

  以font class方式下载项目图标至本地 

  如果项目是vue项目，在app.vue中引入iconfont.css这一个文件即可

<style lang="scss">    //引入iconfont图标    @import '@/static/iconfont/iconfont.css';  </style>

使用方式<i class="iconfont icon-图标名"></i>

3 svg方式彩色图标 H5支持多色 但小程序不支持svg图标的js文件 因为svg使用的是iconfont.js，这个iconfont.js中有document的dom操作， 但是小程序里是不支持js的dom操作的

备注：小程序没有类似appendChild或innerHtml的东西，不允许js在运行时动态添加组件节点，不支持直接操作dom 小程序目前文档中已经说明了限制了window和document  微信小程序及抖音小程序及app里的window全局变量都为undefined

这样一看上面三种使用iconfont图标的方式都不怎么完美，有没有一种方式既支持多色图标，又能兼容H5以及众多的小程序呢，答案是是使用iconfont-tools工具

Iconfont - tools 是一款专门用于处理 Iconfont 彩色图标的工具，主要应用于小程序开发等场景。

Iconfont - tools 可以生成适用于小程序等平台的原生通用组件 icon，还能生成跨平台可用的 iconfont - weapp.css 文件，方便在不同平台上保持图标的一致显示效果和样式。并且，它支持本地和远程两种生成方式。本地生成时，需下载 Iconfont 的字体文件包并解压，然后进入图标文件所在文件夹执行命令；远程生成则更便捷，只需在 Iconfont 生成在线链接，通过工具指定该链接即可完成生成任务。

首先全局安装iconfont-tools  

pnpm install -g iconfont-tools

然后在iconfont个人项目里 选择symbol图标 下载至本地 解压后进入目录内执行命令 iconfont-tools 一路回车 完成后目录里多了一个文件夹iconfont-weapp

进入iconfont-weapp并将iconfont-weapp-icon.css复制到项目中 并局部修改这个css文件 因为文件里写死了.t-icon的width及height 将.t-icon修改成如下

  .t-icon {

    display: inline-block;

    /* width: 16px; 

    height: 16px; */

    background-repeat: no-repeat !important;

    background-position: center;

    background-size: 100%;

    overflow:hidden;

  }

  在app.vue中引入这个css即可

  <style lang="scss">

    //引入iconfont-tools生成的彩色图标 引入这一个css文件即可

    @import '@/static/iconfont/iconfont-weapp-icon.css';  

  </style>

  使用方法：

  <view class="t-icon t-icon-shijian"></view>  //已测试ok     

备注：生成的图标尺寸可能过小 可在当前页面设置t-icon的width及height调整图标大小

  或者<text class="t-icon t-icon-shijian"></text>

通过使用 Iconfont - tools，开发者能够更高效地将 Iconfont 中的彩色图标应用于项目中，减少了处理图标时可能遇到的问题，提高了开发效率。

注意事项：严格来说：根据iconfont的法律声明，是不能的。如果需要商用，需要取得图标所有人的同意。所以伙伴们使用时注意不要侵权。