font-family 无法通过 css 变量动态切换图标字体库，因 @font-face 不支持变量且 font-family: var() 仅为静态占位符；正确方案是预定义多套 @font-face 和 class 规则，通过切换 data-icon-set 属性控制生效字体。
font-family 不能靠 var() 动态切换字体图标库 —— 所有图标字体声明必须硬编码，变量只适合控制颜色、大小、旋转等非字体名属性。
为什么直接改 --icon-font 变量不生效？
很多人写：:root { --icon-font: "FontAwesome"; }，再用 JS 改 document.documentElement.style.setProperty('--icon-font', '"IconPark"')，但图标没变。这不是 JS 失效，而是浏览器在样式计算阶段就解析完 font-family: var(--icon-font)，后续变量变更不会触发字体重载或重新匹配 @font-face。
@font-face 规则里完全不支持变量，所有 font-family 字符串必须字面量写死；var() 在这里只是个静态占位符，不是运行时代理。
font-family 必须显式声明，且需配对 @font-face
想换图标库，本质是换一套字体文件 + 换一套 class 映射规则。正确做法是：
- 为每个图标库单独定义
@font-face，并用不同字体名（如"fa"、"iconpark"） - 用属性选择器或类名控制哪套字体生效：
[data-icon-set="fa"] .icon { font-family: "fa"; } - 切换时只改 HTML 元素的
data-icon-set属性，不碰 CSS 变量 - 确保每个图标 class 的
content值与对应字体的 Unicode 编码一致（Font Awesome 和 IconPark 的编码完全不同）
CSS 变量能管什么？只管“怎么用”，不管“用哪个库”
你可以用变量统一控制图标的视觉表现，但不能用它切换底层字体源：
-
--icon-size: 1.2em→font-size: var(--icon-size) -
--icon-color: #333→color: var(--icon-color) -
--icon-rotate: 0deg→transform: rotate(var(--icon-rotate)) - 但
--icon-font-name这种变量毫无意义：它既不能参与@font-face，也不能让浏览器重新加载字体
真正可切换的方案：类名 + 预置多套规则
把切换逻辑交给 class，而不是变量：
/* FontAwesome 版本 */
.icon-fa { font-family: "FontAwesome"; }
[data-icon-set="fa"] .icon-user:before { content: "\f007"; }
<p>/<em> IconPark 版本 </em>/
.icon-ip { font-family: "iconpark"; }
[data-icon-set="ip"] .icon-user:before { content: "\e101"; }</p><p>/<em> 切换只需一行 JS </em>/
document.body.setAttribute('data-icon-set', 'ip');</p>
注意：content 值必须和对应字体的 glyph 编码严格匹配，不同图标库之间不可复用；font-family 名称必须和 @font-face 中声明的完全一致（区分大小写、引号、空格）。
最容易被忽略的是：字体文件加载时机。如果切换后新字体还没加载完成，会 fallback 到 serif 或显示空白 —— 你需要监听 document.fonts.load() 或用 font-display: swap 控制 FOUT 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
