应使用或（仅装饰用途）包裹字体图标，避免导致加粗失真；须设vertical-align:middle/text-bottom对齐文字；图标尺寸用em继承上下文；svg图标必设viewbox与宽高且fill用currentcolor。
用 <i></i> 或 <span></span> 套字体图标，别用 <b></b> <strong></strong> 直接包图标
字体图标（如 Font Awesome、Iconfont）本质是特殊 Unicode 字符或伪元素，必须用语义中性、无默认样式干扰的容器包裹。常见错误是把 <i class="icon-user"></i> 塞进 <strong>用户名</strong> 里——<strong></strong> 可能触发浏览器强制加粗逻辑，导致图标字形发虚、错位甚至消失。
正确做法是：用 <span></span> 或 <i></i>（仅当图标作纯粹装饰时，<i></i> 在 HTML5 中已允许用于“非文本性图标”）单独包裹图标，并与文字并列排布：
<p><i class="fa fa-user"></i> <span>张三</span></p>
- 确保图标类名（如
fa fa-user）加载成功，且 CSS 文件在中早于使用处引入 - 图标和文字之间加空格或
<span></span>控制间隙，避免粘连 - 不要给图标容器设
font-weight: bold，字体图标通常不支持加粗变体
行高不一致？给图标加 vertical-align: middle 或 text-bottom
图标默认按字母基线（baseline）对齐，而中文/数字常偏高，导致混排时上下跳动、视觉割裂。这是最常被忽略的渲染细节。
解决方式不是调 margin 硬推，而是用 vertical-align 对齐上下文：
<span class="icon"><i class="icon-search"></i></span> 搜索
对应 CSS：
.icon { vertical-align: middle; }
-
middle适合图标+中文混排，对齐小写字母 x 高度中点 -
text-bottom更稳妥，尤其在旧版 Safari 或行高较小场景下 - 避免用
top/bottom，它们依赖父容器 line-height，易随字体大小变化失效
响应式图标大小要和文字联动，别写死 px
图标尺寸写成 16px 或 1rem 是常见陷阱。如果父文本用 em 或动态缩放（如媒体查询改 html 字体大小），固定值图标会失比例。
正确策略是让图标字号继承上下文：
.icon { font-size: 1em; }
- 配合字体图标库的推荐写法（如 Iconfont 的
.iconfont默认设为font-size: 16px，需覆盖为1em） - 若需微调比例（如图标略小于文字），用
0.85em而非14px - 禁用
transform: scale()做缩放——会模糊图标，且影响点击热区计算
SVG 图标直接内联时，<svg></svg> 必须设 height 和 width 或 viewBox
HTML 中直接写 <svg></svg> 标签插入图标，比字体图标更可控、无渲染延迟，但新手常漏关键属性，导致图标不显示或拉伸变形。
最小可用结构必须包含 viewBox（定义坐标系）和显式尺寸控制：
<svg class="icon" width="1em" height="1em" viewbox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path></svg> 用户
-
width/height设为1em才能随文本缩放 -
viewBox不可省，否则 SVG 渲染引擎无法确定缩放基准 - 删掉
<style></style>或冗余fill属性，用 CSS 统一控制颜色：.icon { fill: currentColor; }
字体图标混排看着简单，真正卡住人的永远是那几个渲染细节：对齐方式、尺寸继承、SVG 元数据完整性。改完记得在 iOS Safari 和 Chrome Android 上实机点开看——有些问题只在真机触控渲染路径下暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
