当前位置：首页 > CSS

制作css图标

2026-01-28 06:55:14CSS

使用CSS制作图标的方法

纯CSS绘制基础形状

通过CSS的border、width、height等属性可以创建简单图标：

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

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

伪元素扩展

利用::before和::after伪元素增加细节：

制作css图标

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #4CAF50;
  position: relative;
}
.checkmark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  border: solid #4CAF50;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  left: 6px;
  top: 2px;
}

CSS transform变形

通过变形操作创建复杂形状：

.star {
  width: 0;
  height: 0;
  color: gold;
  position: relative;
  display: block;
}
.star::before, .star::after {
  content: "★";
  position: absolute;
  transform: rotate(20deg);
}

SVG内联结合CSS

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

制作css图标

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

.svg-icon {
  color: #4285F4;
  transition: transform 0.3s;
}
.svg-icon:hover {
  transform: scale(1.2);
}

动画增强效果

添加CSS动画使图标更生动：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-icon {
  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;
}

响应式图标设计

使用相对单位确保图标自适应：

.responsive-icon {
  width: 1em;
  height: 1em;
  font-size: calc(12px + 1vw);
}

图标字体技术

通过@font-face引入自定义字体图标：

@font-face {
  font-family: 'IconFont';
  src: url('iconfont.woff2') format('woff2');
}
.icon {
  font-family: 'IconFont';
  speak: none;
  font-style: normal;
}
.icon-home::before {
  content: "\e900";
}