当前位置：首页 > CSS

图标 css 制作

2026-04-01 05:45:02CSS

使用 CSS 制作图标的方法

使用纯 CSS 绘制简单图标

通过 CSS 的 border、transform 和伪元素可以绘制简单图标，例如三角形、箭头等。

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

使用 CSS 伪元素创建复杂图标

结合 ::before 和 ::after 伪元素，可以通过叠加形状实现更复杂的图标。

.heart {
  position: relative;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background-color: red;
}
.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
.heart::before {
  top: -10px;
  left: 0;
}
.heart::after {
  top: 0;
  left: -10px;
}

使用 SVG 内联方式

SVG 直接嵌入 HTML 中，通过 CSS 控制样式，适合矢量图标。

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z" fill="currentColor"/>
</svg>

.icon {
  width: 24px;
  height: 24px;
  color: #333;
}

使用图标字体（Icon Font）

通过引入字体文件（如 Font Awesome），用 CSS 控制图标显示。

@font-face {
  font-family: 'IconFont';
  src: url('iconfont.woff2') format('woff2');
}
.icon {
  font-family: 'IconFont';
  font-size: 24px;
}

<span class="icon"></span>

使用 CSS 动画增强效果

为图标添加悬停或加载动画，提升交互体验。

图标 css 制作

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