阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库
1、单色图标库
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font-veafwwbvy/iconfont.css">
</head>
<body>
<i class="iconfont icon-anzhuoceshi"></i>
</body>
</html>
步骤
打开阿里巴巴矢量图标库,在素材库中选择单色图标库
选择一款单色图标并添加入库,点击进入购物车
下载所选择单色图标的代码
复制所下载的压缩文件夹
右击项目所在文件夹,点击在文件资源管理器中显示
粘贴压缩文件夹,并解压至项目文件夹中 ,如下图文件夹font-veafwwbvy
在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名,并复制类名,如下图
在html文件中,首先通过link引入iconfont.css的路径,其次,在class中粘贴图标类名
最终效果
2、多色图标库
1.在线引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://at.alicdn.com/t/c/font_4297416_g7ted2244pt.js"></script>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-Nodejs"></use>
</svg>
</body>
</html>
步骤
打开阿里巴巴矢量图标库,在素材库中选择多色图标库 ,选择一款多色图标
将选择的多色图标添加入库,并且打开购物车
将购物车中选择的多色图标添加至项目
点击右上角新建文件图标,将多色图标添加到新建项目,点击确定
点击symbol,再点击查看在线链接
点击更新代码,弹出框选择确定
点击复制代码(在线路径),再选择所需要的多色图标,复制代码(多色图标的类名)
将两次复制的代码分别写入下列位置
最终效果图
2.本地引入
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./iconfont.js"></script>
<style>
.icon{
width: 2em;
height: 2em;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-GoogleChrome"></use>
</svg>
</body>
</html>
步骤
打开阿里巴巴矢量图标库,在素材库中选择多色图标库 ,选择一款多色图标
将选择的多色图标添加入库,并且打开购物车
将购物车中选择的多色图标添加至项目
点击右上角新建文件图标,将多色图标添加到新建项目,点击确定
点击更新代码,弹出框选择确定
点击图中代码部分
复制以上代码
在项目下方新建iconfont.js文件,将所复制代码写入
复制所选多色图标的类名
在html文件中,引入iconfont.js的路径,并且将所复制的类名写入xlink:href属性中
最终效果