CSS - 图标

上一页
下一页

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

目录


 

图标的重要性

  • **增强用户体验**：为网页上的各种元素提供视觉提示和上下文，例如，而不是添加保存、删除等文本，您可以添加一个图标来表示它们。
  • **缩短加载时间**：与传统的图像图标相比，CSS 图标通常更轻量级，这意味着它们可以快速加载，从而减少整体页面加载时间。
  • **可扩展性**：CSS 图标可以轻松地放大或缩小，而不会损失质量。这对于响应式网页设计非常重要。
  • **可定制性**：可以使用 CSS 规则自定义 CSS 图标的大小、颜色和其他视觉属性。这种灵活性使您可以将图标与网站的整体设计和品牌相匹配。
  • **可访问性**：可以对 CSS 图标进行样式设置以满足可访问性标准，例如为屏幕阅读器提供替代文本。
  • **减少 HTTP 请求**：使用 CSS 图标可以减少网页发出的 HTTP 请求数量，因为它们通常是样式表的一部分。

如何向网页添加图标？

  • **内联 SVG**：将 SVG（可缩放矢量图形）直接嵌入到 HTML 代码中。您可以创建或获取 SVG 图标并将其插入为内联元素。
  • **图标字体**：图标字体是包含图标作为字形的自定义字体。您可以通过设置适当的 font-family 并指定图标的 Unicode 字符来使用这些字体显示图标。
  • **CSS 背景图片**：您可以使用 CSS 背景图片通过在元素上设置 **background-image** 属性来显示图标。
  • **伪元素**：使用 **::before** 和 **::after** 伪元素在 HTML 元素之前或之后插入内容，然后对该内容进行样式设置以显示图标。
  • **CSS 库和框架**：许多 CSS 库和框架（如 Font Awesome、Material Icons 和 Google 图标）提供预先设计好的图标集，您可以轻松地将它们包含在您的项目中。它们通常带有现成的类或实用程序类。

使用 SVG 的图标

在 HTML 中，可以使用 **<svg>** 标签使用 **<path>** 标签的 d 属性创建自定义图标。

SVG 中 <path> 标签的 **d** 属性使用预定义语法中的一系列命令和参数定义路径的形状，表示线条、曲线和其他几何形状。这些命令包括 moveto (M)、lineto (L)、curveto (C) 等，每个命令后面都跟着指定路径结构的坐标或控制点。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .icon {
            width: 24px; 
            height: 24px; 
            fill: #000; 
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <h1>SVG Icons</h1>
    <!-- Search Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M23.707 22.293l-6.364-6.364C18.454 14.68 19 13.418
                 19 12c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.418 
                 0 2.68-.546 3.929-1.071l6.364 6.364a1 1 0 0 0 1.414-1.414zM5 
                 12c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z"/>
    </svg>
    
    <!-- Download Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19 14v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-7-9h2v7h3l-4 4-4-4h3V5zm-1-2h4V0h-4v3z"/>
    </svg>
    
    <!-- Cloud Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19.35 10.04c.63-.34 1.22-.79 1.68-1.35C21.47 6.39 19.76 4 
                 17 4c-2.33 0-4.31 1.45-5.13 3.5H11.5C8.42 7.5 6 9.92 6 13s2.42
                 5.5 5.5 5.5h7c3.04 0 5.5-2.46 5.5-5.5-.01-2.52-1.65-4.67-4-5.46l.35.5z"/>
    </svg>
    
    <!-- Home Icon -->
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l10 9h-3v11h-6V14H9v8H3V11H0l12-9z"/>
    </svg>
</body>
</html>

使用图标字体的图标

要在您的 Web 项目中使用图标字体，您需要按照以下步骤操作

  • **包含图标字体库，** 常用的选择包括 Font Awesome、Material Icons 或自定义图标字体。
  • **在 HTML 中使用 <i> 标签** 并将图标字体类应用于它。然后，指定所需图标的 Unicode 字符。

示例

<!DOCTYPE html>
<html>

<head>
    <!-- Include Font Awesome -->
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .icon {
            /* Specify Font Awesome family */
            font-family: "Font Awesome 5 Free"; 
            /* Minimum Font weight for Font Awesome */
            font-weight: 600;
            font-size: 24px; 
            color: #000; 
            margin-right: 15px; 
        }
    </style>
</head>

<body>
    <h1>CSS font Awesome Icons</h1>
    <span class="icon"> &#xf002; </span> 
    <span class="icon"> &#xf019; </span>
    <span class="icon"> &#xf0c2; </span> 
    <span class="icon"> &#xf015; </span> 
</body>

</html>

使用图片的图标

CSS 中的 **background-image** 属性也可用于显示存储在系统存储中的图标。

示例

以下示例演示了如何使用背景图片作为图标

<DOCTYPE html> 
<html>

<head>
    <style>
        .icon-img {
            width: 30px;
            height: 30px;
            background-image: url('/css/images/logo.png');
            background-size: cover;
        }
    </style>
</head>

<body>
   <div class="icon-img"> </div>
</body>

</html>

使用伪元素的图标

像 **::before** 和 **::after** 这样的伪元素可以用来在元素之前或之后插入一个图标，如下面的示例所示。

要了解更多关于伪元素的信息，请查看关于 CSS 伪元素 的教程。

示例

在此示例中，我们使用伪元素来渲染图标。

<DOCTYPE html> 
<html>

<head>
    <style>
        li {
            list-style: none;
        }
        li::before {
            content: url(/css/images/smiley.png);
            margin-right: 15px;
            font-size: 20px;
        }
        p::after {
            content: url(/css/images/smiley.png);
            margin-left: 15px;
            font-size: 5px;
        }
    </style>
</head>

<body>
    <ul>
        <li>Butterscotch</li>
        <li>Chocolate</li>
        <li>Coconut</li>
    </ul>

    <p> 
        In the above list we made custom label using 
        before pseudo-element, we added icon at the end 
        of this paragraph using ::after pseudo-element. 
    </p>
</body>

</html>

使用 Google 图标

我们也可以在网页中使用 Google 图标 提供的图标。这样，您只需提及图标的名称即可调用任何图标。

您只需要在 HTML 代码的头部部分添加以下链接

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

**注意：** 无需安装或下载 Google 图标。

示例

以下示例演示了如何使用 Google 图标。

<DOCTYPE html> 

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

<body>
    <h1> Google Fonts Icon </h1>
    <span class="material-icons" style="font-size:40px;"> 
        pets 
    </span>
    <span class="material-icons" style="font-size:40px;">
        settings
    </span>
    <span class="material-icons" style="font-size:40px;">
        attachment
    </i>
    <span class="material-icons" style="font-size:40px;">
        person
    </span>
</body>

</html>

Bootstrap 图标

要在网页的头部部分使用 Bootstrap 图标，请添加以下代码。

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

示例

以下示例演示了如何使用 Bootstrap 图标

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

<body>
    <h1> Bootstrap Icons </h3>
    <span class="glyphicon glyphicon-cloud"> </span>
    <span class="glyphicon glyphicon-remove"> </span>
    <span class="glyphicon glyphicon-user"> </span>
    <span class="glyphicon glyphicon-envelope"> </span>
    <span class="glyphicon glyphicon-thumbs-up"> </span>
</body>

</html>
打印页面
上一页
下一页
广告