iconfont-阿里巴巴矢量图标图库的使用

小白笔记,大佬轻喷

使用WXSS演示

一、准备工作

  1. 打开页面 iconfont-阿里巴巴矢量图标图库

  2. 注册登录
    iconfont-阿里巴巴矢量图标图库的使用_第1张图片

二、使用方法

  1. 在搜索框搜索想使用的图标

  2. 选择想要的图标添加入库
    iconfont-阿里巴巴矢量图标图库的使用_第2张图片

  3. 点击右上角购物车,选择添加到项目
    iconfont-阿里巴巴矢量图标图库的使用_第3张图片

  4. 选择要添加的项目(这里使用TEST演示)
    iconfont-阿里巴巴矢量图标图库的使用_第4张图片

  5. 添加完后会自动跳转到我的项目页面

    以后可以在主页的图标管理里找到我的项目

  6. 点击生成CSS
    iconfont-阿里巴巴矢量图标图库的使用_第5张图片

  7. 拷贝地址到浏览器地址栏打开
    iconfont-阿里巴巴矢量图标图库的使用_第6张图片

  8. 全选(Ctrl+A)页面内容并复制
    iconfont-阿里巴巴矢量图标图库的使用_第7张图片

  9. 在项目(小程序)中建立一个WXSS文件,并将复制的内容粘贴
    iconfont-阿里巴巴矢量图标图库的使用_第8张图片

  10. 在app.wxss中引入该样式文件
    iconfont-阿里巴巴矢量图标图库的使用_第9张图片

  11. 接下来就可以使用相应的图标了

    • 在相应标签中添加对应class名
      UseCSS
    • class名要与复制的类名相同
      iconfont-阿里巴巴矢量图标图库的使用_第10张图片

CSS相应操作未显示

相关链接
  • iconfont-阿里巴巴矢量图标图库
  • W3CSchool的CSS教程

你可能感兴趣的:(CSS/WXSS)