前端如何使用阿里巴巴矢量图库的图标
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>
