Css 简明教程
CSS - Icons
CSS icons 用于向 web 元素添加图形表示、符号或小图像。它们在 web 开发中有多种用途，例如：
Importance of Icon
-
Enhanced user experience ：为网页上的各种元素提供视觉提示和上下文，例如，您可以添加图标来表示保存、删除等文字。
-
Reduced load time ：与传统图像图标相比，CSS 图标通常很轻巧，这意味着它们可以快速加载，从而减少整体页面加载时间。
-
Scalability ：CSS 图标可以轻松放大或缩小，而不会降低质量。这对响应式 web 设计很重要。
-
Customization ：CSS 图标可以通过使用 CSS 规则改变它们的大小、颜色和其他视觉属性进行自定义。这种灵活性允许您将图标与网站的整体设计和品牌相匹配。
-
Accessibility : CSS 图标可以被设计为满足可访问性标准，例如为屏幕阅读器提供备用文本。
-
Reduced HTTP Requests : 使用 CSS 图标可以减少网页发出的 HTTP 请求数，因为这些图标通常是样式表的一部分。
How to Add Icons to a Webpage?
-
Inline SVGs : 涉及将 SVG（可缩放矢量图形）直接嵌入到 HTML 代码中。您可以创建或获取 SVG 图标，并将它们插入为内联元素。
-
Icon fonts : 图标字体是包含图标的自定义字体，这些图标用作字形。您可以使用这些字体通过设置适当的 font-family 并指定图标的 Unicode 字符来显示图标。
-
CSS background images : 您可以在元素上设置 * background-image* 属性，来使用 CSS 背景图象来显示图标。
-
Pseudo-elements : 涉及使用 * ::before* 和 * ::after* 伪元素在 HTML 元素之前或之后插入内容，然后对内容进行样式设置，以显示一个图标。
-
CSS Libraries and Frameworks : 许多 CSS 库和框架，例如 Font Awesome、Material Icons 和 Google Icons，提供预先设计好的图标集，您可以轻松地将其包含在您的项目中。它们通常带有可立即使用或实用的类。
Icons Using SVG
SVG 中 <path> 标签的 d 属性使用一系列命令和参数，以预定义的语法定义路径的形状，表示直线、曲线和其他几何形状。这些命令包括 moveto (M)、lineto (L)、curveto © 等等，每个命令后面都跟着坐标或控制点，它们指定路径的结构。
Example
<!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>Icons Using Icon Fonts
要在您的 Web 项目中使用图标字体，您需要按以下步骤操作：
-
Include the icon font library, 流行选择包括 Font Awesome、Material Icons 或自定义图标字体。
-
* 在 HTML 中使用 <i> 标签* 并对其应用图标字体类。然后，指定所需图标的 Unicode 字符。
Example
<!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">  </span>
<span class="icon">  </span>
<span class="icon">  </span>
<span class="icon">  </span>
</body>
</html>Icons Using Images
CSS 中的 * background-image* 属性还可以用于显示存储在系统存储中的图标。
Icons Using Pseudo-Elements
要了解更多信息，请查看 CSS Pseudo-Elements. 中关于伪元素的教程
Example
在此示例中，我们使用伪元素来渲染图标。
<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>Icons Using Google Icons
我们还可以在网页中使用 Google Icons 提供的图标。通过这种方法，您只需提及图标的名称就可以调用任何图标。
您只需要在 HTML 代码的 head 部分添加以下链接：
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">Note: 无需安装或下载 Google 图标。
Example
以下示例演示了如何使用 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 Icons
要在网页的头部部分使用 Bootstrap 图标，请添加以下代码。
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Example
以下示例演示了如何使用 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>