图标 css 制作
使用CSS制作图标的方法
使用Unicode字符或字体图标
通过CSS的content属性或字体图标库（如Font Awesome）直接插入图标。例如使用Font Awesome：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-heart"></i>纯CSS绘制简单图形
利用border、box-shadow等属性绘制基础形状。例如绘制三角形：
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid red;
}SVG内联或背景图
将SVG代码直接嵌入HTML或作为背景图引用：
<div class="svg-icon"></div>.svg-icon {
width: 24px;
height: 24px;
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path d="M12 2L4 12l8 10 8-10z"/></svg>');
}CSS伪元素创建复杂图标
结合::before和::after伪元素构建组合图形。例如创建放大镜图标：
.search-icon {
position: relative;
width: 24px;
height: 24px;
}
.search-icon::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid #000;
border-radius: 50%;
}
.search-icon::after {
content: "";
position: absolute;
width: 2px;
height: 8px;
background: #000;
transform: rotate(45deg);
bottom: 5px;
right: 5px;
}CSS动画图标
添加@keyframes实现动态效果。例如旋转加载图标：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #000;
animation: spin 1s linear infinite;
}响应式图标设计
使用vw单位或clamp()函数确保图标适应不同屏幕尺寸：
.responsive-icon {
width: clamp(16px, 3vw, 32px);
height: clamp(16px, 3vw, 32px);
}颜色和状态控制
通过CSS变量实现主题切换或交互状态变化：
:root {
--icon-color: #333;
}
.icon {
fill: var(--icon-color);
transition: fill 0.3s;
}
.icon:hover {
--icon-color: #f00;
}
