02.图标字体
作者:互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./fontawesome/css/all.css">
</head>
<body>
<!--
图标字体(icon)
- 在网页中经常需要使用一些图标,可以通过图片来引入图标
但是图片大小本身比较大,并且非常的不灵活
- 所以在使用图标时,我们还可以将图标直接设置为字体,(非程序员干的事情)
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
图标字体是矢量图,可以随意更改大小和颜色而不失真
fontawesome 使用步骤
1.下载 https://fontawesome.com/download
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体 (在zeal中查看)
class="fas fa-bell"
class="fab fa-accessible-icon"
不是fas就是fab,这是必写的,究竟是哪个试一下即可
-->
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<!-- i原本表示斜体,但现在更多使用i表示icon -->
<!--
通过实体来使用图标字体:
&#x图标的编码;
别忘了写类
-->
<span class="fas"></span>
</body>
</html>
标签:02,xf0f3,&#,字体,Document,图标 来源: https://www.cnblogs.com/sherryyuan/p/16418192.html