Iconfont使用

一、下载字体库
1.进入iconfont官网https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
后点击图标库>官方图标库
2.选择想用的图标，点击购物车图标加入购物车
3.点击右上角购物车图标，在弹出窗口中点击添加至项目
4.点击下载至本地
二、在vue项目中引入图标库
1.下载的文件解压后将font_文件夹复制到vue项目src目录下，
2.新建font.css,并添加内容@font-face {
font-family: ‘iconfont’;
src: url(’./font_2737986_6n12lkduql5/iconfont.woff2?t=1628668643525’) format(‘woff2’),
url(’./font_2737986_6n12lkduql5/iconfont.woff?t=1628668643525’) format(‘woff’),
url(’./font_2737986_6n12lkduql5/iconfont.ttf?t=1628668643525’) format(‘truetype’);
}

.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}注意url中的地址要换成你的font文件夹地址
3.main.js中引入iconfont.css文件
import ‘./font_2737986_6n12lkduql5/iconfont.css’
这一步很关键，少了这一步图标会显示成一个小方块
4.文件中使用（类名方式）
写一个span标签，添加类名你下载图标时官网提供的图标相应类名，如下列实例

注意iconfont类名是固定写法，每一个图标都必须加上这个类名