详解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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
js实现漫天星星效果
Jan 19 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的super()方法使用简介
2015/08/14 Python
python数据结构之链表详解
2017/09/12 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
安全员岗位职责
2013/11/11 职场文书
初中学生评语大全
2014/04/24 职场文书
求职信格式要求
2014/05/23 职场文书
师范生求职信
2014/06/14 职场文书
绿色小区申报材料
2014/08/22 职场文书
转让协议书范本
2014/09/13 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
Python编写冷笑话生成器
2022/04/20 Python
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js