直接用 @font-face 引入字体图标在 bootstrap 中易失效，因 bootstrap 重置 font-family 等属性且 css 优先级高；需将 @font-face 置于所有 css 后、显式设 font-display: swap、提供 woff2/woff/ttf 多格式、统一 font-family 名称，并用伪元素 + !important 安全调用。
为什么直接用 @font-face 引入字体图标在 Bootstrap 里容易失效
Bootstrap 默认会重置 font-family、font-weight 和 line-height，尤其在按钮、表单控件或 .btn、.form-control 这类类名下，图标文字可能被强制继承系统字体或渲染为方块。更关键的是，Bootstrap 的 CSS 优先级常高于你自定义的 @font-face 声明位置 —— 如果写在 bootstrap.css 之后但没加 !important 或没覆盖好 font-display 行为，图标字体会加载但不生效。
实操建议：
- 把
@font-face声明放在所有 CSS 文件（含bootstrap.min.css）**引入之后**，且最好放在自己项目主样式文件的最顶部 - 显式设置
font-display: swap，避免图标字体加载时白屏或回退到默认字体 - 确保字体文件路径相对于当前 CSS 文件，不是 HTML 页面；比如 CSS 在
css/app.css，图标文件就在fonts/icon-font.woff2，那路径就得写url('../fonts/icon-font.woff2')
怎样写一个兼容性稳妥的 @font-face 声明
只提供 .woff2 格式看似够用，但某些旧版 Android WebView 或 IE11 会跳过它，导致图标不显示。必须按降序提供多格式，并统一 font-family 名称（推荐全小写+中划线，避免空格和大写）。
示例（假设字体名为 my-icon）：
@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;
}
注意点：
-
font-weight和font-style必须设为normal，否则用font-weight: bold调用时可能匹配失败 - 别用
font-weight: 400或700—— 字体文件本身不含 weight 变体，纯属误导浏览器 - 如果图标字体生成工具（如 IcoMoon、Fontello）导出时勾选了「Unicode 编码」，就不用手动写
unicode-range；若用了私有 Unicode 区（如 U+F100–U+F200），可加unicode-range: U+F100-F200提升加载效率
如何在 Bootstrap 组件里安全调用自定义图标字体
别直接给 <i class="my-icon-home"></i> 写 font-family，Bootstrap 的 .btn i、.nav-link i 等规则可能覆盖你的设置。正确做法是：用伪元素 + content 注入 Unicode 字符，并隔离字体声明。
例如定义一个通用图标类：
.icon-home::before {
font-family: 'my-icon' !important;
content: ' 101'; /* 查字体文档得实际 Unicode */
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
使用时：
<button class="btn btn-primary"><i class="icon-home me-1"></i>首页</button>
关键细节：
- 必须加
!important—— Bootstrap 的.btn i可能设了font-family: inherit，不加则失效 -
me-1是 Bootstrap 5 的 margin 工具类，确保图标和文字间距可控；别依赖margin-right写死像素值 - Unicode 值必须用单引号包裹的转义字符串（
' 101'），不能写成'f101'或\f101
调试图标不显示的三个必查点
图标显示为空心方块、问号或直接空白，90% 出在这三处：
- 浏览器控制台 Network 面板看字体文件是否 404 —— 路径错、大小写敏感（Linux 服务器）、或 Webpack/Vite 没配好静态资源别名都会导致
- Elements 面板检查元素计算后的
font-family是否真为'my-icon'，以及content值是否被覆盖或为空 - 打开字体文件（用浏览器直接访问
/fonts/my-icon.woff2）确认能否正常预览字符 —— 有些字体生成器导出时未嵌入 Unicode 映射，导致101实际没对应图形
如果用了构建工具，还要确认字体文件是否进了打包产物：Vite 需放 public/fonts/，Webpack 要配 asset-module 或 file-loader，否则 url() 里的路径只是字符串，不会被复制进 dist。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
