引入图标字体的三种方式

图标字体（iconfont）

---

------我们在网页中会发现一些小图标，可以通过图片引入图标，但是图片本身比较大，应用起来非常的不灵活。所以在这里给小伙伴们介绍一个叫“图标字体”的小玩意~~

这里是京东主页搜索框中的一个相机小图标

首先介绍一下引入图标字体的三种方式

一、直接通过类名来使用图标字体
二、使用伪元素来设置图标字体
三、通过实体设置图标字体

下载图标字体的资源~

官网链接

下载解压完后需要将CSS和webfont两个文件夹移动到项目文件中

注：font文件夹是我新建来存储这两个文件的,方便查看。

完成上述步骤后接着将CSS中的all.css引入

一、通过类名来使用图标字体

在标签内使用style可以设置图标文字的样式

查看图标名称前的fa或者fas这些可以使用API文档查看

这篇文章有详细安装和介绍Font AwesomeAPI文档的步骤

二、使用伪元素来设置图标字体

• 在要设置图标文字的元素中添加伪元素before或者after选中
• 在content中填写想要的图标字体的编码
• 设置字体的样式

* 箭头所指的两项均为必需的，可以在all.css中查看。*

三、通过实体设置图标字体

---

到这里就结束了，希望这篇文章可以帮到有需要的小伙伴

有什么不足的欢迎在评论区留言~