css制作图标
使用CSS制作图标的方法
使用伪元素和边框
通过CSS的::before和::after伪元素结合border属性可以创建简单的几何形状图标。例如制作一个三角形：
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #333;
}使用背景渐变
CSS的linear-gradient和radial-gradient可以创建复杂的图标图案。例如制作一个圆形图标：
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle, #333 60%, transparent 60%);
}使用SVG内联
直接在HTML中嵌入SVG代码，并通过CSS控制样式：
<div class="svg-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M12 2L4 12l8 10 8-10z" fill="#333"/>
</svg>
</div>.svg-icon svg {
transition: fill 0.3s;
}
.svg-icon:hover svg {
fill: #f00;
}使用字体图标
通过引入字体图标库（如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-home"></i>.fas {
font-size: 24px;
color: #333;
}使用CSS动画图标
结合CSS动画制作动态图标效果：
.loader {
width: 24px;
height: 24px;
border: 3px solid #ddd;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}使用clip-path
通过clip-path属性创建自定义形状：
.hexagon {
width: 30px;
height: 30px;
background: #333;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}每种方法都有其适用场景，简单几何图形适合纯CSS实现，复杂图标推荐使用SVG或字体图标方案。
