02_微信小程序中使用字体图标

02_微信小程序中使用字体图标

一.字体图标生成

  • 使用photoshop切出需要的图标,png和psd均可,以下边的图标为例
    02_微信小程序中使用字体图标_第1张图片

  • 使用Super Vectorizer将上面的图标转换为svg,如下图所示,点击导出,并选择格式为svg即可
    02_微信小程序中使用字体图标_第2张图片

  • 登录iconfont矢量图标库,在图标管理菜单下选择我的项目,并新建项目
    02_微信小程序中使用字体图标_第3张图片

  • 在iconfont矢量图标库中,切换至刚刚新建的项目,并点击上传图标至项目,将刚刚生成的svg上传至项目
    02_微信小程序中使用字体图标_第4张图片

  • 最后生成的效果如下
    02_微信小程序中使用字体图标_第5张图片

二.在微信小程序中引用字体图标

  • 下载刚刚生成的字体图标库
    02_微信小程序中使用字体图标_第6张图片
  • 进入https://transfonter.org/平台,将iconfont.ttf文件转化为base64格式
    02_微信小程序中使用字体图标_第7张图片
  • 下载转换后的文件,找到stylesheet.css,将其中的内容全部复制到app.wxss文件中(或者对应页面的wxss中)
    02_微信小程序中使用字体图标_第8张图片
    02_微信小程序中使用字体图标_第9张图片
  • 打开没有转化过下载下来的字体图标库中的iconfont.css文件,将其中除了@font-face部分的其他所有代码复制到wxss中
    02_微信小程序中使用字体图标_第10张图片
    02_微信小程序中使用字体图标_第11张图片
    *在wxml中通过View标签直接使用字体图标对应的class即可
    在这里插入图片描述
    02_微信小程序中使用字体图标_第12张图片

你可能感兴趣的:(微信小程序,微信小程序)