当前位置：首页 > CSS

制作css图标

2026-04-01 09:44:00CSS

使用字体图标库（如Font Awesome）

字体图标库提供现成的矢量图标，可直接通过CSS类名调用。例如引入Font Awesome后，添加图标只需在HTML元素中添加对应类名：

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

通过伪元素生成自定义图标

利用CSS的::before或::after伪元素配合边框和变换属性创建简单图形。例如创建一个三角形图标：

制作css图标

.triangle-icon::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #f00;
}

SVG内联或背景图

将SVG代码直接嵌入HTML，或通过CSS设置为背景图像。内联SVG示例：

<div class="svg-icon">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L4 12l8 10 8-10z" fill="#4285F4"/>
  </svg>
</div>

背景图方式：

制作css图标

.svg-bg {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg ...></svg>') no-repeat;
}

CSS渐变与阴影绘制复杂图标

结合线性渐变、径向渐变和阴影效果构建复杂图形。例如绘制一个相机图标：

.camera-icon {
  width: 24px;
  height: 20px;
  background: 
    radial-gradient(circle at center, #333 30%, transparent 30%),
    linear-gradient(to bottom, #333 40%, #fff 40% 60%, #333 60%);
  border-radius: 3px;
  position: relative;
}

动画图标实现

通过CSS动画为图标添加交互效果。旋转加载图标的实现：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: #09f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}