当前位置：首页 > CSS

css图标制作

2026-02-26 23:02:50CSS

使用字体图标（Font Icons）

字体图标是将图标作为字体文件引入，通过CSS控制大小和颜色。常用库包括Font Awesome、Material Icons等。

安装Font Awesome：

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

使用示例：

<i class="fas fa-home"></i>

通过CSS调整样式：

.fa-home {
  color: #ff5733;
  font-size: 24px;
}

使用SVG图标

SVG图标支持矢量缩放且颜色可控，适合高分辨率场景。

内联SVG示例：

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
</svg>

通过CSS控制颜色：

svg {
  color: #4285f4;
  width: 32px;
}

使用CSS伪元素生成简单图标

通过::before或::after伪元素结合边框、背景等属性创建简单图标。

示例（三角形图标）：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #2ecc71;
}

使用图标库（如Iconify）

Iconify提供统一的API调用多图标库（Material Icons、Tabler等）。

引入方式：

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

使用示例：

<span class="iconify" data-icon="mdi:home"></span>

自定义雪碧图（CSS Sprites）

将多个图标合并为一张图片，通过background-position定位显示特定图标。

示例：

.icon {
  background-image: url('sprites.png');
  width: 32px;
  height: 32px;
}
.home {
  background-position: 0 0;
}

使用CSS渐变或阴影生成复杂图标

通过linear-gradient、box-shadow等属性绘制图标。

示例（圆形加号）：

.plus-icon {
  width: 20px;
  height: 20px;
  background: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  background-position: center;
  background-size: 50% 2px, 2px 50%;
  background-repeat: no-repeat;
}