[小程序]——解决阿里矢量图引入问题

最新推荐文章于 2023-11-10 17:00:26 发布
最新推荐文章于 2023-11-10 17:00:26 发布
阅读量636 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 阿里矢量图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sungoodluck666/article/details/114525031
版权
本文详细介绍了如何在小程序中引入阿里矢量图，包括选择矢量图入库、生成代码以实现网络路径引用、下载并导入项目，最后在app.vue中全局引用并进行测试。
摘要由CSDN通过智能技术生成

选择矢量图

找到我们项目中需要的矢量图，然后添加入库

添加项目

选择完之后可以添加到项目

没有文件夹可以新增

生成代码

之后就可以选择Unicode方式

这里需要生成代码，原因就是下载之后的文件是本地相对路径，而使用代码替换之前的路径就能选择网络路径，这样就能减少项目的大小。

下载

下载至本地后查看文件夹

这是我的下载项目，然后选择iconfont.css，删除之前相同的代码&#

最低0.47元/天 解锁文章
虽菜但瘾
关注
专栏目录
阿里矢量图标(字体图标)
m0_73782968的博客
02-26 435
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。【H5页面、微网页、微站、wap站、webAPP】如:京东商城手机版，淘宝触屏版，苏宁易购手机版相关阅读：WebApp与Native App的区别？在高端智能手机系统中有两种应用程序：一种是基于本地(操作系统)运行的APP;
iconfont阿里巴巴矢量图标库怎么使用（下载代码001——最简易基础版）
Henry13133333的博客
10-28 1244
登录官网 https://www.iconfont.cn/ 下载 ① 可切换中英文 【中 / En / Pinyin】 ② 搜索 search （你要啥 就搜啥） ③ 添加到购物车（下载图标的步骤） ④ 点击右下角的购物车 ⑤ 点击 添加到项目 ⑥ 下载 到本地 此文件夹放在项目中, 引入iconfont.css文件 ⑦ 解压缩文件夹 ⑦ 得到此文件夹（个人习惯性把此文件名改为 “iconfont” ） 使用 ① 把文件放到项目文件夹中，引入css <link r.
微信小程序里面引用阿里巴巴矢量图（6月份系统升级维护后）
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
06-14 1735
微信小程序引入阿里巴巴矢量图，6月份系统升级后，原来的cdn链接不可用了
小程序如何引入阿里巴巴矢量图
weixin_33912246的博客
11-29 377
学习链接：1、https://blog.csdn.net/hknishi_zs/article/details/80694681 2、https://blog.csdn.net/qq_29944285/article/details/79562954 转载于:https://www.cnblogs.com/studyh5/p/10039360....
微信小程序引入阿里巴巴icon步骤及报错解决
qq_47218954的博客
01-13 1406
在微信小程序中引入阿里巴巴icon图标详细步骤及报错解决方法
阿里巴巴矢量图显示失效问题——解决笔记
weixin_51973859的博客
02-28 3961
阿里巴巴矢量图显示失效问题——解决笔记 遇到的问题： 近期将h5页面嵌入某APP中，页面中使用的阿里巴巴矢量图显示不正常，显示一个框框里面一个叉叉 解决问题： 检查引用的iconfont.css里面是否有使用的icon图标，结果发现是有图标的，检查是否在h5页面里面引用了iconfont.css，结果发现也是正确引用了，然后我就很好奇为什么在PC端是正常显示，然后直接用移动端的浏览器，或者是在微信等分享给好友通过链接进入都是有icon的，但是偏偏在嵌入某APP里后，图标不能正常显示。（真是很气人，??
前端 - 如何引入阿里巴巴矢量图库？
weixin_42631976的博客
03-02 740
1.进入阿里巴巴矢量图库官网：https://www.iconfont.cn/ 2.登录账号 3.查找所需图标，添加至购物车 4.添加至项目 5.下载至本地 6.引入至main.js 7.在组件中调用
微信小程序个人音乐台开发教程与源码分享
微信小程序的开发依赖于微信官方提供的开发工具——微信web开发者工具。它是一个集代码编辑、预览、调试于一体的应用程序，支持Mac、Windows和Linux操作系统。开发者可以通过此工具创建、编辑、预览、上传和发布小...
微信小程序仿京东白条源码项目教程分享
微信小程序提供了一个强大的开发工具——微信web开发者工具，该工具是微信官方提供的小程序开发环境。在该环境下，开发者可以编写代码、调试程序、查看控制台输出和模拟手机运行效果。此外，开发工具还支持代码的热...
小程序使用阿里矢量图2.0
wangjuhi的博客
05-20 912
之前写的使用阿里矢量图感觉有点麻烦 去阿里矢量图创建项目，点击font class 复制链接 新窗口打开直接复制或下载文件 去小程序新建文件粘贴或直接拷贝刚才下载的文件（后缀改为.wxss） 需要引入的wxss页面引入 页面书写 第二个class名为使用图标的名字 #### 下次有新的图标添加，直接替换icon.wxss 文件就可以了 全局引入wxss，没有尝试，至少分包中直接引入是不可行的，感兴趣的话可以试试 ...
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
只会写bug的靓仔的博客
07-11 1034
网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接，可惜现在阿里现在已经没有在线链接了。然后我吧文件下载到本地尝试引用，抱歉woff文件识别不了，微信小程序是没法直接识别woff文件的，通通渲染层报错。 原因是：。 一个折中的解决方法是把放到wxss文件中。 这对于图标来说还是足够了。 把下载的字体文件转换成base64，我这里是用的woff2转换的 https://transfonter.org/ 记得把base64打开在这里插入图片描述 然后就可以显示出来了......
使用阿里巴巴矢量图标库的坑
最新发布
weixin_62418631的博客
11-10 323
使用阿里巴巴矢量图标库的坑
微信小程序中使用阿里（iconfont）字体图标
markkr133的博客
05-12 2万+
一、下载图标1、首先在阿里云（iconfont）中找到项目中所需要的图标并且加入到购物车。2、添加至项目并下载本地             （1）添加至项目 ，如图：下                                 （2） 选择小程序项目名称并点确定，如图：下                             （3）选择Unicode，点击‘暂无代码，点此生成’代码，如图：...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
m0_59971110的博客
02-02 2160
将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中。搜索想要的矢量图标并加入购物车，点击右上角购物车。将字体格式设置为TTF Base64。在app.wxss中引入文件。在微信小程序中新建文件夹。将矢量图复制到class中。更改后缀名为wxss。
阿里巴巴fonticon字体图标的使用
MPFLY的博客
08-17 2万+
很早之前就知道阿里巴巴的fonticon矢量图标库，以前是这么使用的：下载某个图标的.png格式，然后引用到项目中，通过img标签或者background来使用。当然我知道该矢量图库可以将图标转换为字体文件来使用，但是一直没有机会来使用。因为大部分时间，设计都会把图标以图片的格式准备好，我只需要做一张雪碧图，就可以很好的使用了。 下面来总结一下该字体图标的使用方法。 1.如何将字体图标下载到本...
iconfont阿里巴巴矢量图标库本地下载的使用
m0_46322755的博客
06-26 1558
iconfont阿里巴巴矢量图标库本地下载的使用
微信小程序里引入SVG矢量图标
AngelLover2017的博客
08-04 2万+
引言 因为微信小程序的限制，引入外部图片或者矢量图，只能通过设置背景图片background-image : url(&quot;base64转码后的代码&quot;);的方式来进行操作。同时还是因为微信小程序的限制，我们要先把svg的xml编码转码为base64编码 首先，说明以下我们常见的svg矢量图是什么？下面引用百度百科的话： svg是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一...
微信小程序图片显示不出来的解决方案
热门推荐
m0_56685900的博客
10-08 3万+
调试上没有什么问题，真机ios调试也没有什么问题，但是发布体验版后，在Android上图片却不见了，显示不出来。开始以为是兼容性的问题，最后才发现其实事情并没有这么难解决。 ** 以下是可能出现的问题 ** 1、注意在微信小程序中的图片标签是<image>不是<img>标签 2、也许是路径有问题 一般情况下按下斜杠/会自动跳出可选路径选择补全就好了 如： <image src="/static/images/icon_3/free.png"></image&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值