引入图标字体的三种方式

图标字体（iconfont）

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

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

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

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

下载图标字体的资源~

官网链接

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

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

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

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

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

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

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

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

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

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

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

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

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

引入图标字体的三种方式相关推荐

go引入外部依赖的三种方式：go get，go module，vendor目录
本文转载自golang 引入外部包的三种方式:go get, go module, vendor目录_guoguolifang的博客-CSDN博客_golang 外部包 import "g ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
itextpdf 5.5.6版本生成pdf文件字体设置三种方式
1.第一种是引用window本地系统字体(这里以常见的宋体为例) BaseFont bf =BaseFont.createFont("C:/WINDOWS/Fonts/simsun.ttf& ...
golang 引入外部包的三种方式：go get， go module， vendor目录
import "github.com/astaxie/beego" 编译出错解决方案: go get:确保你的GOPATH是工程目录,代码在src目录下,然后在命令提示符中输入:g ...
在vue文件引入echarts_vue引入echarts地图的三种方式
}, beforeDestroy() {if(!this.chart) {return; }this.chart.dispose(); //销毁echart实例this.chart= null; }, ...
Web前端 | HTML引入CSS样式的三种方式
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
CSS样式表引入的三种方式，及优先级顺序
CSS样式表引入的三种方式,及优先级顺序 CSS可以通过三种方式引入样式表,三种方式分别是行内样式表,内部样式表和外部样式表. 行内样式表通过给标签设定style属性 <body>< ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
iconfont使用的三种方式（阿里巴巴矢量图标库代码使用）
###### 使用的相关链接教程图标下载步骤使用的三种方式图标下载方式首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入"暂存架" 选择完所有要 ...