详解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技巧来提高你的代码
Jan 08 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
基于JSON数据格式详解
Aug 31 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
layer扩展打开/关闭动画的方法
Sep 23 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
模仿OSO的论坛(三)
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python OS模块常用函数说明
2015/05/23 Python
Python读取网页内容的方法
2015/07/30 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
2014年体检中心工作总结
2014/12/23 职场文书
爱的承诺书
2015/01/20 职场文书
教师工作决心书
2015/02/04 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
nginx优化的六点方法
2021/03/31 Servers
Python基于百度API识别并提取图片中文字
2021/06/27 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python