可以使用图标库将图标添加到我们的HTML页面。库中的所有图标都可以使用CSS设置格式。可以根据大小, 颜色, 阴影等进行自定义。
图标库的类型：
- Font Awesome图标
- Google图标
- Bootstrap图标
注意：上述所有库均无需下载或安装。
Font Awesome图标：要使用"Font Awesome图标", 请在<head>部分中添加以下链接。
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">示例1：
<!DOCTYPE>
<html>
<head>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "fa fa-cloud" style = "font-size:32px;"></i>
<i class = "fa fa-heart" style = "font-size:32px;"></i>
<i class = "fa fa-file" style = "font-size:32px;"></i>
<i class = "fa fa-car" style = "font-size:32px;"></i>
<i class = "fa fa-bars" style = "font-size:32px;"></i>
</body>
</html>输出如下：
示例2：
<!DOCTYPE>
<html>
<head>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "fa fa-heart" style = "font-size:28px;color:red;"></i>
<i class = "fa fa-heart" style = "font-size:30px;color:blue;"></i>
<i class = "fa fa-heart" style = "font-size:32px;color:red;"></i>
<i class = "fa fa-heart" style = "font-size:34px;color:blue;"></i>
<i class = "fa fa-heart" style = "font-size:36px;color:red;"></i>
</body>
</html>输出如下：
Google图标：要使用Google图标, 请在<head>部分中添加以下链接。
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">示例1：
<!DOCTYPE>
<html>
<head>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "material-icons">cloud</i>
<i class = "material-icons">favorite</i>
<i class = "material-icons">attachment</i>
<i class = "material-icons">computer</i>
<i class = "material-icons">traffic</i>
</body>
</html>输出如下：
示例2：
<!DOCTYPE>
<html>
<head>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "material-icons" style = "font-size:30px;">cloud</i>
<i class = "material-icons" style = "font-size:40px;">cloud</i>
<i class = "material-icons" style = "font-size:50px;">cloud</i>
<i class = "material-icons" style = "font-size:60px;">cloud</i>
<i class = "material-icons" style = "font-size:70px;">cloud</i>
</body>
</html>输出如下：
Bootstrap程序图标：要使用Bootstrap图标, 请在<head>部分中添加以下链接。
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">示例1：
<!DOCTYPE>
<html>
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "glyphicon glyphicon-cloud" style = "font-size:28px;"></i>
<i class = "glyphicon glyphicon-user" style = "font-size:30px;"></i>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:32px;"></i>
<i class = "glyphicon glyphicon-remove" style = "font-size:34px;"></i>
<i class = "glyphicon glyphicon-envelope" style = "font-size:36px;"></i>
</body>
</html>输出如下：
示例2：
<!DOCTYPE>
<html>
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>
lsbin
</h1>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:20px;"></i>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:30px;"></i>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:40px;"></i>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:50px;"></i>
<i class = "glyphicon glyphicon-thumbs-up" style = "font-size:60px;"></i>
</body>
</html>输出如下：
