CSS 图标用于向 Web 元素添加图形表示、符号或小图像。它们在 Web 开发中具有多种用途，例如:
增强用户体验:为网页上的各种元素提供视觉提示和上下文，例如而不是添加文本保存、删除等。您可以添加一个图标来表示它们。
减少加载时间:与传统图像图标相比，CSS 图标通常是轻量级的，这意味着它们可以加载快速，减少整体页面加载时间。
可扩展性:CSS 图标可以轻松放大或缩小，而不会降低质量。这对于响应式网页设计非常重要。
自定义:可以使用 CSS 规则更改 CSS 图标的大小、颜色和其他视觉属性来自定义 CSS 图标。这种灵活性使您可以将图标与网站的整体设计和品牌相匹配。
辅助功能:CSS 图标的样式可以满足辅助功能标准，例如为屏幕阅读器提供替代文本。
减少 HTTP 请求:使用 CSS 图标可以减少网页发出的 HTTP 请求数量，因为它们通常是样式表的一部分。
为了创建 CSS 图标，开发人员经常使用 CSS 伪元素 (::before 和 ::after)、图标字体或内联 SVG。每种方法都有其优点和权衡，选择取决于项目的具体需求。
流行的 CSS 图标库（如 Font Awesome、Material Icons 或自定义图标集）也被广泛用于简化向 Web 应用程序添加图标的过程。
添加图标
添加 CSS 图标的一些常用方法如下:
使用 CSS 伪元素（::before 和 ::after）:涉及使用 ::before 和 ::after 伪元素在 HTML 元素之前或之后插入内容，然后设置样式显示图标的内容。
图标字体:图标字体是包含图标作为字形的自定义字体。您可以通过设置适当的字体系列并指定图标的 Unicode 字符来使用这些字体来显示图标。
内联 SVG:涉及将 SVG（可缩放矢量图形）直接嵌入到您的HTML 代码。您可以创建或获取 SVG 图标并将其作为内联元素插入。
CSS 背景图像:您可以通过设置 background-image 来显示图标。
CSS 库和框架:许多 CSS 库和框架，例如 Font Awesome、Material Icons 和 Bootstrap Icons 提供了预先设计的图标集，您可以轻松地将它们包含在项目中。它们通常带有现成的类或实用程序类。
自定义 CSS:您可以使用宽度等 CSS 属性来设计和样式化图标，从而为图标创建自己的自定义 CSS 、高度、边框、边框半径等等。这种方法使您可以完全控制图标的设计。
让我们看看每个图标的示例。
CSS 图标: 使用伪元素
伪元素，例如 ::before 和 ::after 可用于在元素之前或之后插入图标，如以下示例所示:
<html>
<head>
<style>
.flavour-list {
list-style: none;
}
.flavour-list li {
font-size: 2em;
}
.flavour-list li::before {
content: url(/css/images/smiley.png);
margin-right: 15px;
font-size: 20px;
}
.flavour-list li::after {
content: url(/css/images/smiley.png);
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<ul class="flavour-list">
<li>西瓜</li>
<li>火龙果</li>
<li>哈密瓜</li>
<li>香蕉</li>
<li>葡萄</li>
<li>菠萝</li>
</ul>
</div>
</body>
</html> CSS 图标: 使用 Font Awesome
为了添加Font Awesome的基本图标，您需要添加以下内容html 的 <head> 部分下的链接:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 要添加 Font Awesome 图标，请添加前缀 fa 以及图标名称。例如:fa-car、fa-address-book。
以下示例演示如何使用 Font Awesome 图标:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-envelope-open fa-6" style="font-size:65px;" aria-hidden="true"></i>
<i class="fa fa-heart fa-5" style="font-size:50px;" aria-hidden="true"></i>
<i class="fa fa-file fa-4" style="font-size:40px;" aria-hidden="true"></i>
<i class="fa fa-cloud fa-3" style="font-size:30px;" aria-hidden="true"></i>
<i class="fa fa-address-book fa-2" style="font-size:20px;" aria-hidden="true"></i>
<i class="fa fa-car fa-1" style="font-size:15px;" aria-hidden="true"></i>
</body>
</html> CSS 图标: 使用背景图像
背景图像也可以用作图标。
以下示例演示如何使用背景图像作为图标:
<html>
<head>
<style>
.iconimg {
width: 50px;
height: 50px;
background-image: url('images/logo.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="iconimg"></div>
</body>
</html> CSS 图标: 使用 Bootstrap 图标
图标Bootstrap 提供的可以用作图标。您只需在 html 代码的 <head> 部分添加以下链接:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 注意:无需安装或下载 Bootstrap 图标。
以下示例演示如何使用 Bootstrap图标:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style="padding: 10px">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
<path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-balloon-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.48 10.901C11.211 10.227 13 7.837 13 5A5 5 0 0 0 3 5c0 2.837 1.789 5.227 4.52 5.901l-.244.487a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2.376 2.376 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.244-.487ZM4.352 3.356a4.004 4.004 0 0 1 3.15-2.325C7.774.997 8 1.224 8 1.5c0 .276-.226.496-.498.542-.95.162-1.749.78-2.173 1.617a.595.595 0 0 1-.52.341c-.346 0-.599-.329-.457-.644Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</div>
</body>
</html> CSS 图标: 使用 Google 图标/字体
Goole 也可以用作图标。您只需在 html 代码的 <head> 部分添加以下链接:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 注意:无需安装或下载 Google 图标。
以下示例演示如何使用 Google图标:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons" style="font-size:40px;">pets</i>
<i class="material-icons" style="font-size:40px;">settings</i>
<i class="material-icons" style="font-size:40px;">attachment</i>
<i class="material-icons" style="font-size:40px;">person</i>
<i class="material-icons" style="font-size:40px;">recycling</i>
</body>
</html>