css 制作字体图标

使用 CSS 制作字体图标

使用 @font-face 引入图标字体

定义 @font-face 规则，引入自定义图标字体文件（如 .woff 或 .ttf 格式）。示例代码：

@font-face {
  font-family: 'MyIconFont';
  src: url('myiconfont.woff2') format('woff2'),
       url('myiconfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

通过伪元素显示图标

为 HTML 元素添加伪元素（如 ::before 或 ::after），并指定字体家族为图标字体。通过 content 属性设置对应的 Unicode 字符：

.icon-home::before {
  font-family: 'MyIconFont';
  content: "\e001"; /* Unicode 编码 */
  margin-right: 5px;
}

使用 CSS 控制图标样式

像普通文本一样调整图标的大小、颜色等属性：

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

集成第三方图标库

直接引用如 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-user"></i>

优化性能

• 使用 woff2 格式字体文件，压缩体积。
• 通过 font-display: swap 避免加载阻塞：

@font-face {
  font-display: swap;
}

注意事项

• 确保图标字体的 Unicode 编码与设计文件一致。
• 测试不同浏览器的兼容性，必要时提供多种字体格式。
• 避免滥用图标字体，复杂图形建议使用 SVG。