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或替代文本。