前端的学习之路：初级CSS---图标字体
程序员文章站
2022-05-10 11:03:13
...
图标字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标字体</title>
</head>
<body>
<!--
图标字体（iconfont）
-再网页中经常需要使用一些图标，可以通过图片来引入
但是图片大小本身比较大，并且非常的不灵活
-所以再使用图标时，我们可以将图标直接设置为字体
然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1下载 https://fontawesome.com/
2解压
3将css和webfonts移动到醒目中
4将all.css引入到网页中
5使用图标字体
-直接通过类名字体来使用图标
class="fas fa-bell"
class="fab fa-accessible-icon"
-->
<i class="fas fa-bell"></i>
<i class="fas fa-bell-slach"></i>
<i class="fab fa-accessible-icon"></i>
<!--
可以使用style改变这些图标的大小或颜色等
-->
</body>
</html>
因为没有下载 fontawesome 所以就不运行代码了
上一篇： python学习部分