图标 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;
}