详解mpvue小程序中怎么引入iconfont字体图标


Posted in Javascript onOctober 01, 2018

前言

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

iconfont阿里巴巴矢量图标库

将图标加入购物车

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

详解mpvue小程序中怎么引入iconfont字体图标

下载素材

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

详解mpvue小程序中怎么引入iconfont字体图标

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

文件解压

详解mpvue小程序中怎么引入iconfont字体图标

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

方法一、本地引入

详解mpvue小程序中怎么引入iconfont字体图标

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

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

transfonter

详解mpvue小程序中怎么引入iconfont字体图标

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

替换结果:

详解mpvue小程序中怎么引入iconfont字体图标

方法二、cdn引入

按项目需求,可选择cdn方式引入字体图标。优点:本地文件小;缺点:网络不好的情况下页面可能会暂时缺失图标。
在“我的项目”中,点击查看在线链接,复制代码:

详解mpvue小程序中怎么引入iconfont字体图标

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

引入css

App.vue style开头引入:

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

使用字符图标

<i class="iconfont icon-fangdajing"></i>

注意事项

1.多个图标1次下载,也只需要一个ttf文件,同样的,如果有新增或修改的图标文件,需要全部下载1遍再转为base64,
2.强烈建议新建一个项目保存你的字体文件,永久记录且可编辑(缩放、旋转),项目入库在网站上方-图标管理-我的项目。
3.使用css预处理如scss的大体流程一样,就是将iconfont.css换为你的css预处理文件格式,在App.vue中引入
4.有问题或流程不清楚的欢迎反馈~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
You might like
Admin generator, filters and I18n
2011/10/06 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
js href的用法
2010/05/13 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Python语言快速上手学习方法
2018/12/14 Python
python中操作文件的模块的方法总结
2021/02/04 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
视光学专业自荐信
2014/06/24 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2014年班级工作总结
2014/11/14 职场文书
企业2014年度工作总结
2014/12/10 职场文书
公司捐书倡议书
2015/04/27 职场文书
大学体育课感想
2015/08/10 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
浅析Django接口版本控制
2021/06/26 Python
python通过新建环境安装tfx的问题
2022/05/20 Python