css 字体图标制作

字体图标制作方法

使用字体文件（如TTF/OTF）转换为Web字体

下载或设计矢量图标，保存为TTF或OTF格式。通过在线工具（如Fontello、IcoMoon）将字体转换为Web字体格式（WOFF/WOFF2）。生成CSS文件包含字体声明和图标类名：

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2') format('woff2');
}
.icon {
  font-family: 'iconfont';
}
.icon-home:before {
  content: "\e600";
}

利用CSS伪元素插入图标

通过伪元素::before或::after插入Unicode字符。确保字体文件已正确加载，并通过类名控制显示：

<span class="icon icon-home"></span>

调整图标样式

使用CSS属性控制图标大小、颜色和对齐方式：

.icon {
  font-size: 24px;
  color: #333;
  vertical-align: middle;
}

使用SVG替代方案

考虑使用SVG作为替代方案，通过<symbol>和<use>标签实现可缩放矢量图标：

<svg class="icon">
  <use xlink:href="#icon-home"></use>
</svg>

优化性能

合并多个图标到单一字体文件中，减少HTTP请求。使用unicode-range属性优化字体加载：

@font-face {
  unicode-range: U+e600-e6ff;
}

注意事项

确保字体图标在不同浏览器和分辨率下清晰显示。测试跨平台兼容性，必要时提供备用方案。避免使用过多图标字体，以免影响页面加载速度。