详解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 相关文章推荐
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
js实现旋转木马效果
Mar 17 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
javascript复制对象使用说明
2011/06/28 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Vue 短信验证码组件开发详解
2017/02/14 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
浅谈Node.js 沙箱环境
2018/05/15 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python format 格式化输出方法
2018/07/16 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python实现扫码工具的示例代码
2020/10/09 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
override和overload的区别
2016/03/09 面试题
工程总经理工作职责
2013/12/09 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python