css 制作icon

使用 CSS 制作 Icon 的方法

纯 CSS 绘制简单图形

利用 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: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
}

使用伪元素组合复杂图形

通过 ::before 和 ::after 伪元素叠加，可以创建更复杂的图标，如菜单图标或关闭按钮。

.menu-icon {
  width: 20px;
  height: 2px;
  background-color: #333;
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #333;
}

.menu-icon::before {
  top: -6px;
}

.menu-icon::after {
  bottom: -6px;
}

利用 SVG 内联或背景

SVG 具有矢量特性，适合高分辨率显示。可以直接内联或作为背景图使用。

.svg-icon {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L4 12l8 10 8-10z" fill="%23333"/></svg>');
}

字体图标库（如 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-home"></i>

CSS 动画增强交互效果

为图标添加悬停或点击动画，提升用户体验。

.rotate-icon {
  transition: transform 0.3s ease;
}

.rotate-icon:hover {
  transform: rotate(90deg);
}

选择建议

• 简单图形：优先使用纯 CSS 实现，减少依赖。
• 复杂图标：考虑 SVG 或字体图标库，确保清晰度和可维护性。
• 动态效果：结合 CSS 动画实现交互反馈。