图标制作css

使用 CSS 制作图标的方法

纯 CSS 绘制简单图标

通过 CSS 的 border、transform 和伪元素可以创建基本图标：

.arrow-icon {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
}

使用伪元素增强效果

结合 ::before 和 ::after 创建复杂形状：

.menu-icon {
  width: 20px;
  height: 2px;
  background: #000;
  position: relative;
}
.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #000;
}
.menu-icon::before {
  top: -6px;
}
.menu-icon::after {
  top: 6px;
}

CSS 动画图标

添加交互效果：

.loader {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用 SVG 内联

更复杂的图标建议使用 SVG：

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z"/>
</svg>

字体图标方案

通过 @font-face 引入图标字体：

@font-face {
  font-family: 'IconFont';
  src: url('iconfont.woff2') format('woff2');
}
.icon {
  font-family: 'IconFont';
  speak: none;
  font-style: normal;
}

<span class="icon"></span>

响应式设计技巧

使用 em 或 rem 单位确保图标缩放：

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

颜色控制

利用 currentColor 继承文本颜色：

.svg-icon {
  fill: currentColor;
}

性能优化

对动画图标使用 will-change：

.animated-icon {
  will-change: transform;
}