阿里巴巴矢量图标的使用
1.准备图标
1.打开官网
2.搜索图标
3.添加至购物车
找到自己想要的图标添加到购物车
4.添加至项目
我已经建好一个名为测试的项目了,没有的新建一个就好
5.添加成功
查看项目仓库里面的图标
2.使用
阿里巴巴图标本质就是字体,使用方法分为两种,一种是本地下载字体使用,另一种是在线链接使用
1.本地下载字体使用
1.下载到本地
2.解压压缩包
3.本地创建好网页,将下载的download
中的字体文件和网页放在同一个文件夹中
4.用vscode
打开文件,打开demo_index
网页
5.第一种方式:Unicode
使用步骤:
- 放入
css
代码
注意修改url
路径:
- 放入图标元素
网页显示成功:
6.第二种方式:Font class
使用:
网页显示成功:
2.图标不是彩色的解决办法
然后再重新下载字体
3.修改图标大小
效果:
4.在线链接使用
显示效果: