css图标制作教程
CSS 图标制作方法
使用伪元素和边框绘制简单图形
通过 CSS 的 ::before 和 ::after 伪元素结合 border 属性可以创建三角形、箭头等基础形状。例如绘制一个下拉箭头：
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #333;
}利用 clip-path 创建复杂形状clip-path 属性允许通过多边形或 SVG 路径裁剪元素，适合制作不规则图标：
.star {
width: 24px;
height: 24px;
background-color: gold;
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
}通过 box-shadow 实现多元素组合
减少 DOM 节点数量，用 box-shadow 复制多个相同元素。例如制作汉堡菜单图标：
.hamburger {
width: 20px;
height: 2px;
background: #000;
box-shadow:
0 6px 0 #000,
0 12px 0 #000;
}使用 CSS 渐变背景
线性渐变和径向渐变可生成条纹、圆点等图案。创建加载中的旋转图标：
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #09f;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}结合 SVG 和 CSS 变量
通过内联 SVG 配合 CSS 控制颜色和动画，实现高可定制性：
<div class="svg-icon">
<svg viewBox="0 0 24 24">
<path d="M12 2L4 12l8 10 8-10z" fill="currentColor"/>
</svg>
</div>.svg-icon {
width: 24px;
color: red; /* 通过color控制SVG填充色 */
}优化技巧
响应式适配
使用 em 或 rem 单位确保图标随字体大小缩放：
.icon {
width: 1em;
height: 1em;
}性能考虑
优先使用 CSS 实现简单图标，复杂图形建议采用 SVG。避免过多使用 box-shadow 和渐变。
可访问性
为功能型图标添加 ARIA 属性：
<button aria-label="搜索">
<span class="search-icon"></span>
</button>
