当前位置：首页 > CSS

图标制作css

2026-02-27 07:55:13CSS

使用CSS制作图标

CSS可以通过伪元素、边框、阴影等属性创建简单的图标。以下是几种常见方法：

纯CSS绘制基本形状 绘制三角形可以利用边框的透明属性：

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

利用伪元素组合图形 通过::before和::after创建复杂图形：

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

使用CSS图标库

对于更复杂的图标，推荐使用现成的CSS图标库：

图标制作css

Font Awesome 通过CDN引入后直接使用类名：

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

Material Icons Google提供的Material Design图标：

图标制作css

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">favorite</span>

SVG图标实现

将SVG直接内联到HTML中，通过CSS控制样式：

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"/>
</svg>

CSS控制颜色和大小：

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

动画效果增强

为图标添加悬停或加载动画：

.spinner {
  width: 20px;
  height: 20px;
  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); }
}