css 制作icon
使用 CSS 制作 Icon 的方法
纯 CSS 绘制简单图形
利用 CSS 的 border、transform 和伪元素可以绘制基本图形，例如三角形、圆形或箭头。
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #333;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
}使用伪元素组合复杂图形
通过 ::before 和 ::after 伪元素叠加，可以创建更复杂的图标，如菜单图标或关闭按钮。
.menu-icon {
width: 20px;
height: 2px;
background-color: #333;
position: relative;
}
.menu-icon::before,
.menu-icon::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background-color: #333;
}
.menu-icon::before {
top: -6px;
}
.menu-icon::after {
bottom: -6px;
}利用 SVG 内联或背景
SVG 具有矢量特性，适合高分辨率显示。可以直接内联或作为背景图使用。
.svg-icon {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L4 12l8 10 8-10z" fill="%23333"/></svg>');
}字体图标库（如 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>CSS 动画增强交互效果
为图标添加悬停或点击动画，提升用户体验。
.rotate-icon {
transition: transform 0.3s ease;
}
.rotate-icon:hover {
transform: rotate(90deg);
}选择建议
- 简单图形：优先使用纯 CSS 实现，减少依赖。
- 复杂图标：考虑 SVG 或字体图标库，确保清晰度和可维护性。
- 动态效果：结合 CSS 动画实现交互反馈。
