css 制作字体图标

使用 CSS 制作字体图标的方法

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

定义 @font-face 规则引入字体文件（如 .woff 或 .ttf），并通过 CSS 类选择器应用图标字体。

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

.icon {
  font-family: 'MyIconFont';
  font-style: normal;
  font-weight: normal;
}

.icon-heart:before {
  content: "\f004"; /* Unicode 编码 */
}

HTML 中直接通过类名调用：

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

使用伪元素插入图标

通过 :before 或 :after 伪元素插入 Unicode 字符或自定义内容。

.button:before {
  font-family: 'MyIconFont';
  content: "\f007"; /* 图标 Unicode */
  margin-right: 5px;
}

调整图标样式

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

.icon {
  font-size: 24px;
  color: #ff0000;
  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; 避免布局偏移。
• 仅加载需要的图标子集以减少文件大小。