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

前言

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

将图标加入购物车

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

下载素材

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

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

文件解压

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

方法一、本地引入

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

ttf转base64(iconfont下载的文件已有base64转码，此步跳过)

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

替换结果：

方法二、cdn引入

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

在“我的项目”中，点击查看在线链接，复制代码：

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

引入css

App.vue style开头引入：

@import '../static/iconfont.css' // 若css在static中，要加..，不然会报错

使用字符图标

注意事项

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

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

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

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

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

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

微信小程序渲染层网络错误_详解微信小程序「渲染层网络层错误」的解决方法...
问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需 ...
java用redis缓存的步骤_详解在Java程序中运用Redis缓存对象的方法|chu
这段时间一直有人问如何在Redis中缓存Java中的List 集合数据,其实很简单,常用的方式有两种: 1. 利用序列化,把对象序列化成二进制格式,Redis 提供了相关API方法存储二进制,取数据 ...
本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
上传声音微信小程序_图文详解微信小程序中调用录音功能和音频播放的方法...
老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里 ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
微信小程序foreach遍历_详解微信小程序循环及嵌套循环
本文主要介绍微信小程序循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中 ...
linux apache 跨域,解决nginx/apache静态资源跨域访问问题详解
1. apache静态资源跨域访问找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释 ...

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

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

最新文章

热门文章