uniapp配置微信小程序的iconfont本地文件

一. 小程序使用本地iconfont的方案

小程序使用本地文件: 转base64或者使用线上环境
但是iconfont线上地址不允许了(有时候官方会没有的情况),只能用base64

二. 如果使用

1. 首先下载iconfont文件

2. 取出iconfont.css

取出iconfont.css 将iconfont.css变成iconfont.scss, 头部加入

// iconfont.scss
@import './woff.scss';
@font-face {
  font-family: "icon"; /* Project id 1708193 */
  src: url('data:font/truetype;charset=utf-8;base64,#{$woff}') format('truetype');
}

然后额外在项目中新增一个woff.scss文件

// woff.scss
$woff: '';

3. 取出.woff2文件

(1) 找个转base64网站: https://www.giftofspeed.com/base64-encoder/
(2) 将转换得到的base64填入woff.scss文件中的$woff:" ''中

4. 每次更换文件

重复1-3步骤

5. 优化路线

利用脚本生成对应文件

相关文章

文章浏览阅读52次。1.0.0版本 只需修改API接口即可 接口位置...
文章浏览阅读820次。在uni-app和vue3中,我们可以封装全局函...
文章浏览阅读671次,点赞22次,收藏6次。整理在Uniapp应用开...
文章浏览阅读122次。【代码】Uniapp Vue3 父组件给子组件传值...
文章浏览阅读765次。包括数据绑定和计算属性、条件渲染和列表...
文章浏览阅读129次。Uniapp 底部导航栏 自定义 tabBar 全端 ...