Bootstrap项目中@font-face引入图标字体常失效，因优先级、重置规则和加载时机问题；需确保声明在Bootstrap CSS之后、提供多格式、font-weight/font-style设为normal、font-display:swap。
直接用 @font-face 引入自定义图标字体，在 Bootstrap 项目里大概率失效——不是路径错，而是优先级、重置规则和加载时机共同导致的。
为什么 Bootstrap 下 @font-face 声明常被忽略
Bootstrap 的 .btn、.form-control、.nav-link 等类会强制重置 font-family、font-weight 和 line-height；即使你写了 @font-face，只要它出现在 bootstrap.min.css 之前，或没设 font-display: swap，浏览器就可能跳过渲染，最终显示为方块或默认字体。
- 常见错误现象：
<i class="icon-home"></i>渲染成空白或小方框，控制台无报错但 Network 标签里字体文件状态是200却不生效 - 关键干扰点：Bootstrap 的 CSS 选择器权重高，比如
.btn i会覆盖你给i.icon-home写的font-family - 真正生效的前提：声明必须在所有 Bootstrap CSS 加载完成之后，且不能被后续样式覆盖
@font-face 声明必须满足的 4 个硬性条件
缺一不可，否则字体文件加载成功，图标照样不显示。
- 位置：放在
bootstrap.min.css和所有第三方 CSS 之后，最好是自己主样式文件（如app.css）的最顶部 - 格式降序：至少提供
.woff2+.woff+.ttf，IE11 和旧版 Android WebView 会跳过woff2直接 fallback 到woff -
font-weight和font-style必须设为normal，别写400或italic——图标字体通常不含变体，写错就匹配失败 -
font-display: swap必须显式声明，否则首次加载时图标区域白屏或回退到系统字体，影响 UX
示例（字体名统一用小写+中划线）：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@font-face {
font-family: 'my-icon';
src: url('../fonts/my-icon.woff2') format('woff2'),
url('../fonts/my-icon.woff') format('woff'),
url('../fonts/my-icon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
在 Bootstrap 组件里安全调用图标的写法
别指望给 <i class="icon-home"></i> 单独加 font-family 就能生效——组件内部样式会把它干掉。必须用伪元素 + !important 强制接管。
- 正确写法：用
::before插入 Unicode 字符，并加!important覆盖 Bootstrap 的重置 - 确保
content值是 Unicode 编码（如"\f101"），不是 HTML 实体或十进制 - 推荐统一加
display: inline-block，避免在.btn或.input-group里因 inline 元素 baseline 导致垂直偏移
示例：
.icon-home::before {
font-family: 'my-icon' !important;
content: "\f101";
display: inline-block;
}
然后在 HTML 中写：<span class="icon-home"></span> —— 不要用 <i>，避免和 Bootstrap 的 .icon 类冲突。
路径和构建流程最容易踩的坑
字体路径不是相对于 HTML，而是相对于当前 CSS 文件。很多人把字体放错目录，又没改 URL，结果 Network 里看到 404，还以为是跨域问题。
- 假设 CSS 在
css/app.css，字体文件在fonts/my-icon.woff2，那 URL 必须写url('../fonts/my-icon.woff2') - Webpack/Vite 项目里，如果用了
url()别名（如@/assets/fonts），要确认构建工具是否支持该别名解析字体路径 - 开发时正常，上线后图标消失？检查 CSP 策略是否限制了
font-src，尤其是用了 CDN 或子域名部署时
真正麻烦的从来不是怎么引入，而是怎么让图标在 .btn-sm 里不比文字高半像素、在 .text-muted 下还能继承颜色、在 SSR 场景下不闪动——这些细节得靠伪元素 + !important + 显式 display + font-display: swap 四者配合才能稳住。
