(六) uni 引入阿里巴巴矢量图

最新推荐文章于 2024-07-16 20:59:24 发布
最新推荐文章于 2024-07-16 20:59:24 发布
阅读量347 收藏
点赞数
分类专栏： UNI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34440345/article/details/106864811
版权

效果

第一步

进入 阿里巴巴矢量图官网  https://www.iconfont.cn/ 需登陆

随意选择一套添加入库 - 然后点击购物车 - 添加项目（自己创建个项目） - 下载到本地

解压后

把 iconfont.css复制到uni项目

删除 iconfont.css 除了 url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAB6kAAsAAAAARgAAAB5UAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCMFgrpVNUEATYCJAOCX...................................)的引用  只留这一个。

然后在 App.Vue 文件里引用 (实际路径和名称根据自己的情况)

引入成功 进行测试

qq_34440345
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里巴巴矢量图的使用
weixin_57792333的博客
08-30 258
1.官网链接: https://www.iconfont.cn/. 2.搜索想要的 图标 ( 支持 中文 英文 拼音) 4.找到符合的图标 点击加入购物车 3 .点击右上角的 购物车图标 查看 添加进去的 图标 5.图标寻找完毕 后 ，你有三种选项 可以使用 : 不论哪种方法 都需要登录 登陆完成后 可以 a.方法一 : 添加至项目 ...
关于阿里巴巴矢量图的用法
Adger
02-12 3794
首先当然是找到他们的官网 https://www.iconfont.cn/ 鼠标放上去搜索你想要搜索的矢量图,比如 购物车 得到你想要的矢量图, 加入购物车 如果你没有登录的话，会叫你登录，登录的话很简单了，用微博，或者githup账号登录了 如果你没有创建一个项目的话，会叫你创建一个项目，相当于就是 给你好整理，放在一个文件夹 跳转到此界面 下载至本地，目录自选,得到一个zip文件，解压...
uni-app线上引入阿里矢量图
Yw_better的博客
06-18 3177
1.登录阿里矢量图，选择自己想要的图标，创建项目，并添加到项目中。 2.打开图标管理---我的项目---我发起的项目，选择查看在线链接（若添加新图标需要重新生成在线链接，并替换）。 3.复制代码，打开app.vue，添加以下代码： 4.引用方法： 5.效果展示： ...
阿里巴巴矢量库iconfont使用方法大全
最新发布
weixin_55688821的博客
07-16 1218
进入官网，打开你喜欢的任意素材库，将你喜欢的图标加入购物车。选完了就点右边的购物车。我们可以看到右下角有三个选项。第一个就是把这些矢量图直接加到自己的项目当中；第二个是直接把矢量图下载下来，不过此时下载下来的也就是图片了，不再是字体；第三种是直接下载文件。你可以选择添加至项目，右上角添加项目名称确定即可。然后我们可以看到这个页面，无论是Unicode还是Font class还是Symbol下载到本地的文件都是一样，也就是前面讲的直接下载的文件。区别是引入方式的不同。
如何在uni-app中大量使用阿里巴巴矢量图图标
m0_53413858的博客
10-08 239
第一步： 先去图库里面找自己喜欢的图标然后加入购物车，然后点击购物车把选择好的图标全部添加到一个项目里面 第二步： 在添加完项目后就会出现这样一个界面，点击下载到本地 第三步 把下载的文件全部拖到你的项目里面（demo_index.html文件不用） 第四步 直接在app.vue中引用 第五步 使用方法 (我这里是class引入) <icon class="iconfont icon-xxx"></icon> 网页打开demo_index.h...
阿里巴巴矢量图的使用方法
热门推荐
浮萍的博客
03-14 2万+
看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。 1.首先进入网站 http://www.iconfont.cn/ 2.在输入框中输入自己需要的图标 比如输入：购物车 3.添加入库  4.单击购物车图标的按钮，如图所示  点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录账号就行。 5.编码方式选...
uniapp引入阿里巴巴矢量图标库
Gzyhjf9的博客
05-18 1556
uni-app中使用阿里巴巴矢量图标库 1、打开网址，链接： 阿里巴巴矢量图标库 2、注册账号并登录，已有账号直接登录 3、选择图标，点击添加入库 4、点击购物车图标，查看添加入库的图标 5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。 6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。 注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。 7、下载代码至本地 8、找到下载的压缩包，解压缩后复制 iconfo
uni-app引用阿里巴巴官方图标库
二十岁的程序员想搞钱
05-09 828
最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式 目录1.阿里巴巴图标库2.引入文件3.使用图标4.总结 1.阿里巴巴图标库 本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目； 阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库 进入官方图标库后，点击第一个图标库 由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码： var iconList = document.querySelectorAll('.icon-g
uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 2818
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
阿里巴巴矢量图的使用方法详细教程
qq_46376192的博客
08-30 6136
阿里巴巴矢量图的使用方法详细教程
阿里巴巴矢量图标的使用
qq_63605696的博客
11-22 5003
阿里巴巴图标本质就是字体，使用方法分为两种，一种是本地下载字体使用，另一种是在线链接使用。我已经建好一个名为测试的项目了，没有的新建一个就好。中的字体文件和网页放在同一个文件夹中。找到自己想要的图标添加到购物车。3.本地创建好网页，将下载的。查看项目仓库里面的图标。
阿里巴巴图标矢量库使用方法详解，适用于各种框架
qq_61838643的博客
08-10 6650
官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。
#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）
互关互粉，相互学习。
07-25 1412
阿里矢量图的三种使用方法。
阿里矢量图标的三种使用方式整理（uniapp）
时翎的博客
02-11 1万+
iconfont-阿里巴巴矢量图标库 web端iconfont使用 引用方式： 1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色） 2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的） 3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式） 兼容性 unicode >...
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2272
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
阿里矢量图标
x0572_的博客
07-27 722
矢量图标
淘宝详情接口（稳定版本）
采集王科技的博客
02-05 5008
最近淘宝的详情接口实在是难搞，不过还是搞出来了，有需要的朋友可以私信联系我。 { “api”: “mtop.taobao.detail.getdesc”, “v”: “6.0”, “ret”: [ “SUCCESS::调用成功” ], “data”: { “sellerId”: “205141720”, “pcDescContent”: “<img align=“absmiddle” src=”//img.alicdn.com/imgextra/i3/205141720/O1CN01HY9u2N1OZ
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值