iconfont字体图标的使用

 字体图标官网：iconfont-阿里巴巴矢量图标库

1. 添加字体图标入库

在官网找到需要使用的字体图标，添加入库

2. 下载字体图标

所有图标添加完成后，点击右上方购物车图标，点击添加至项目

点击添加至项目后，他会跳转到响应的项目页面，这时点击下载至本地

3. 引入对应文件

将下载完成后的压缩包解压后，需要将这四个文件放入项目文件夹中

注意：如果iconfont.css和其他三个字体文件不在同一个目录，需要修改iconfont.css中的src路径

@font-face {
  font-family: "iconfont"; /* Project id 4298372 */
  src: url('iconfont.woff2?t=1698042464558') format('woff2'),
       url('iconfont.woff?t=1698042464558') format('woff'),
       url('iconfont.ttf?t=1698042464558') format('truetype');
}

在用到字体图标的html中，引入iconfont.css文件

<link rel="stylesheet" href="iconfont.css">

4. 使用字体图标

第一种方法：Unicode编码

将图标的Unicode编码写入标签内，需要给标签加上class名：iconfont

<div class="iconfont">&#xe601;这是一个购物车</div>

第二种方法：class类名

将图标的class名写入标签的class内，需要加上class名：iconfont

<div class="icon-gouwucheman iconfont">这是一个购物车</div>

第三种方法：伪类 :before / :after

 在iconfont.css文件中，可以找到对应class类名的伪类，其中content引号中的就是图标代码

.icon-gouwucheman:before {
  content: "\e601";
}

在标签伪类的content写入即可，需要给标签加上class名：iconfont

.box:after {content: "\e601"}

<div class="box iconfont">这是一个购物车</div>

5. 字体图标的特点

字体图标可以像文字一样，使用font-size更改大小，使用color设置颜色等等

注意：在iconfont.css中，设置了iconfont类名的一些样式，其中有font-size: 16px;

更改图标大小需要注意权重，或者在iconfont.css文件里将此条删除

字体图标官网：iconfont-阿里巴巴矢量图标库