热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

怎么将iconfont字体图标引入到mpvue小程序中

今天就跟大家聊聊有关怎么将iconfont字体图标引入到mpvue小程序中,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望

今天就跟大家聊聊有关怎么将iconfont字体图标引入到mpvue小程序中,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

将图标加入购物车

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

怎么将iconfont字体图标引入到mpvue小程序中

下载素材

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

怎么将iconfont字体图标引入到mpvue小程序中

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

文件解压

怎么将iconfont字体图标引入到mpvue小程序中

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

方法一、本地引入

怎么将iconfont字体图标引入到mpvue小程序中

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

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

transfonter

怎么将iconfont字体图标引入到mpvue小程序中

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

替换结果:

怎么将iconfont字体图标引入到mpvue小程序中

方法二、cdn引入

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

怎么将iconfont字体图标引入到mpvue小程序中

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.有问题或流程不清楚的欢迎反馈~

看完上述内容,你们对怎么将iconfont字体图标引入到mpvue小程序中有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程笔记行业资讯频道,感谢大家的支持。


推荐阅读
  • 掌握远程执行Linux脚本和命令的技巧
    本文将详细介绍如何利用Python的Paramiko库实现远程执行Linux脚本和命令,帮助读者快速掌握这一实用技能。通过具体的示例和详尽的解释,让初学者也能轻松上手。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 开发笔记:2020 BJDCTF Re encode
    开发笔记:2020 BJDCTF Re encode ... [详细]
  • 本教程将详细介绍Python中的包、模块、类和函数的概念,探讨它们在程序中的作用及相互关系,帮助读者更好地理解Python的结构化编程。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 探讨在PHP开发中,如何选择使用Cookie或数据库来优化网站性能,特别是在处理用户保存的搜索结果时。 ... [详细]
  • 离线环境下的Python及其第三方库安装指南
    在项目开发中,有时会遇到电脑只能连接内网或完全无法联网的情况。本文将详细介绍如何在这种环境下安装Python及其所需的第三方库,确保开发工作的顺利进行。 ... [详细]
  • 深入理解 H5C3 和 JavaScript 核心问题
    本文详细探讨了 H5C3 和 JavaScript 中的一些核心编程问题,通过实例解析和代码示例,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 利用存储过程构建年度日历表的详细指南
    本文将介绍如何使用SQL存储过程创建一个完整的年度日历表。通过实例演示,帮助读者掌握存储过程的应用技巧,并提供详细的代码解析和执行步骤。 ... [详细]
  • 本文详细介绍了macOS系统的核心组件,包括如何管理其安全特性——系统完整性保护(SIP),并探讨了不同版本的更新亮点。对于使用macOS系统的用户来说,了解这些信息有助于更好地管理和优化系统性能。 ... [详细]
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • 本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • SDN网络拓扑发现机制解析
    本文深入探讨了SDN(软件定义网络)中拓扑发现的原理与实现方法,重点介绍了LLDP协议在OpenFlow环境中的应用,并讨论了非OpenFlow设备存在时的链路发现策略。 ... [详细]
author-avatar
呀yuan-
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有