手册
目录
收藏768
分享
阅读4390
更新时间2025-07-16
前言:
通过使用图标库,可以轻松地将图标添加到你的 HTML 页面中。
在 HTML 页面中添加图标的最简单方法是使用图标库,例如 Font Awesome。
将指定图标类的名称添加到任意行内 HTML 元素(例如 <i> 或 <span>)中即可。
以下图标库中的所有图标都是可缩放的矢量图形,可以使用 CSS(大小、颜色、阴影等)进行自定义。
要使用 Font Awesome 图标,请访问 fontawesome.com,登录并获取一段代码,将其添加到 HTML 页面的 <head> 部分中:
<script src="https://kit.fontawesome.com/<em>yourcode</em>.js" crossorigin="anonymous"></script>
要了解有关如何开始使用 Font Awesome 的更多信息,请参阅我们的 Font Awesome 5 教程。
注意: 无需下载或安装!
<br></br><html><br></br><head><br></br>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script><br></br>
</head><br></br><body><br></br><br></br><i class="fas fa-cloud"></i><br></br><i class="fas fa-heart"></i><br></br><i class="fas fa-car"></i><br></br><i class="fas fa-file"></i><br></br>
<i class="fas fa-bars"></i><br></br><br></br>
</body><br></br></html>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Try It Yourself » 所有 Font Awesome 图标的完整参考,请访问我们的图标参考手册。
要使用 Bootstrap 的 Glyphicon 图标,请将以下代码添加到 HTML 页面 <head> 部分中:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
注意: 无需下载或安装!
<br></br><html><br></br><head><br></br>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><br></br>
</head><br></br><body><br></br><br></br><i class="glyphicon glyphicon-cloud"></i><br></br><i class="glyphicon glyphicon-remove"></i><br></br><i class="glyphicon glyphicon-user"></i><br></br><i class="glyphicon glyphicon-envelope"></i><br></br><i class="glyphicon glyphicon-thumbs-up"></i><br></br><br></br>
</body><br></br></html>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Try It Yourself » Google 图标 ------------要使用 Google 图标,请将以下代码添加到 HTML 页面的 <head> 部分中:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
注意: 无需下载或安装!
<br></br><html><br></br><head><br></br>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><br></br>
</head><br></br><body><br></br><br></br><i class="material-icons">cloud</i><br></br><i class="material-icons">favorite</i><br></br><i class="material-icons">attachment</i><br></br><i class="material-icons">computer</i><br></br><i class="material-icons">traffic</i><br></br><br></br>
</body><br></br></html>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Try It Yourself » 所有图标的完整列表,请访问我们的[图标教程](#)。相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习