在微信小程序中使用iconfont

前言

在微信小程序中使用iconfont，总体来说可以分为两步

• 1：生成iconfont代码
• 2：在小程序中引入iconfont

具体操作见下文

1. 生成iconfont代码

• 进入[iconfont官网](https://www.iconfont.cn/中搜索对应的图标，如：
  

• 找到需要的图标样式，并添加入库：

  
  

• 添加后，点击右上角的购物车，即可看到已添加的图标

  
  
  
  
  image.png

• 点击添加至项目，点击后选择目标项目名

  
  

• 没有需要的项目名可以点击右边文件夹图标新建项目

  
  

• 确认之后，界面会自动跳转，跳转的界面如下：

  
  

• 鼠标移入到icon上可以选择相应的操作，如图：

  
  

• 选择编辑图标可以对图标进行相应的编辑如：颜色更换，设置大小，方向等，修改后保存即可

  
  

• 保存后iconfont则制作完成啦，点击“下载至本地”按钮，将相关资源下载至本地解压之后即可使用啦

  
  

注：可以制作多个iconfont之后一起下载

2. 小程序引用iconfont

• 将上一步下载的文件解压后，打开iconfont.css，复制文件内的内容至小程序的wxss文件内，如：

  
  

• 在相应的wxml中引入即可，引入格式为class='iconfont icon-自定义名称'，具体如下：

  
  

• 引入成功后，编译后可查看结果：

  
  

• iconfont中制作的颜色在小程序中显示无效，可在对应的wxss文件中手动设定颜色：

  
  

• 编译后可查看结果：

  
  

...未完待续...