阿里巴巴矢量图标的使用

阿里巴巴矢量图标的使用

1.准备图标

1.打开官网

iconfont-阿里巴巴矢量图标库

2.搜索图标

3.添加至购物车

找到自己想要的图标添加到购物车

4.添加至项目

我已经建好一个名为测试的项目了，没有的新建一个就好

5.添加成功

查看项目仓库里面的图标

2.使用

阿里巴巴图标本质就是字体，使用方法分为两种，一种是本地下载字体使用，另一种是在线链接使用

1.本地下载字体使用

1.下载到本地

2.解压压缩包

3.本地创建好网页，将下载的download中的字体文件和网页放在同一个文件夹中

4.用vscode打开文件,打开demo_index网页

5.第一种方式：Unicode 使用步骤：

• 放入css代码

注意修改url路径：

• 放入图标元素

网页显示成功：

6.第二种方式：Font class使用：

网页显示成功：

2.图标不是彩色的解决办法

然后再重新下载字体

3.修改图标大小

效果：

4.在线链接使用

显示效果：