uni-app引用阿里巴巴官方图标库

最新推荐文章于 2024-08-17 21:52:26 发布
最新推荐文章于 2024-08-17 21:52:26 发布
阅读量851 收藏
点赞数 1
分类专栏： uni-app 图标 文章标签： vue.js 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36864012/article/details/106020383
版权
本文介绍了如何在uni-app项目中使用阿里巴巴官方图标库，通过网络路径引用，避免了大量图标导致的项目运行缓慢问题。详细步骤包括：在阿里图标库选择图标，将图标加入项目，下载并引入图标样式文件，修改CSS链接，以及在页面中使用图标的方法。这种方法提高了项目运行效率，方便添加新图标。
摘要由CSDN通过智能技术生成

最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式

目录

1.阿里巴巴图标库

本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目；
阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库
首页
进入官方图标库后，点击第一个图标库
官方图标库
由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码：

var iconList = document.querySelectorAll('.icon-gouwuche1')
最低0.47元/天 解锁文章
ToopRookie
关注
专栏目录
uni-app使用阿里巴巴矢量图标库
weixin_45897872的博客
04-10 1258
uni-app使用iconfont中的图标 1.打开网址 链接: 阿里巴巴矢量图标库. 2.登录自己的账号 3.点击响应的类型然后点击收藏 4.点击项目 5.点击下载到本地 6.解压下载下来的压缩文件 7.最后修改该文件 就可以了 使用方法 1.打开解压时的html文件 2.格式如下 3.找到对应图标的css样式 大功告成！！！！！ ...
uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
wwyxjjz的博客
07-26 1921
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法 简单方便 阿里巴巴图标库：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 近期阿里图标库更新了 没有之前的在线链接直接使用(如下图) 不要慌绝绝子来教你啊 怎么创建项目 加入图标 我这里就不再具体说了 一. 首先打开你的iconfont项目(......
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uniapp使用阿里图标库
码农键盘上的梦
07-18 2079
在项目根目录的App.vue中，引入上述的，注意自己存放的路径，且通过@import引入的外部样式，需要写在style标签有效内容中的最前面使用和type属性自定义图标注意因为本质上还是使用的字体，所以多色图标还是不支持的。httpshttpshttpshttpshttpshttps。...
矢量图在线网站推荐
最新发布
weixin_45639224的博客
08-17 1769
矢量图在线网站推荐
【uni-app】uni-app官方自带图标的使用方法
【敦厚的曹操】的专栏
04-27 3102
【代码】【uni-app】uni-app官方自带图标的使用方法。
uni-app 使用 阿里图标icon
Cris_are的博客
02-13 625
一、阿里巴巴图标矢量库 注意事项： 1、修改项目内的图标字体名称（iconfont 是 uni 的关键字暂不能用）。 2、使用网络字体。 二、项目使用 1、拷贝iconfont.css 文档到项目中，并修改引入的字体路径 @font-face {font-family: "eosfont"; src: url('https://at.alicdn.com...
uni-app图标库
Sun_Maple_jw的博客
09-07 9404
首先需要使用HBuilder X安装导入插件 官方文档路径：https://ext.dcloud.net.cn/plugin?id=28 <template> <view> <uni-icons type="cloud-upload"/> <uni-icons type="cloud-upload" color="#007aff" /> <uni-icons type="cloud-upload" color="#...
uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 2837
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
uni-app引入阿里云矢量图标库
tianxingege_的博客
09-07 291
这段时间因为任务要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 添加图标 首先去阿里巴巴矢量图标库选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 也可以下载本地 把文件放到static里面 在index.html里面引入 ...
uniapp项目中使用阿里图标
chedannaxieshang的博客
03-07 1569
一、uniapp引入阿里图标 1、第一步：选择想要的图标加入购物车 注意：批量注入的方法（按F12 在console里面输入下方的代码） var span = document.querySelectorAll('.icon-cover'); for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].querySelector('span').click()); } 2、点击下载图标 3、下载之后,只
uniapp常用图标.zip
01-15
图标 图标
uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）
weixin_43697548的博客
11-18 952
前言 提示：本篇文章正文内容分为: 给uniapp项目导航栏添加字体图标； 在uniapp项目中使用字体图标。 一、给uniapp项目导航栏添加字体图标 1：登录阿里巴巴矢量图标库：https://www.iconfont.cn/ 2：新建项目，添加任意图标 3：下载字体图标信息，并解压，解压后的文件夹里，iconfont.css和iconfont.ttf这里是需要用到的 解压后： 4：将上面两个文件放在项目static文件夹下面： 5：在阿里巴巴矢量图标库项目里的Unicode下，点击查看在线
uniapp使用阿里图标
m0_47333020的博客
03-27 227
选择自己喜欢的图标点击添加入库 在右上角找到购物图案，点击，将选好的图标添加到项目里 添加后跳转到项目里 点击下载到本地 解压后找到iconfont.css文件，复制到uniapp项目里 在App.vue里导入公共样式（也就是刚刚导入的字体图标样式iconfont.css） 这里有很多种写法 亲测，这三种写法都支持 然后再回到阿里图标 点击复制代码 然后打开iconfont.css 将第一段的内容全部替换成复制的代码 然后就能在页面中使用阿里图标了 此时的图标可以当成字体来设置大小 &
uniapp使用阿里图标（入坑）
Front小思的博客
06-08 2108
准备 下载阿里图标到本地（https://www.iconfont.cn/），uniapp不支持symbol格式 校验 https://transfonter.org/点击ADD fonts 添加下载的 iconfont.ttf 文件，配置如下图，点击convert保存，Download。 配置 把阿里图标的iconfont.css 复制到项目里，删除@font-face{ }里的代码，把下载下的stylesheet.css的文件复制到iconfont.css文件里。 使用 main.js全局引入 im
在uniapp里面使用阿里矢量图标（iconfont）
jsmylo的博客
12-29 1025
阿里矢量图标在uniapp里面的使用
【uni-app】常用图标、头像汇总
feifeiyechuan的博客
07-15 2425
各种图标和头像素材
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 6138
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uni-app实现自定义导航栏并使用阿里小图标
weixin_42738839的博客
06-08 1125
首先下载阿里小图标，将选好的小图标添加入库，选择下载代码 将下载好的代码解压， 将iconfont.ttf文件拷到static文件夹下，打开iconfont.json找到对应的unicode 在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“\ue503”,fontSrc为iconfont.ttf的路径，fontSize为图标大小，color为图标颜色 { "pages": [ //pages数组中第一项表.
uni-app接入iconfont图标库
09-12
要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值