CSS icon
icon可以定义为在任何计算机界面中使用的表示元素的图像或符号。它是文件或程序的图形表示，可以帮助用户快速识别文件的类型。
使用图标库是向HTML页面添加图标的最简单方法。可以使用CSS格式化库图标。我们可以根据图标的颜色，阴影，大小等自定义图标。
提供了一些图标库，例如
Bootstrap图标，Font Awesome图标，和
Google图标，可以轻松在CSS中使用。无需安装或下载上述库。
让我们讨论上述图标库。
Font Awesome图标
要在HTML页面中使用此库，我们需要在
<head> </head> 部分中添加以下链接。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
让我们用插图来理解它。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
text-align:center;
background-color:lightblue;
}
.fa{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Font Awesome Library</h1>
<i class="fa fa-cloud"></i>
<i class="fa fa-file"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"</i>
</body>
</html>
输出：
Bootstrap图标
类似于字体Font Awesome，我们可以使用下面
<head> </head> 部分。
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
text-align:center;
background-color:lightblue;
}
.glyphicon{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Bootstrap icons</h1>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-file"></i>
<i class="glyphicon glyphicon-heart"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-envelope"></i>
</body>
</html>
输出：
Google图标
与上述库类似，我们只需在下面的
<head> </link>中添加链接即可将其添加到HTML页面中。 head> 部分。
示例
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body{
text-align:center;
background-color:lightblue;
}
.material-icons{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Google icons</h1>
<i class="material-icons">cloud</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">favorite</i>
<i class="material-icons">traffic</i>
</body>
</html>
输出：
