css 制作icon

使用 CSS 制作 Icon 的方法

纯 CSS 绘制简单图形

通过 border、transform 和伪元素组合实现基础形状（如三角形、圆形、箭头等）：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #333;
}
.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f00;
}

利用伪元素增强效果

通过 ::before 和 ::after 创建复杂组合图标：

.plus-icon {
  position: relative;
  width: 20px;
  height: 20px;
}
.plus-icon::before, 
.plus-icon::after {
  content: '';
  position: absolute;
  background: #000;
}
.plus-icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.plus-icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

结合 SVG 内联

直接在 CSS 中使用 SVG 数据 URI 实现高精度图标：

.svg-icon {
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 12l8 10 8-10z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
}

动画效果增强交互

通过 transition 或 @keyframes 添加悬停动画：

.heart-icon {
  width: 20px;
  height: 20px;
  background: #f00;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.heart-icon::before, 
.heart-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f00;
  border-radius: 50%;
}
.heart-icon::before {
  top: -10px;
  left: 0;
}
.heart-icon::after {
  top: 0;
  left: -10px;
}
.heart-icon:hover {
  transform: rotate(45deg) scale(1.2);
}

响应式适配

使用 em 或 rem 单位确保图标随字体大小缩放：

.responsive-icon {
  width: 1em;
  height: 1em;
  background: #333;
  display: inline-block;
  vertical-align: middle;
}