图标 css 制作

使用CSS制作图标的方法

纯CSS绘制图标

通过CSS的border、transform、伪元素等属性可以绘制简单图标，例如绘制三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #333;
}

绘制放大镜图标：

.search-icon {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 50%;
}
.search-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  bottom: -5px;
  right: -5px;
}

使用CSS图标库

Font Awesome等图标库提供现成的CSS解决方案：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-home"></i>

SVG内联CSS图标

SVG结合CSS可以创建可定制矢量图标：

<svg class="heart-icon" viewBox="0 0 24 24">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

.heart-icon {
  width: 24px;
  height: 24px;
  fill: red;
  transition: fill 0.3s;
}
.heart-icon:hover {
  fill: darkred;
}

CSS动画图标

为图标添加交互效果：

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px 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); }
}

响应式图标设计

使用相对单位确保图标适配不同屏幕：

.responsive-icon {
  width: 1em;
  height: 1em;
  font-size: calc(16px + 1vw);
}