CSS - 图标

CSS 图标

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 库和框架：许多 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(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-汽车、fa-地址簿。

以下示例演示了如何使用 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 图标添加图标

可以使用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 图标/字体添加图标

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

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

以下示例演示了如何使用 Google Icon：

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