css 字体图标制作
字体图标制作方法
使用字体文件（如TTF/SVG）转换为图标字体
下载或设计矢量图标（SVG格式），通过工具如Fontello、IcoMoon或FontAwesome将SVG转换为字体文件（TTF/WOFF等）。生成的字体包通常包含CSS文件，可直接引入项目。
@font-face {
font-family: 'MyIconFont';
src: url('myiconfont.woff2') format('woff2');
}
.icon {
font-family: 'MyIconFont';
display: inline-block;
}通过伪元素添加图标
在CSS中利用::before或::after伪元素，结合Unicode字符显示图标：
.icon-home::before {
content: "\e900"; /* Unicode码点 */
font-family: 'MyIconFont';
}调整图标样式
控制图标大小、颜色和对齐方式：
.icon {
font-size: 24px;
color: #333;
vertical-align: middle;
}工具推荐
- Fontello：在线选择SVG图标并生成字体包。
- IcoMoon：支持自定义图标集和导出多种格式。
- SVGOMG：优化SVG文件以减少字体体积。
注意事项
- 确保字体文件跨浏览器兼容（提供WOFF/WOFF2格式）。
- 使用
font-display: swap避免布局偏移。 - 考虑可访问性，为图标添加
aria-hidden或替代文本。
