css图标制作
使用CSS制作图标的方法
纯CSS绘制基础形状
通过CSS的border、width、height等属性可以绘制简单图标：
.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;
transform: rotate(45deg);
}
.heart::before, .heart::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
.heart::before {
top: -10px;
left: 0;
}
.heart::after {
top: 0;
left: -10px;
}CSS渐变与阴影
使用linear-gradient和box-shadow增强效果：
.sun {
width: 30px;
height: 30px;
background: radial-gradient(circle, gold 40%, transparent 41%),
linear-gradient(0deg, transparent 48%, gold 48%, gold 52%, transparent 52%),
linear-gradient(90deg, transparent 48%, gold 48%, gold 52%, transparent 52%);
}动画交互效果
添加transition或@keyframes实现动态图标：
.loading {
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); }
}使用现成图标方案
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-cog"></i>Material Icons应用
Google提供的Material图标库：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">favorite</span>SVG sprite技术
将多个图标整合为SVG sprite：
<svg class="icon">
<use xlink:href="sprite.svg#home"></use>
</svg>性能优化建议
CSS图标适合简单图形，复杂图标建议使用SVG。关键属性如transform和opacity能触发GPU加速，提升动画性能。对于多色图标，CSS变量可以方便地管理颜色方案：
:root {
--icon-primary: #4285f4;
--icon-secondary: #ea4335;
}
.icon {
color: var(--icon-primary);
}
