当前位置：首页 > CSS

图标制作css

2026-04-01 07:32:19CSS

使用 CSS 制作图标的方法

纯 CSS 绘制基础形状

通过 CSS 的 border、transform 和伪元素可以创建简单图标：

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

此代码生成一个向下的三角形箭头。

使用 CSS 伪元素增强效果

结合 ::before 和 ::after 创建复杂图标：

.menu-icon {
  width: 20px;
  height: 2px;
  background: #000;
  position: relative;
}
.menu-icon::before, .menu-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: #000;
}
.menu-icon::before {
  top: -6px;
}
.menu-icon::after {
  top: 6px;
}

实现三线菜单图标。

SVG 内联方式

将 SVG 直接嵌入 HTML 并通过 CSS 控制样式：

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

.svg-icon {
  color: #4285f4;
  transition: color 0.3s;
}
.svg-icon:hover {
  color: #ea4335;
}

图标字体技术

使用 Font Awesome 等图标字体库：

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

通过 CSS 调整大小和颜色：

.fa-user-circle {
  font-size: 2rem;
  color: #ff5722;
}

CSS 动画图标

为图标添加交互效果：

.loading-icon {
  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); }
}

创建旋转加载动画。

响应式图标设计

使用视窗单位确保图标自适应：

.responsive-icon {
  width: 5vw;
  height: 5vw;
  max-width: 50px;
  max-height: 50px;
  background: #8bc34a;
  border-radius: 50%;
}

变量控制图标样式

通过 CSS 变量实现主题切换：

图标制作css

:root {
  --icon-color: #333;
  --icon-size: 24px;
}
.themed-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  background: var(--icon-color);
}