把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标

前言

iconfont阿里巴巴矢量图标库是我很喜欢的一个网站&＃xff0c;可以下载/在线编辑/上传自己需要的矢量图标&＃xff0c;也支持团队协作&＃xff0c;那么在mpvue项目中如何引入呢&＃xff1f;

将图标加入购物车

搜索关键词可以是中文也可以是英文

下载素材

点击网站右上角的购物车图标&＃xff0c;此处我们选第三个

ps:添加到项目很有用&＃xff0c;可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等&＃xff0c;此处我们选择加入项目并下载代码

文件解压

一般网页中为了兼容性考虑&＃xff0c;我们会留下css/ttf/svg/woff/eot文件&＃xff0c;小程序中则有自己的规则&＃xff0c;此处我们留下css和ttf文件&＃xff0c;关于怎么处理请继续阅读

方法一、本地引入

由于小程序不支持处理ttf/woff/eot等文件&＃xff0c;~~我们必须将子图文件转为base64格式再引入&＃xff0c;~~直接使用源文件会提示几种字体文件没有上传&＃xff0c;导致打包上传后字体无法显示。将引入eot/ttf/svg的几行删除&＃xff0c;在base64那一行前加上src即可。

ttf转base64(iconfont下载的文件已有base64转码&＃xff0c;此步跳过)

用stylesheet.css内容替换iconfont.css引入部分(上同

替换结果&＃xff1a;

方法二、cdn引入

按项目需求&＃xff0c;可选择cdn方式引入字体图标。优点&＃xff1a;本地文件小&＃xff1b;缺点&＃xff1a;网络不好的情况下页面可能会暂时缺失图标。

在“我的项目”中&＃xff0c;点击查看在线链接&＃xff0c;&＃xff1a;

将iconfont.css的&＃64;font-face部分换成之前复制的带有alicdn的代码。

引入css

App.vue style开头引入&＃xff1a;

&＃64;import &＃39;../static/iconfont.css&＃39; // 若css在static中&＃xff0c;要加..&＃xff0c;不然会报错

使用字符图标

注意事项

1.多个图标1次下载&＃xff0c;也只需要一个ttf文件&＃xff0c;同样的&＃xff0c;如果有新增或修改的图标文件&＃xff0c;需要全部下载1遍再转为base64&＃xff0c;

2.强烈建议新建一个项目保存你的字体文件&＃xff0c;永久记录且可编辑(缩放、旋转)&＃xff0c;项目入库在网站上方-图标管理-我的项目。

3.使用css预处理如scss的大体流程一样&＃xff0c;就是将iconfont.css换为你的css预处理文件格式&＃xff0c;在App.vue中引入

4.有问题或流程不清楚的欢迎反馈~

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。