引入图标字体的三种方式

图标字体(iconfont)


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


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

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


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

下载图标字体的资源~

官网链接

引入图标字体的三种方式_第1张图片
引入图标字体的三种方式_第2张图片

下载解压完后需要将CSSwebfont两个文件夹移动到项目文件中
引入图标字体的三种方式_第3张图片
注:font文件夹是我新建来存储这两个文件的,方便查看。

完成上述步骤后接着将CSS中的all.css引入
引入图标字体的三种方式_第4张图片
引入图标字体的三种方式_第5张图片

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

引入图标字体的三种方式_第6张图片 在标签内使用 style可以设置图标文字的样式

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

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

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

  • 在要设置图标文字的元素中添加伪元素before或者after选中
  • 在content中填写想要的图标字体的编码
  • 设置字体的样式
引入图标字体的三种方式_第7张图片 * 箭头所指的两项均为必需的,可以在all.css中查看。*

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


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

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

你可能感兴趣的:(Font,Awesome,图标文字,CSS3,html,css3)