梗概
- 通过CSS引入开发者自定义的字体
- 平时网页中加载慢的时候能看到一些乱码，这些乱码就是图标，只不过还没加载好字体库
- 可以使用工具快速将图标转换为对应的字体库
适用范围
- 优点
- 使用字体的方式，图标可以随文本缩放。
- 可以通过CSS轻松改变颜色、大小等样式。
- 通常包含大量图标，使用方便。
- 缺点:
- 图标的语义性差，不如SVG直观。
- 字体文件较大时可能影响加载速度。
- 兼容性问题，部分老旧浏览器可能不支持。
场景
使用指南
代码示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- 使用Font Awesome的图标 -->
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</body>
</html>
- i标签: i标签是HTML中用来表示斜体文本的标签。在图标字体中，i标签通常被用来插入图标或符号