uni-app使用阿里矢量图库彩色icon

已于 2024-06-05 14:09:19 修改
阅读量461 收藏 4
点赞数 11
文章标签： uni-app 前端
于 2024-06-05 14:07:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyt06/article/details/139468663
版权

  1. 将需要的图标加入购物车-点击购物车-添加至项目（新建或者加入已有项目）在这里插入图片描述

  2. windows+R,cmd打开dos窗口,执行命令npm install -g iconfont-tools,会生成一个iconfont-tools依赖工具包在这里插入图片描述

  3. 把在阿里巴巴矢量库下载的压缩包解压,取出里面的iconfont.js并放入iconfont-tools文件夹中。iconfont-tools文件夹在nodejs（本地全局依赖地址）→node-global→node_modules在这里插入图片描述

在这里插入图片描述

  1. dos窗口执行命令iconfont-tools,然后一直enter键,执行完后会生成iconfont-weapp文件夹在这里插入图片描述在这里插入图片描述

  2. 取出iconfont-weapp的css,放入uniapp项目中的静态资源文件夹下
    在这里插入图片描述

  3. 在uniapp项目的App.vue中加入在这里插入图片描述

  4. 引用彩色图标:打开iconfont-weapp-icon.css,在vue文件中按照如下代码引用。

<text class="t-icon t-icon-lishi"></text>

默认图标：打开iconfont.css，在vue文件中按照如下代码引用。

<text class="iconfont icon-lishi"></text>
努力搬砖码农
关注
uniapp引入阿里巴巴矢量图标库
qq_60976312的博客
02-24 2005
uniapp引入阿里巴巴矢量图标库
uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 2838
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
在 uniapp 中使用 阿里巴巴矢量图标
最爱喝怡宝的博客
04-11 4030
最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面 矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程 1.到官网，登录，没有账号的话就注册一个： iconfont-阿里巴巴矢量图标库 2.搜索自己想要的图标，并加入购物车中 3. 点击右上角 购物车 图标，打开购物车 4.点击下载代码，把下载下来的文件解压出来 5. 目前我下载的，解压出来以后，文件都是默认存放在font_i5lcy3k..
uni-app关于顶部导航添加icon图标并绑定事件！小白教程！
最新发布
weixin_68397463的博客
08-21 402
二，找到uniicons.ttf文件，移动到项目对应static/fonts/文件夹中。注意：text 名称不是icons的图标名称，需要在。三，在pages.json文件中配置。一，下载导入uni-app插件。
uniapp-阿里巴巴矢量图标使用（字体图标引用）
m0_62626838的博客
07-18 483
3.解压下载好的压缩包，将里面的文件全部放到static中font文件夹中（自己新建），并打开demo_index.html文件，复制其中的字体声明代码至自己的页面的css中。6、打开font文件夹里的demo_index.html，选择Unicode中复制图标的代码,用到页面中。4、修改复制过来的字体声明中的路径。（即下图的src路径需替换为font中的.tff文件）5、在页面的元素样式中需引入font-family: 'iconfont';网站，将想引入的图标加入购物车。
uniapp使用阿里矢量图
qq_41277759的博客
11-24 645
进入uni_modules\h-icon\components\h-icon目录打开h-icon.vue文件。首先，咱们要在iconfont里有个项目，并且将要用到的矢量图全部导入到这个项目里。找到下方代码，将之前保存的代码替换一下（记得保留'https:'）ok这个咱们目前用不到，切换tab到FontClass。其中 icon属性就是你项目里icon的名称。下面进入咱们的uniapp项目，引入下方插件。那么到此为止引入就算完成了，接下来是使用。这样一来，页面就显示出你引入的icon了。
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2346
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
uniapp 使用 iconfont 彩色图标
m0_71513265的博客
07-02 467
uniapp，使用 iconfont 图标，黑白、彩色显示
uniapp 中使用彩色图标，引入阿里图库iconfont
hu104160112的博客
06-18 1493
1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键 打开powershell 窗口 执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf
【uni-app】懂你找图--创建项目到首页推荐模块
weixin_58214412的博客
12-07 957
1. 项目搭建 1.1 新建项目 创建项目 vue create -p dcloudio/uni-preset-vue dnpicture 安装 sass依赖 npm install sass-loader@7.3.1 npm install node-sass@4.14.1 node -v 查看自己的node版本根据node和node-sass版本关系按照相应的sass依赖 运行项目并导入微信开发者工具 npm run dev:mp-weixin ..
UNI-APP 添加顶部导航栏并且更换图标
一尾流莺 半世情缘
10-21 4744
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。 要实现的最终效果图： uni-app 在page.json里的配置项 { "path": "pages/chat/list", "style": { "navigationBarTitleText": "45things", "app-plus": { "titleNView.
uni-app引用阿里巴巴官方图标库
二十岁的程序员想搞钱
05-09 854
最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式 目录1.阿里巴巴图标库2.引入文件3.使用图标4.总结 1.阿里巴巴图标库 本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目； 阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库 进入官方图标库后，点击第一个图标库 由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码： var iconList = document.querySelectorAll('.icon-g
uniapp中使用阿里彩色图标
记笔记
12-30 1167
uniapp中默认只能使用纯色图标，使用纯色图标的方法uniapp官网有可自行查看，如果项目中有使用阿里彩色或多色图标的需求就可借助iconfont-tools工具实现
uniapp中如何使用阿里矢量图
qq_44176252的博客
11-23 820
在uniapp中使用阿里矢量图
uniapp使用alibaba icon的symbol方式引用多色图标
Sinder小德的博客
03-31 976
将iconfont-weapp文件夹中的iconfont-weapp-icon.css放至static静态资源文件夹下，并（app.vue）全局引用该css文件。首先打开alibaba icon网站，选择自己想要的icon，加入购物车，然后打开购物车下载代码。一般在node文件夹的node_global下，与iconfont-tools文件同级。将iconfont.js文件放入iconfont-tools文件夹下。代码下载后解压可以看到如下目录。其中lanqiu为图标名称。然后就可以愉快的使用了。
uni-app 怎么在tabbar使用阿里图标库
m0_75269526的博客
06-15 789
uni-app使用阿里巴巴矢量图标库，uniapp设置tabbar,uniapp提示：微信小图标不支持使用字体图标的方式，只能下载png。
在uniapp中使用彩色图标
09-06 726
在uniapp中使用彩色图标
uniapp引用阿里矢量图
weixin_40450855的博客
09-18 258
登录阿里矢量图进入我的项目---->选择坐起第二个Font class 复制下面的连接，连接前面加上https: 在对应的界面添加css 文件路径 使用方法 第一个class 必带，第二个在css 文件里面找到对应所需的图片class 即可 ...
uni-app引入彩色阿里矢量图标
weixin_52648390的博客
03-24 352
uni-app引入彩色阿里矢量图标 1.将要用的彩色图标添加到项目中 2.下载到本地，解压 3.打开cmd，找到项目文件夹安装iconfont-tools，敲入命令： npm install -g iconfont-tools 4.cmd进入解压的文件夹，运行iconfont-tools，一路回车即可 5.点击生成的文件夹 6.将上面箭头指着的iconfont-weapp-icon.css文件复制到项目中的static文件夹中 7.App.vue文件引入，注意路径不要写错了 8.在需要的页面写
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值