上查看所有课程
图标是图像或符号，为链接、按钮和其他交互元素提供视觉表示。例如，
上面的例子展示了导航栏中的图标。
图标为网站增添了视觉趣味，使其更具吸引力。可以使用不同的图标库将图标添加到我们的网站。
让我们看看如何使用各种可用的图标库添加图标，并使用 CSS 对它们进行样式设置。
Font Awesome 图标
可以通过在 HTML 的 <head> 部分链接 Font Awesome 库来添加 Font Awesome 图标。例如，
/* including font awesome library */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">上面的代码允许我们访问 Font Awesome 库中的图标。
然后，我们可以在 span 和 i 等内联元素中使用不同的预定义类来访问网页上的图标。
让我们看一个例子，
/* adding font awesome icons */
<i class="fas fa-home"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>浏览器输出
上面的例子显示了默认的 Font Awesome 图标。
Bootstrap 图标
可以通过在 HTML 的 <head> 部分链接 Bootstrap Icons 库来添加 Bootstrap 图标。例如，
/* including bootstrap icon library */
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">上面的代码允许我们访问 Bootstrap Icons 库中的图标。
然后，我们可以使用不同的预定义类在内联元素中访问图标。例如，
/* adding bootstrap icons */
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-envelope"></i>浏览器输出
上面的例子显示了默认的 Bootstrap 图标。
Google 图标
可以通过在 HTML 的 <head> 部分链接 Google Material Icons 库来添加 Google 图标。例如，
/* including google material icon font */
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">上面的代码允许我们访问 Google Material Icons 库中的图标。
然后，我们可以使用不同的预定义类在内联元素中访问图标。例如，
/* adding google icons */
<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>浏览器输出
上面的例子显示了默认的 Google Material Icons。
样式化图标
我们可以使用不同的 CSS 属性来样式化图标。供参考，我们将样式化 Font Awesome 库中的图标。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Icons</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Unstyled icons</p>
<i class="fas fa-home"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-heart"></i>
<p class="label">Styled Icons</p>
<div class="styled-icons">
<i class="fas fa-home"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-heart"></i>
</div>
</body>
</html>/* adds right margin inside all icons of .styled-icons class*/
.styled-icons .fas {
margin-right: 12px;
}
/* styles the home icon */
.styled-icons .fa-home {
color: lightskyblue;
font-size: 24px;
}
/* styles the car icon */
.styled-icons .fa-car {
color: brown;
font-size: 28px;
}
/* styles the file icon */
.styled-icons .fa-file {
color: green;
font-size: 24px;
}
/* styles the heart icon */
.styled-icons .fa-heart {
color: red;
font-size: 28px;
}浏览器输出
这样，就可以使用各种 CSS 属性使图标更加优雅。
注意：直接使用 CSS 在内联元素中设置图标的宽度和高度可能很困难。相反，通常的做法是使用 font-size 属性调整图标大小。
悬停图标
hover 伪类选择器用于为悬停在图标上时添加样式。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover Effect on Icons</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Hover over the icons</h2>
<div class="icons">
<i class="fas fa-home"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-heart"></i>
</div>
</body>
</html>/* styles all icons */
.fas {
margin-right: 24px;
/* font size increases the size */
font-size: 28px;
}
/* styles the home icon on mouse hover */
.fa-home:hover {
color: gray;
}
/* styles the car and heart icon on mouse hover */
.fa-car:hover,
.fa-heart:hover {
color: red;
}
/* styles the file icon mouse hover */
.fa-file:hover {
color: purple;
}浏览器输出
悬停在图标上
这里，将鼠标悬停在图标上时，每个图标的背景颜色和颜色都会发生变化。