阿里巴巴矢量图标库的使用

在我们搜索想要的图标后【这里以关键词 “下载” 为例】就会看到以下页面

在这个页面，只要把鼠标移动到想要的图标后就会出现 “下载” 的选项，点击即可

接下来就会看到下面这个弹窗页面

在这里可以选择颜色、大小等【注意：若一开始是彩色图标，在这里选择一种颜色后，图标会变成单色图标】

一般下载 PNG 格式即可下载

这种方式是对单一图标下载，也可以先将想要的图标加入购物车，然后再批量下载

下载后就会得到一个压缩包，解压即可获取全部图标图片文件了

方法二：添加至项目【推荐】

在上一个方法中，批量下载的上面有一个添加至项目的按钮，点击即可

若没有项目则添加项目即可

这样方便对图标文件进行统一的集中管理

添加后就会自动跳转至项目图标管理的页面

左侧就是所有的项目，中间就是项目中的所有图标了

添加到项目后，如何使用这些图标呢？

选择 “Fon t Clas s”，然后点击生成代码

此时可以得到一个链接

接着在 HTML 文件中以外部文件的形式添加这个 css 样式文件

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    
    <!-- 导入阿里巴巴图标库图标 --&gt;
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4351872_3552ir4aslo.css">

    <title>Document</title>
</head>
<body>
    
</body>
</html>

注意：需要在链接前面添加 “http://”

然后把鼠标移动到需要使用的图标上，点击“复制代码”

接着在 HTML 文件中使用

<!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">

    <!-- 导入阿里巴巴图标库图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4351872_3552ir4aslo.css">

    <title>Document</title>

    <style>
       
    </style>
</head>
<body>

    <!-- 图标在这 -->
    <span class="iconfont icon-xiazai"></span>
    
</body>
</html>