原生微信小程序引入离线iconfont字体图标

文章目录

  • 1.进入官网,下载文件
    • 进入iconfont官网
    • 把自己需要的字体图标添加到`购物车`
    • 把购物车的图标添加进项目
    • 接着把字体图标下载到本地
    • 下载之后解压出来,主要使用这两个
    • 把iconfont文件内容全部复制到微信小程序中
    • 把解压后的ttf文件通过工具转换成base64
  • 打开`stylesheet.css`,复制内容并粘贴到`iconfont.wxss`上
    • 替换完之后再找到`app.wxss`引入处理完的`iconfont.wxss`文件
    • 最后就可以再页面使用

1.进入官网,下载文件

进入iconfont官网

iconfont官网地址

把自己需要的字体图标添加到购物车

原生微信小程序引入离线iconfont字体图标_第1张图片

把购物车的图标添加进项目

原生微信小程序引入离线iconfont字体图标_第2张图片

接着把字体图标下载到本地

原生微信小程序引入离线iconfont字体图标_第3张图片

下载之后解压出来,主要使用这两个

原生微信小程序引入离线iconfont字体图标_第4张图片

把iconfont文件内容全部复制到微信小程序中

  • 本人在assets>iconfont内创建一个叫iconfont.wxss的文件,把下载下来的文件夹内的iconfont.css内容全部复制进入iconfont.wxss

原生微信小程序引入离线iconfont字体图标_第5张图片

把解压后的ttf文件通过工具转换成base64

  • 点击ttf=>base64进入ttf转换base64网站
  • 勾选这些之后点击Add fonts选中解压后的iconfont.ttf文件

原生微信小程序引入离线iconfont字体图标_第6张图片

  • 完成之后点击convert
    原生微信小程序引入离线iconfont字体图标_第7张图片
  • 等待几秒后会出现Download 并点击下载
    原生微信小程序引入离线iconfont字体图标_第8张图片
  • 下载完之后会得到一个这样的目录

原生微信小程序引入离线iconfont字体图标_第9张图片

打开stylesheet.css,复制内容并粘贴到iconfont.wxss

  • stylesheet.css全选复制并替换红色这一块
  • 原生微信小程序引入离线iconfont字体图标_第10张图片原生微信小程序引入离线iconfont字体图标_第11张图片
  • 替换之后的iconfont.wxss
  • 原生微信小程序引入离线iconfont字体图标_第12张图片

替换完之后再找到app.wxss引入处理完的iconfont.wxss文件

原生微信小程序引入离线iconfont字体图标_第13张图片

最后就可以再页面使用

原生微信小程序引入离线iconfont字体图标_第14张图片

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