核心原因是图标字体渲染依赖 font-size 和 vertical-align 等文本属性，而非宽高；应统一父容器 font-size、设置 vertical-align 对齐、避免混用字体与 SVG 版本。
引入第三方图标库后尺寸不一致，核心原因通常是图标字体（如 Font Awesome、Iconfont）默认按 font-size 渲染，而不同图标在字体文件中“字形基准”（baseline、em-box、vertical-align）或 SVG 转字体时的缩放处理不统一，导致视觉大小参差。解决关键不是强行改宽高，而是统一渲染上下文。
确保父容器 font-size 有明确值
图标字体本质是文字，其显示尺寸完全继承当前文本环境的 font-size。若父元素未设置字号（比如依赖浏览器默认 16px），或被重置为 0、rem/vw 动态值但未同步控制，图标就会“飘忽”。建议显式声明：
- 给图标容器（如
<i class="icon-home"></i>）或其最近的通用父级设一个稳定font-size，例如font-size: 18px; - 避免用
font-size: 0;清除间隙却忘记重设图标自身字号 —— 图标会塌缩成不可见 - 若用 rem 单位，确认根字体（
html { font-size: 16px; }）未被 JS 动态修改且未失效
用 font-size 直接控制图标大小（推荐）
这是最自然、最兼容的方式。图标库（如 Font Awesome）所有图标都设计为「等比例缩放」，只要统一 font-size，视觉尺寸就一致：
<i class="fa fa-home" style="font-size: 24px;"></i>- 写成 CSS 类更规范：
.icon-lg { font-size: 24px; }，然后<i class="icon-lg fa fa-home"></i> - 不要混用
width/height+font-size，尤其对行内图标，易引发对齐错乱
修正 vertical-align 和 line-height 干扰
图标常作为行内元素嵌入文字流，默认按基线（baseline）对齐，而不同图标字形的底部锚点可能略有差异，造成“看起来高低不一”：
立即学习“前端免费学习笔记（深入）”；
- 加
vertical-align: middle;或vertical-align: -0.125em;（Font Awesome 官方推荐偏移值）可显著改善对齐 - 若图标单独成行或需居中，包裹它的容器设
line-height: 1;避免行高撑开 - 慎用
display: block;—— 除非你确定不需要和文字混排
检查图标库是否混用不同版本或格式
常见踩坑：项目中同时引入了 Font Awesome 5 的 webfonts（字体版）和 FA6 的 SVG with JS（脚本注入版），或把 Iconfont 的字体文件和 SVG symbol 混用。它们渲染机制完全不同：
- 字体图标靠
font-size+ 字体度量；SVG 图标靠width/height或viewBox缩放 - 务必统一加载方式：全用 CDN 字体链接（
<link href="...css">），或全用 JS 加载 SVG，不要交叉 - 查看浏览器开发者工具 Elements 面板，确认图标最终渲染的是
<i></i>还是<svg></svg>，再针对性调样式
基本上就这些。记住：图标不是图片，它是“可缩放的文字”，font-size 是它的标尺，对齐和上下文才是稳定显示的关键。
