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

1.阿里巴巴图标库

本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目；
阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库

进入官方图标库后，点击第一个图标库

由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码：

var iconList = document.querySelectorAll('.icon-gouwuche1');
for (var i = 0; i < iconList.length; i++) {iconList[i].click();
}

完成后在购物车中会出现所有图标(页面可能会卡一会儿)

将购物车中的图标全部加入项目(注意：需要提前在自己的账号中创建一个空项目)

2.引入文件

点击图标管理，进入自己的项目后台

点击我的项目，然后点击加入图标的项目，可以看到刚刚加入的所有图标

点击下载至本地，将图标样式文件下载到本地，解压后可以看到如下内容
将iconfont.css加入uni-app项目中，我的路径如图所示

我们再回到阿里巴巴图标管理后台，点击Unicode和生成在线连接

可以看到如下图所示的链接

将上图红线框中的链接替换到之前加入到uni-app项目中的iconfont.css中，iconfont.css需要被替换的内容如下图所示，即@font-face中的内容

然后在全局文件中引入iconfont.css文件，我这里的全局文件为App.vue

3.使用图标

在页面中直接使用

**注意，需要使用class属性，前缀为icon iconfont，最后的内容为阿里巴巴图标库中的图标名称 **，如下图所示

最终效果如图所示，首页后面那个图标就是最终效果(这里使用的是微信小程序)：

4.总结

引用图标库的网络地址可以省去导入大量图标文件的麻烦，也能提升整个项目的运行速度，且需要使用不同的图标时只需要在官网复制相应代码即可，相比于传统的加入图标文件要省事的多

uni-app引用阿里巴巴官方图标库相关推荐

将阿里巴巴官方图标库批量添加到购物车中
我是一个Java全栈开发,有时候需要找一些图标进行界面显示,偶然找到了阿里巴巴的这个网站(阿里巴巴矢量图标库),感觉突然发现了新大陆,但是他这个图标只能一个一个添加,很慢,所以看见有人写了两块代码,直 ...
如何引用阿里巴巴矢量图标库的图标
网页链接:https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=14726 ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
阿里巴巴矢量图标库（网页）
首先,阿里巴巴矢量图标库网站资源非常齐全,主要包含了图标库,矢量插画库,3D插画库,动效库,字体库等等,基本能满足小伙伴们日常开发设计需求,里面的所有素材都可以免费使用. 图标库里包含有2300W+ ...

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

目录

1.阿里巴巴图标库

2.引入文件

3.使用图标

4.总结

uni-app引用阿里巴巴官方图标库相关推荐

最新文章

热门文章