二、iconfont 阿里矢量图标库

TIP

iconfont 是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。

阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。

1、官网

TIP

iconfont 阿里矢量图标库官网地址：https://www.iconfont.cn

2、搜索对应图标

TIP

在首页搜索框，搜索对应的图标名，比如“购物车”，然后回车，就会显示我们想要的小图标 ![[Pasted image 20260301095511.png]]

3、下载小图标直接使用

TIP

在下图中，我们可以选择自己喜欢的小图标，点击下面的下载按扭，进行下载使用 ![[Pasted image 20260301095625.png]] 点击下载后，就会弹出如下界面，我们可以在界面中调剌图标的颜色、大小，然后选择下载的图标类型 ![[Pasted image 20260301095648.png]] 图片下载后，我们就可以使用了。

**企业最佳实践

在实际的项目开发中，我们并不会一张一张的去下载图片应用，而是会把项目中需要用到的图标先统一加入到购物车，然后再添加到项目中，下载对应的项目代码来使用。

这样我们就可以通过 CSS 代码来控制图标的大小，颜色等。

4、iconfont 在实际开发中的应用

TIP

在搜索框中，搜索 “购物车”，然后回车，进入到下面这个页面，在这个页面中，我们把图标加入到购物车 ![[Pasted image 20260301095754.png]] ![[Pasted image 20260301095805.png]] ![[Pasted image 20260301095819.png]] ![[Pasted image 20260301095829.png]] 点击上面的确定按扭，就会跳转到以下页面，可以下载对应项目中的图标使用 ![[Pasted image 20260301095845.png]] 项目文件下载到本地后，把以下文件内容放在一个新建的 iconfont 文件夹中，然后把 iconfont 文件放项目根目录下 ![[Pasted image 20260301095904.png]] 关于如何使用阿里图标，双击下面的网页文件，里面提供了三种使用方法 ![[Pasted image 20260301095941.png]] 第二种方式使用的最多，具体使用方式，参考以下教程步骤 ![[Pasted image 20260301100000.png]]

5、二维码生成网站-草料网

TIP

当我们希望他人通过扫描二维码进到我们网站时，我们可以把网站的网址生成对应的二维码，这样他人在扫描二维码时，就可以进入到我们的网站。

接下来给大家分享的 草料网 ，他可以帮我们实现把网址生成对应二维码。

草料网官方地址：https://cli.im

使用教程

①、进到草料网首页，选择网址 ![[Pasted image 20260301100113.png]] ②、选择网址跳转活码，在输入框中输入对应的网址，然后点击生成跳转活码，就会出现步骤 3 中的效果 ![[Pasted image 20260301100145.png]] ③、如果想要美化下二维码图片，可以上传 logo 和做相关样式美化，最后下载图片就可以用了 ![[Pasted image 20260301100203.png]] ④、大家可以拿 出 手机微信扫一下这个二维码，就可以跳转到我们艾编程的官网了。