SVG inline 与 font-icon 可共存于同一套代码中，通过 @supports 或 JS 检测选择渲染方案：现代浏览器用 inline SVG（fill: currentColor），老 IE 回退 font-icon；统一用 CSS 变量控制尺寸与颜色，确保语义、可访问性及缩放一致性。
SVG inline + font-icon fallback 怎么共存
字体图标（如 Font Awesome）和 SVG 本身是两类方案，不能“混合渲染”成一个图标，但可以按需切换或降级。关键不是让它们视觉上“融合”，而是让同一套业务代码在不同环境里用最合适的方案——比如现代浏览器走 内联，老 IE 用 font-icon。
常见错误是把 font-icon 的 class 和 标签混在同一元素里，结果样式冲突、尺寸错乱、语义丢失。
- 用 CSS
@supports (background: svg-url())或 JS 检测SVGElement支持度，决定加载哪套图标资源 - 统一定义图标的尺寸、对齐、颜色接口：比如所有图标容器都设
display: inline-flex、align-items: center、--icon-size: 1em - 避免直接写
font-size: 16px控制图标大小，改用width: var(--icon-size)+height: var(--icon-size)，这样 SVG 和 font-icon 都能响应式缩放
如何用 CSS 变量统一 SVG 和 font-icon 的颜色与尺寸
字体图标靠 color 生效，SVG 靠 fill 或 currentColor。想用一个变量控制两者，就得让 SVG 的 fill 绑定到文本色。
示例：
立即学习“前端免费学习笔记（深入）”；
.icon {
--icon-size: 1.2em;
width: var(--icon-size);
height: var(--icon-size);
color: #333; /* 同时影响 font-icon 和 SVG 的 currentColor */
}
.icon svg {
fill: currentColor; / 关键：让 SVG 响应 color 变化 /
}
.icon::before {
/ font-icon 的伪元素写法，也受 color 控制 /
}
- 不要给
svg单独写死fill="#xxx"，否则会覆盖currentColor - 如果 SVG 是外部文件（
currentColor不生效，必须用 inline SVG 或引用 sprite - IE11 不支持
currentColor在中的继承，需单独加fill: inherit
用
团队已有大量 fa fa-home 这类 class，又想迁移到 SVG，不必重写模板。可以用 CSS 把 class 映射到对应 引用。
例如：
再配 CSS：
[class*="icon-"] {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-home { background: none; }
.icon-home use { href: "#icon-home"; }
- 实际项目中更推荐用构建工具（如 Webpack 的
svg-sprite-loader）自动生成 symbol sprite 和配套 CSS，避免手写 - 注意
href在部分旧版 Safari 中需写成xlink:href，但现代用法已可省略xlink:前缀 - font-icon 的 class 名（如
fa-search）和 SVG symbol ID（如icon-search）最好保持命名一致，降低维护成本
为什么别强行用 CSS 把 font-icon “转成” SVG 风格
有人尝试用 text-shadow、transform 或 filter 调整字体图标的边缘、粗细、圆角，试图模拟 SVG 的矢量精度——这不可靠，且破坏可访问性。
- 字体图标本质是文字，缩放后可能糊边、hinting 失效、字符间距异常
- 屏幕阅读器会读出图标对应的 Unicode 字符（如
\f002），而 SVG 可加aria-label或 - 真正统一风格的关键不是“看起来一样”，而是“行为一致”：尺寸可控、颜色响应、无障碍可用、缩放无损
复杂点在于 SVG sprite 的构建流程和 fallback 逻辑，而不是 CSS 样式本身；容易被忽略的是 viewBox 一致性——所有 SVG 必须有相同 viewBox（如 "0 0 24 24"），否则 width/height 缩放会变形。
