Css 简明教程
CSS - Icons
CSS icons 用于向 web 元素添加图形表示、符号或小图像。它们在 web 开发中有多种用途，例如：
CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as:
Importance of Icon
-
Enhanced user experience: Provides visual cues and context to various elements on a webpage, like instead of adding the text save, delete, etc. you may add an icon to represent them.
-
Reduced load time: CSS icons are often lightweight compared to traditional image icons, which means they can load quickly, reducing the overall page load time.
-
Scalability: CSS icons can be easily scaled up or down without loss of quality. It is important for responsive web designing.
-
Customization: CSS icons can be customized by changing their size, color, and other visual properties using CSS rules. This flexibility allows you to match the icons to your website’s overall design and branding.
-
Accessibility: CSS icons can be styled to meet accessibility standards, such as providing alternative text for screen readers.
-
Reduced HTTP Requests: Using CSS icons can reduce the number of HTTP requests made by a webpage since they are often part of the stylesheet.
How to Add Icons to a Webpage?
-
Inline SVGs: Involves embedding SVG (Scalable Vector Graphics) directly into your HTML code. You can create or obtain SVG icons and insert them as inline elements.
-
Icon fonts: Icon fonts are custom fonts that contain icons as glyphs. You can use these fonts to display icons by setting the appropriate font-family and specifying the icon’s Unicode character.
-
CSS background images: You can use CSS background images to display icons by setting the background-image property on an element.
-
Pseudo-elements: Involves using the ::before and ::after pseudo-elements to insert content before or after an HTML element and then styling that content to display an icon.
-
CSS Libraries and Frameworks: Many CSS libraries and frameworks, like Font Awesome, Material Icons, and Google Icons, provide pre-designed sets of icons that you can easily include in your projects. They often come with ready-to-use classes or utility classes.
Icons Using SVG
SVG 中 <path> 标签的 d 属性使用一系列命令和参数，以预定义的语法定义路径的形状，表示直线、曲线和其他几何形状。这些命令包括 moveto (M)、lineto (L)、curveto © 等等，每个命令后面都跟着坐标或控制点，它们指定路径的结构。
The d attribute of the <path> tag in SVG defines the shape of the path using a series of commands and parameters in a predefined syntax, representing lines, curves, and other geometric shapes. These commands include moveto (M), lineto (L), curveto ©, and others, each followed by coordinates or control points that specify the path’s structure.
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 项目中使用图标字体，您需要按以下步骤操作：
To use icon fonts in your web project, you need to follow this steps:
-
Include the icon font library, Popular choices include Font Awesome, Material Icons, or custom icon fonts.
-
* Use <i> tag in HTML* and apply the icon font class to it. Then, specify the Unicode character for the desired icon.
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* 属性还可以用于显示存储在系统存储中的图标。
The background-image property in CSS can also used to display icons that are stored at system storage.
Example
以下示例演示了如何使用背景图像作为图标：
Following example demonstrates using background image as an icon:
<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>Icons Using Pseudo-Elements
Pseudo-elements like ::before and ::after can be used to insert an icon before or after an element as demonstrated in the following example.
要了解更多信息，请查看 CSS Pseudo-Elements. 中关于伪元素的教程
To know more about pseudo-elements check out tutorial on CSS Pseudo-Elements.
Example
在此示例中，我们使用伪元素来渲染图标。
Here in this example we use pseudo element to render icons.
<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 提供的图标。通过这种方法，您只需提及图标的名称就可以调用任何图标。
We can also use icons provided by Google Icons in our webpage. This way you can call any icon by just mentioning the name of icon.
您只需要在 HTML 代码的 head 部分添加以下链接：
You just need to add the following link in the head section of your html code:
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">Note: 无需安装或下载 Google 图标。
Note: There is no need to install or download Google icons.
Example
以下示例演示了如何使用 Google 图标。
Following example demonstrates using Google Icons.
<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 图标，请添加以下代码。
To use Bootstrap icon add following code in head section of your webpage.
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Example
以下示例演示了如何使用 Bootstrap 图标：
Following example demonstrates using Bootstrap Icons:
<!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>