CSS - 图标

CSS 图标用于向 Web 元素添加图形表示、符号或小图像。它们在 Web 开发中有多种用途，例如：

增强的用户体验：为网页上的各种元素提供视觉提示和上下文，例如，您可以添加一个图标来表示它们，而不是添加文本保存、删除等。
减少加载时间：与传统图像图标相比，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 库和框架：许多 CSS 库和框架，如 Font Awesome、Material Icon 和 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(images/smiley.png);
	 	 	 margin-right: 15px;
	 	 	 font-size: 20px;
	 	}
	 	.flavour-list li::after {
	 	 	 content: url(images/smiley.png);
	 	 	 margin-left: 15px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <ul class="flavour-list">
	 	 	 	 	<li>Butterscotch</li>
	 	 	 	 	<li>Chocolate</li>
	 	 	 	 	<li>Coconut</li>
	 	 	 	 	<li>Cookie n Cream</li>
	 	 	 	 	<li>Roasted Almonds</li>
	 	 	 	 	<li>Vanilla</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>

本页