图标 css 制作
使用CSS制作图标的方法
纯CSS绘制图标
通过CSS的border、transform、伪元素等属性可以绘制简单图标，例如绘制三角形：
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #333;
}绘制放大镜图标：
.search-icon {
position: relative;
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
}
.search-icon::after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background: #333;
transform: rotate(45deg);
bottom: -5px;
right: -5px;
}使用CSS图标库
Font Awesome等图标库提供现成的CSS解决方案：
<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>SVG内联CSS图标
SVG结合CSS可以创建可定制矢量图标：
<svg class="heart-icon" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>.heart-icon {
width: 24px;
height: 24px;
fill: red;
transition: fill 0.3s;
}
.heart-icon:hover {
fill: darkred;
}CSS动画图标
为图标添加交互效果：
.loading-spinner {
width: 40px;
height: 40px;
border: 4px 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: 1em;
height: 1em;
font-size: calc(16px + 1vw);
}
