css小图标制作
使用字体图标（Font Icons）
字体图标是将图标作为字体文件加载，通过CSS控制样式和大小。常见的字体图标库有Font Awesome、Material Icons等。
引入字体图标库（以Font Awesome为例）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">使用方式：
<i class="fas fa-home"></i>通过CSS调整大小和颜色：
.fa-home {
font-size: 24px;
color: #ff5733;
}使用SVG图标
SVG图标是矢量图形，缩放不失真，可以通过CSS或内联属性控制样式。
内联SVG示例：
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
</svg>通过CSS控制SVG样式：
svg {
width: 24px;
height: 24px;
color: #4285f4;
}使用CSS绘制简单图标
通过伪元素和CSS属性绘制简单图形，适合不需要复杂图标的情况。
绘制三角形示例：
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #34a853;
}绘制圆形按钮：
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ea4335;
position: relative;
}
.circle::after {
content: "+";
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}使用图标精灵（Sprite）
将多个图标合并为一张图片，通过CSS定位显示特定部分，减少HTTP请求。
图标精灵示例：
.icon {
background-image: url('sprite.png');
width: 24px;
height: 24px;
display: inline-block;
}
.icon-home {
background-position: 0 0;
}
.icon-settings {
background-position: -24px 0;
}使用CSS框架内置图标
许多CSS框架如Bootstrap、Bulma等内置了图标系统，可直接使用。
Bootstrap图标示例：
<i class="bi bi-arrow-right"></i>引入方式：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
