小程序引入阿里云矢量图库图标

简介

阿里云矢量图库(Aliyun Vector Icon Library)是阿里云提供的一个图标库,为开发者和设计师提供了丰富的矢量图标资源,用于在网页、移动应用和其他设计项目中使用。

使用阿里云矢量图库,你可以快速搜索、选择和下载各种类型的矢量图标,满足你的设计需求。该图库包括了多个图标集合,涵盖了不同主题和领域的图标,例如常用的 UI 图标、通用图标、品牌图标等。

要使用阿里云矢量图库,你可以访问官方网站(https://www.iconfont.cn/),注册一个账号,并进行登录。登录后,你可以浏览和搜索图标,将你需要的图标添加到你的项目中,并下载相应的图标文件(通常是 SVG 格式)。

此外,阿里云矢量图库还提供了一些便捷的功能,如图标的在线编辑、自定义图标库、图标的样式更改等,以满足不同的设计需求和个性化要求。

请注意,阿里云矢量图库可能有一些使用限制和许可要求,请在使用前仔细阅读并遵守相关的使用条款和许可协议。

前端引入步骤

1、在iconfont官网平台生成css代码

创建一个项目(进入我的项目,点击创建项目)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dnvU5LX-1689579204567)(E:\PRD\Images\image-20230706141759441.png)]

点击 + 号创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpW793Zb-1689579204569)(E:\PRD\Images\image-20230706142000318.png)]

输入相关的信息,创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCTJZJop-1689579204569)(E:\PRD\Images\image-20230706142109865.png)]

在图标库找到对应的图标,点击购物车

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qgmw8iq-1689579204569)(E:\PRD\Images\image-20230706142245771.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bjSUKtR-1689579204570)(E:\PRD\Images\image-20230706143732694.png)]

点击添加至项目 --》选择对应的项目 --》点击确定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnSxKUsU-1689579204570)(E:\PRD\Images\image-20230706142451070.png)]

这里我只提供一种方法(Font class),一共有三种,感兴趣的自己去百度吧

找到对应的项目 --》点击 Font class --》查看在线链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gclA2tGQ-1689579204571)(E:\PRD\Images\image-20230706143941445.png)]

点击生成,进行相关css文件生成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48qTGyVR-1689579204571)(E:\PRD\Images\image-20230706144058457.png)]

将复制的url在浏览器中打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lp58NDyw-1689579204572)(E:\PRD\Images\image-20230706144225809.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPgSfZpY-1689579204572)(E:\PRD\Images\image-20230706144259798.png)]

2、进行小程序引入图标

将上面浏览器中显示的css代码复制到 wxss文件中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9pDoFCp-1689579204572)(E:\PRD\Images\image-20230706145207216.png)]

通过iconfont 和图标名称进行引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFlIhhEK-1689579204573)(E:\PRD\Images\image-20230706151559194.png)]

引入成功

猜你喜欢

转载自blog.csdn.net/ITKidKid/article/details/131767647