字体图标
1 编码方式使用字体图标
编码方式使用字体图标，先下载字体图标
在字体图标官网选好对应的字体图标和，选择下载代码。
1.1 下载字体图标
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"></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文件。 |