前端如何使用阿里巴巴矢量图库的图标
1.首先搜索想要的图标
阿里巴巴矢量图库http://www.iconfont.cn,可以github登录或者微博登录
2.添加购物车
3.添加至项目
没有项目可以新建一个项目，添加到项目的好处是可以让你一次性下载多个你看中的图标。
4.下载至本地
点击资源管理下面的我的项目，再将选中的图标一次性下载到本地
5.引用图标
查看下载后的解压的文件
浏览器查看demo_index.html,引用阿里巴巴图标，有三种方式
5.1 unicode引用方式
<!--
* @Descripttion: 首页
* @version: 1.0.0
* @Author: fengyang
* @Date: 2021-07-21 16:50:43
* @LastEditors: fengyang
* @LastEditTime: 2021-07-21 20:10:51
-->
<!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>
<style>
@font-face {
font-family: "iconfont";
src: url('./fonts/iconfont.woff2') format('woff2'),
url('./fonts/iconfont.woff') format('woff'),
url('./fonts/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<!--
1.引入unicde，font-face用法
@font-face {
font-family: 'XXX'; // 定义字体的名称
src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
}
2.font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
3.Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
-->
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
</html>
5.2 font-class引用方式
<!--
* @Descripttion: 首页
* @version: 1.0.0
* @Author: fengyang
* @Date: 2021-07-21 16:50:43
* @LastEditors: fengyang
* @LastEditTime: 2021-07-21 20:10:13
-->
<!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>
<style>
@font-face {
font-family: "iconfont";
src: url('./fonts/iconfont.woff2') format('woff2'),
url('./fonts/iconfont.woff') format('woff'),
url('./fonts/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 2.font-class Unicode 使用方式的一种变种*/
.icon-yonghu:before {
content: "\e66b";
}
.icon-zhaopinguanli:before {
content: "\e608";
}
</style>
</head>
<body>
<!--
1.引入unicde，font-face用法
@font-face {
font-family: 'XXX'; // 定义字体的名称
src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
}
2.font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
3.Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
-->
<span class="iconfont icon-yonghu"></span>
<span class="iconfont icon-zhaopinguanli"></span>
</body>
</html>
5.3 Symbol引用方式
<!--
* @Descripttion: 首页
* @version: 1.0.0
* @Author: fengyang
* @Date: 2021-07-21 16:50:43
* @LastEditors: fengyang
* @LastEditTime: 2021-07-21 20:14:45
-->
<!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>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!--
1.引入unicde，font-face用法
@font-face {
font-family: 'XXX'; // 定义字体的名称
src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
}
2.font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
3.Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
-->
<script src="./fonts/iconfont.js"></script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yonghu"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhaopinguanli"></use>
</svg>
</body>
</html>