A1 字体图标的使用

字体图标

1 编码方式使用字体图标

编码方式使用字体图标，先下载字体图标

在字体图标官网选好对应的字体图标和，选择下载代码。

1.1 下载字体图标

https://www.iconfont.cn/

1.2 引入iconfont.css文件中的字体声明样式代码

将字体声明代码放入自己的页面css中，但需要修改src后面字体文件的路径为当前文件夹对应的路径。【或者直接引入iconfont.css文件】

方法	代码
法一：引入iconfont.css中的字体声明代码，并将src的对应路径改为当前文件对应的字体文件路径	/*字体声明  */ @font-face { /* 给字体图标设置字体名  */ font-family: "iconfont"; /* Project id  */ /* 这里需要将字体文件路径修改为解压后的文件路径  */ src: url('./font/iconfont.ttf?t=1687872783713') format('truetype'); }
法二：直接引入iconfont.css文件	<link    rel="stylesheet" href="./font/iconfont.css" />

1.3 给标签设置类名，在标签内部写入编码

<i class="myfont">&#xe633;</i>

1.4 给类名标签设置编码对应的字体名

<style>

      .myfont {

        font-family: 'iconfont';

      }

</style>

2 类名方式使用字体图标

2.1 引入iconfont.css文件

方法	代码
法一：引入iconfont.css中的字体声明代码，并将src的对应路径改为当前文件对应的字体文件路径	/*字体声明  */ @font-face { /* 给字体图标设置字体名  */ font-family: "iconfont"; /* Project id  */ /* 这里需要将字体文件路径修改为解压后的文件路径  */ src: url('./font/iconfont.ttf?t=1687872783713') format('truetype'); }
法二：直接引入iconfont.css文件	<link    rel="stylesheet" href="./font/iconfont.css" />

2.2 给标签设置多类名

icon-aichegujiabeifen7为字体图标对应的类名

<i class="iconfont.icon-aichegujiabeifen7"></i>

3 伪元素中使用字体图标

3.1 引入iconfont.css文件

方法	代码
法一：引入iconfont.css中的字体声明代码，并将src的对应路径改为当前文件对应的字体文件路径	/*字体声明  */ @font-face { /* 给字体图标设置字体名  */ font-family: "iconfont"; /* Project id  */ /* 这里需要将字体文件路径修改为解压后的文件路径  */ src: url('./font/iconfont.ttf?t=1687872783713') format('truetype'); }
法二：直接引入iconfont.css文件	<link    rel="stylesheet" href="./font/iconfont.css" />

3.2 给标签设置多类名

myconfont为自定义类名

<i class="iconfont. myconfont"></i>

3.3 自定义类名myconfont类名定义伪元素样式

伪元素的content属性需要将编码格式的后四位放在属性值中，并用转义符【\】转义【例如：content: "\e602";】

.myconfont::before {

/* 伪元素中的content属性写入字符编码后四位，需要有转义字符\ */

  content: '\e602';

/* 定义字体编码的字体类型 */

  font-family: 'iconfont';

 }

4 上传字体图标

进入iconfont官网 → 点击上传图标→ 点击“点此上传”→选择需要上传的svg文件。