制作css 图标

使用 Font Awesome 图标库

Font Awesome 提供大量可缩放矢量图标，可通过 CSS 轻松调用。引入 Font Awesome 库后，直接使用 <i> 标签添加图标。

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

通过伪元素和 Unicode 字符创建简单图标，适合轻量级需求。

.icon::before {
  content: "\2605"; /* Unicode 星形符号 */
  font-size: 24px;
  color: gold;
}

使用 SVG 作为 CSS 背景

将 SVG 代码转换为 Data URL 嵌入 CSS，实现矢量图标。

.button {
  background: 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"/></svg>') no-repeat;
  width: 24px;
  height: 24px;
}

纯 CSS 绘制几何图标

利用边框和变换属性绘制三角形等简单形状。

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

动画图标效果

结合 CSS 动画让图标产生交互效果。

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: blue;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}