CSS 图标

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

提升用户体验 ：为网页上的各种元素提供视觉提示和上下文，例如，您可以添加一个图标来表示保存、删除等，而不是添加文本。
减少加载时间 ：与传统的图像图标相比，CSS图标通常比较轻量级，这意味着它们可以快速加载，从而减少整体页面加载时间。
可伸缩性 ：CSS图标可以轻松地缩放而不会损失质量。这对于响应式Web设计非常重要。
自定义 ：可以通过更改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 Icons和Bootstrap Icons）提供了预先设计好的图标集，您可以轻松地将它们包含在您的项目中。它们通常附带可以直接使用的类或实用类。
自定义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>

使用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>

使用背景图添加图标

背景图片也可以用作图标。

以下示例演示了如何将背景图片用作图标：

<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>

使用Bootstrap Icons添加图标

通过 Bootstrap 提供的图标可以作为图标使用。只需在HTML代码的 < head> 部分添加以下链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

以下示例演示如何使用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>

使用Google Icons/Fonts添加图标

Google提供的图标也可以用作图标。您只需在html代码的 < head>部分中添加以下链接：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

以下示例演示使用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>