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

微风粼粼

1621人浏览 · 2023-07-17 15:36:02

微风粼粼 · 2023-07-17 15:36:02 发布

简介

阿里云矢量图库（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)]$

引入成功

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r