欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序引入iconfont彩色图标

程序员文章站 2022-03-31 22:38:38
...
  1. 进入https://www.iconfont.cn/官网
  2. 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
    微信小程序引入iconfont彩色图标
  3. 打开目标项目,下载代码至本地
    微信小程序引入iconfont彩色图标
  4. 将下载的文件进行解压,命名为iconfont
  5. Window+R打开控制面版,输入cmd—点击enter键
  6. 切换到iconfont文件夹
  7. 输入命令行:npm install -g iconfont-tools----点击enter键
  8. 运行命令行: iconfont-tools----点击enter键
  9. 出现如图所示的内容,按图示输入文件名即可
    微信小程序引入iconfont彩色图标
  10. 打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp
  11. 打开iconfont-weap文件夹
  12. 复制iconfont-weapp-icon.wxss到小程序的项目文件夹里边
  13. app.wxss里引入文件
    微信小程序引入iconfont彩色图标
  14. 使用实例
<cover-view class="t-icon t-icon-图标名"></cover-view>
//eg:
<cover-view class="t-icon t-icon-ABC"></cover-view>
  1. 最终效果如图所示:
    微信小程序引入iconfont彩色图标
  2. 修改图标的大小(通过设置width和height来修改)
.t-icon {
    width: 24px; 
    height: 24px;
}
相关标签: iconfont