如何在uni-app中使用阿里矢量图标库

font class普通图标:

  1. 首先将自己项目中所需要的图标添加至自己的项目
  2. 然后双击生成的链接跳转至新页面
  3. 在项目中static中创建icon.css文件将上面的代码复制到icon.css中注意:要在css文件中的url前加上https:
  4. 在APP.vue中引入icon.css
  5. 最后就可以在页面中使用了

                

Symbol 彩色图标:

  1. 首先还是添加自己项目中所需要的图标
  2. 然后下载icon图标素材
  3. 进入文件夹打开cmd
  4. 安装npm install -g iconfont-tools
    npm install -g iconfont-tools
  5. 执行 iconfont-tools

    iconfont-tools
  6. 根据提示 填写相关信息
  7. 此时文件夹内会有 iconfont 文件夹
  8. 打开生成的iconfont文件夹,将 iconfont.css引入 项目中的static文件中,文件管理随项目规定
  9. 打开 app.vue 文件将iconfont.css引入
  10. 最后就可以使用了

猜你喜欢

转载自blog.csdn.net/weixin_55521186/article/details/129982247
今日推荐