首先阿里图标在项目中使用有很多种方式这里只写两种最好用的。
先把不管哪种方式前面相同必需的步骤完成
1.先进入阿里图标库 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 登录账号
2.搜索找到自己需要的图标 -添加入库-点击右上角购物车
image.png
3.把图标添加入项目，没有项目就随便新建一个项目
image.png
[图片上传中...(1678334353470.jpg-d916ec-1678334373547-0)]
一、unicode 方式引用 注意这种方式不支持多色图标 但是可以自己color添加颜色
1.根据1、2、3先点击unicode 在点击跟新代码，把生成的代码复制
image.png
2.把复制的代码写入项目
@font-face {
font-family: 'iconfont'; /* Project id 3940860 */
src: url('//at.alicdn.com/t/c/font_3940860_wcj1s7v9ym.woff2?t=1678329659530') format('woff2'),
url('//at.alicdn.com/t/c/font_3940860_wcj1s7v9ym.woff?t=1678329659530') format('woff'),
url('//at.alicdn.com/t/c/font_3940860_wcj1s7v9ym.ttf?t=1678329659530') format('truetype');
}
3.然后加入代码，这个代码类名可以自己随便定义
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
4.最后再点击复制代码需要的地方写入
image.png
这里calss="第3步自定义的类名"；标签中是点击复制的代码
<i class="iconfont"></i>
一、Symbol方式引用 这种方式支持多色图标
1.跟unicode 方式第一步一样，只不过把unicode 切换为Symbol
2.这里以vue-cli项目为列，把复制的代码写入public文件夹下面html文件
<html lang="">
<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="icon" href="<%= BASE_URL %>favicon.ico">
<script src="这里写的就是复制来的代码"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
3：加入通用css代码（引入一次就行）：
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4：点击复制代码粘贴进href，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>