如何使用阿里云矢量图标库

article/2025/9/24 3:31:30

1.百度搜搜索阿里云矢量库
2.开发时多使用单色矢量库
在这里插入图片描述 3.选择一个你喜欢的图标并且添加到购物车
4.点击右上角购物车可以看到自己添加过的图标

5.点击添加至项目
专业人士可以使用github登陆
非专业人士使用微博登录即可

6.点击右侧加号
创建一个项目
自己进行命名
之后点击确定就进入自己的项目库了
在这里插入图片描述
7.将代码显示出来即可

在Font class中查看的是该图标的css样式表
在这里插入图片描述点击这个链接这样就能看见你添加的图标的样式啦！

复制链接（注意这个链接要放入html的外链样式表的href属性中时要记得加上http ）
示例如下

   <!--复制的链接前没有http 要自己补充 并且要把这个链接在浏览器打开查看图标的css样式源码--><link rel="stylesheet" href="http://at.alicdn.com/t/font_2737111_rgc4iudix9f.css">

8.显示图标

！！！！！注意矢量图标只能应用在行级元素中！！！！！

比如
<i></i> 
<em></em> 
<strong></strong>
<span></span>
等等

方法一：接下来在点击链接后的网页中选择自己想要的图标对应的伪类名，写入自己代码的行级元素的class属性中就可以了

方法二：或如果你很熟练的话可以直接在图片上点击复制代码，这个意思就是你直接把这个图标的伪类名复制下来了

在这里插入图片描述

！！！！！！注意在给行级元素元素class属性值时，要先写入一个iconfont然后再写它在.css中对应的伪类名！！！！！！

   <!--使用图标的方法 只能放在行内标签内--><div class="icons"><i class="iconfont icon-Backward-Button" ></i><span class="iconfont icon-Camera"></span><em class="iconfont icon-Cloud-2"></em></div>

9.在浏览器中打开.html文件就可以显示出来了

这个是我在head中又添加了样式属性把它变成粉色了正常应该和你们在矢量网站看到的一样

附加代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--复制的连接前没有http 要自己补充 并且要把这个链接在浏览器打开查看图标的css样式源码--><link rel="stylesheet" href="http://at.alicdn.com/t/font_2737111_rgc4iudix9f.css"><style>.icons{color: hotpink;}</style>
</head>
<body><!--使用图标的方法 只能放在行内标签内--><div class="icons"><i class="iconfont icon-dayi" ></i><span class="iconfont icon-diaodaiqun"></span>        </div>   
</body>
</html>