如何在uni-app中大量使用阿里巴巴矢量图图标

最新推荐文章于 2024-07-18 22:35:56 发布
最新推荐文章于 2024-07-18 22:35:56 发布
阅读量239 收藏
点赞数
文章标签： 图标下载 图库操作 项目集成 Vue引用 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53413858/article/details/120646054
版权

第一步：

先去图库里面找自己喜欢的图标然后加入购物车，然后点击购物车把选择好的图标全部添加到一个项目里面

第二步：

 在添加完项目后就会出现这样一个界面，点击下载到本地

第三步

把下载的文件全部拖到你的项目里面（demo_index.html文件不用）

第四步

直接在app.vue中引用 

第五步 使用方法 (我这里是class引入)

<icon class="iconfont icon-xxx "></icon>

网页打开demo_index.html文件 就可以直接使用 样式代码了

 

 

 

吱昂张and阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp引入阿里巴巴矢量图标库
m0_73075579的博客
05-09 422
第一部分：创建矢量图标库1.登录阿里巴巴矢量图标库，点击导航栏的资源管理-我的项目。2.点击右上角加号图标创建。3.根据实际情况填写信息，点击新建。 4.现在项目名为wx-app的图标库就已经创建完成，在刷新页面后，可以在“我发起的项目”中看到。第二部分：添加图标至图标库1.可以在首页进行搜索，寻找自己所需要的图标。2.这里点击搜索关键词“箭头” ，进入搜索结果页。3.将鼠标移动到我们想要添加的图标上，点击购物车，将图标添加进购物车。 4. 点击导航栏的购物车，可以看到我们刚才添加的图标，点击下方的添加至
uni-app使用阿里巴巴矢量图标库
weixin_45897872的博客
04-10 1222
uni-app使用iconfont中的图标 1.打开网址 链接: 阿里巴巴矢量图标库. 2.登录自己的账号 3.点击响应的类型然后点击收藏 4.点击项目 5.点击下载到本地 6.解压下载下来的压缩文件 7.最后修改该文件 就可以了 使用方法 1.打开解压时的html文件 2.格式如下 3.找到对应图标的css样式 大功告成！！！！！ ...
在 uniapp 中使用 阿里巴巴矢量图标
最爱喝怡宝的博客
04-11 3933
最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面 矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程 1.到官网，登录，没有账号的话就注册一个： iconfont-阿里巴巴矢量图标库 2.搜索自己想要的图标，并加入购物车中 3. 点击右上角 购物车 图标，打开购物车 4.点击下载代码，把下载下来的文件解压出来 5. 目前我下载的，解压出来以后，文件都是默认存放在font_i5lcy3k..
uniapp-阿里巴巴矢量图标使用（字体图标引用）
最新发布
m0_62626838的博客
07-18 341
3.解压下载好的压缩包，将里面的文件全部放到static中font文件夹中（自己新建），并打开demo_index.html文件，复制其中的字体声明代码至自己的页面的css中。6、打开font文件夹里的demo_index.html，选择Unicode中复制图标的代码,用到页面中。4、修改复制过来的字体声明中的路径。（即下图的src路径需替换为font中的.tff文件）5、在页面的元素样式中需引入font-family: 'iconfont';网站，将想引入的图标加入购物车。
uni-app项目引入阿里巴巴矢量图标库
qq_44242707的博客
04-18 515
我这里放入的位置是src/static/icon目录下。
(六) uni 引入阿里巴巴矢量图
SsStr的博客
06-19 347
效果 第一步 进入 阿里巴巴矢量图官网https://www.iconfont.cn/需登陆 随意选择一套添加入库 - 然后点击购物车 - 添加项目（自己创建个项目） - 下载到本地 解压后 把 iconfont.css复制到uni项目 删除iconfont.css 除了 url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAB6kAAsAAAAARgAAAB5UAAEAAAAAAAAAA...
uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 2818
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
uni-app引用阿里巴巴官方图标库
二十岁的程序员想搞钱
05-09 828
最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式 目录1.阿里巴巴图标库2.引入文件3.使用图标4.总结 1.阿里巴巴图标库 本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目； 阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库 进入官方图标库后，点击第一个图标库 由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码： var iconList = document.querySelectorAll('.icon-g
uni-app移动应用开发总结
tt12514的博客
05-22 1745
开发效率高：Uni-app提供了内置的组件库、丰富多样的模板和示例代码，并且支持HBuilderX可视化编辑器，可以快速搭建UI界面，省去了手写页面样式的繁琐过程。同时，在开发过程中，Uni-app还封装了常见API，例如路由、网络请求、存储、传感器等，加速了业务逻辑的实现，提升了开发的效率。保持学习和实践：Uni-app是一个不断更新和演变的框架，我们需要保持学习和实践，掌握最新的开发技术和解决方案，并将其应用到具体的项目中，在实践中不断积累经验和提高能力。
【uni-app】懂你找图--创建项目到首页推荐模块
weixin_58214412的博客
12-07 935
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中的使用方法
m0_58611644的博客
01-16 1302
2.打开下载到本地的项目文件，将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入，方便管理)执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复。3.打开iconfont.css文件，然后将顶部 @font-face{}第二种 Symbol中在图标上点复制代码 icon-icon-03_ji。替换为你的项目中Unicode下的 @font-face{}切换到刚才下载到本地的项目文件目录下执行该命令。中的2和4(只要该文件夹中的 .css文件)
阿里矢量图在uniapp中的使用
xioxi
05-28 153
在App.vue文件的style中引用iconfont.css文件，最好是放在style中的最上面 @import url(“static/css/iconfont.css”); 使用方法 转自：https://blog.csdn.net/dabao87/article/details/107175104
uni-app线上引入阿里矢量图
Yw_better的博客
06-18 3177
1.登录阿里矢量图，选择自己想要的图标，创建项目，并添加到项目中。 2.打开图标管理---我的项目---我发起的项目，选择查看在线链接（若添加新图标需要重新生成在线链接，并替换）。 3.复制代码，打开app.vue，添加以下代码： 4.引用方法： 5.效果展示： ...
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2272
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
uni-app 引入 iconfont - 阿里巴巴矢量图标库
票票的博客
01-13 355
登录iconfont - 阿里巴巴矢量图标库，在资源管理 - 我的项目里复制代码 在 uni-app 项目的 common 文件夹下新建 iconfont.css 文件，粘贴代码 在 uni-app 项目的 App.vue 文件中引入 完成上面三步，就可以任意组件随意使用了 <text class="iconfont icon-dianhua"></text> <text class="iconfont icon-jia"></text&g..
uniapp开发App如何引入阿里巴巴矢量库图标
SSophia的博客
11-08 3191
uniapp开发App如何引入阿里巴巴矢量库图标
在uni-app中使用web-view使用天地图的地图展示
08-08
在uni-app中使用web-view组件可以方便地加载天地图的地图展示。 首先，我们需要在uni-app项目中导入天地图的地图展示页面。可以通过在template中添加web-view组件，并设置src属性为天地图的地图展示页面的URL。同时，还可以设置web-view组件的style属性来调整地图的大小和位置。 接下来，我们可以在script中使用uni.navigateTo方法来跳转到包含天地图的地图展示页面。在跳转前，我们可以将需要的参数传递给目标页面，例如地图的初始中心坐标和缩放等级。在目标页面中，我们可以通过uni.getOpenerEventChannel方法来监听跳转页面传递的参数，并在web-view组件加载完成后，使用JavaScript的API来控制地图的显示。 通过以上步骤，我们就可以在uni-app中使用web-view组件来加载天地图的地图展示了。同时，我们也可以利用天地图的API来实现更多地图相关的功能，例如标记点、线路规划等。 需要注意的是，在使用web-view组件加载天地图的地图展示时，可能会受到天地图的接口调用次数限制或网络环境的影响。因此，建议合理使用天地图的API，并根据实际需求做好页面加载失败的处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值