betheme如何设置实现背景偏移效果
2021年8月6日
betheme高级自定义:如何自定义css
2021年8月28日

小程序开发:uniapp如何正确引入阿里巴巴图标库(亲测有效)

我们都知道uniapp中引入外部图标是比较麻烦的事情,因为它不能像网页一样直接使用网址引入,所以就需要你下载下来引入了,网上有不少的引入办法,不过都说的不明不白的,这一篇讲的就比较清晰了,分享给大家:

首先,我们要去阿里巴巴图标库注册一个账号,你可以在铬元素工作室的工具页面找到链接;

登陆以后,我们搜索需要的图标,然后将他保存到项目,如果没有项目,那就新建一个了:

点击上边那个购物车就可以把图标收藏,然后就跟购物一样打开购物车,它就会提示你保存到哪个项目,因此我们需要一次性选好图标,然后批量加入,节约时间

添加到项目以后,我们打开这个项目,就可以看到所有我们保存的图标,然后我先font class 下载到本地:

下载后是一个压缩包,解压以后,我们只需要里边的两个文件:iconfont.css和iconfont.ttf

复制一下iconfont.ttf文件到项目下,可以放到static静态资源下,然后复制iconfont.css到公用css文件夹,当然了这个随便了就,打开文件,修改一下引入就可以了:

文件之前的引入是线上引入,显然是不行的,会报错,所以我们只需要修改成本地引入就可以了,其他的都删除。

如何使用呢?方法也很简单,只需要在class里边引入格式就行了,具体格式如下:

这个办法感觉还是很简单的,也容易理解,希望可以帮助更多的小程序开发者。

铬元素大人
铬元素大人
喜欢电影,小说和游戏,也喜欢鼓捣主题,想做好独立站的死宅一枚

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

在线客服
在线客服
热线电话
QQ客服