当前位置：首页 > CSS

css制作小图标

2026-04-02 16:20:26CSS

使用 CSS 制作小图标的方法

使用伪元素和边框

通过 ::before 或 ::after 伪元素结合 CSS 边框属性可以创建简单的几何形状图标。例如制作一个三角形图标：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #333;
}

使用背景渐变

CSS 线性渐变或径向渐变可以创建更复杂的图标效果。例如制作一个圆形图标：

.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4285f4;
}

使用 box-shadow 多重阴影

通过 box-shadow 的多重阴影特性可以创建复杂图案。例如制作一个星形图标：

.star {
  width: 0;
  height: 0;
  position: relative;
  color: #ffd700;
}
.star:before {
  content: "★";
  font-size: 24px;
}

使用 transform 变形

CSS transform 属性可以旋转、缩放或倾斜元素来创建图标。例如制作一个旋转的加号图标：

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

使用 SVG 内联

虽然这不是纯 CSS 方法，但内联 SVG 配合 CSS 样式可以获得最佳效果：

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

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

使用 Unicode 字符

某些 Unicode 字符可以直接用作简单图标，配合 CSS 样式：

.icon {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
}

<span class="icon">✉</span> <!-- 信封图标 -->

使用 CSS 动画图标

为图标添加动画效果可以增强交互体验：

css制作小图标

.loading {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #09f;
  animation: spin 1s linear infinite;
}

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