直接写e601会出问题，因硬编码导致维护困难、协作易错、字体升级后全量失效；scss中应语义化定义变量如$icon-home: "\e601";并显式声明font-family，避免大小写错误或拼接滥用。
为什么直接写 e601 会出问题
在图标字体（如 iconfont、Font Awesome）中，你常看到类似 .icon-home::before { content: "e601"; } 这样的写法。但硬编码 Unicode 码点（如 e601）会让样式极难维护：一旦图标库升级、码点重排，所有 content 值全得手动改；多人协作时还容易因复制粘贴错位导致显示空白或乱码；更麻烦的是，不同字体文件（.woff2/.ttf）对同一图标可能分配不同码点。
用 SCSS 变量封装图标码点的正确姿势
核心思路是把每个图标语义化命名，并统一管理在变量中，而不是散落在各处的 e601。变量定义建议放在 uni.scss 或独立的 _icons.scss 中：
- 使用
$icon-前缀 + 功能名，比如$icon-home、$icon-search，避免用$e601这类无意义命名 - 值必须带引号包裹，且保持反斜杠转义格式：
"\e601"（注意双反斜杠：SCSS 编译时需保留一个给 CSS 解析） - 不要漏掉
font-family声明——变量只管码点，字体族仍需显式指定，否则图标不渲染
示例：
// _icons.scss
$icon-home: "\e601";
$icon-search: "\e602";
$icon-user: "\e603";
.icon-home::before {
content: $icon-home;
font-family: "iconfont" !important;
}
uniapp 中 uni.scss 全局注入后仍不生效的常见原因
即使变量定义在 uni.scss，图标仍不显示，大概率是以下三者之一没做对：
-
uni.scss没被实际 import —— 它不会自动全局生效，必须在页面或组件的<style lang="scss"></style>中显式@import "@/uni.scss"; - 图标字体文件未正确加载或路径错误，检查控制台是否报
Failed to decode downloaded font或CORS错误 - 字体文件中实际码点与变量值不一致，建议打开 iconfont.cn 的「Unicode」页，复制“复制 Unicode”按钮生成的值（含
u前缀），再替换为 SCSS 可用的双反斜杠格式（uE601→"\e601"）
多字体/多主题下如何安全扩展图标变量
当项目需同时支持「线性图标」「填充图标」两套字体，或深色/浅色主题切换图标时，别堆砌一堆 $icon-home-filled、$icon-home-dark 变量。更可持续的做法是：
- 用 map 结构组织：定义
$icons: ("home": "\e601", "search": "\e602");，再配合函数按需取值 - 通过 class 控制字体族：
.icon-line { font-family: "icon-line"; }+.icon-fill { font-family: "icon-fill"; }，变量只存码点，解耦字体逻辑 - 避免在变量里拼接字符串（如
$icon-home: "iconfont \e601";），CSS 的content不支持多值拼接，编译会报错
真正容易被忽略的是：Unicode 码点本身区分大小写（e601 合法，E601 在部分编译器中会失效），且必须是小写十六进制；而 SCSS 变量一旦定义在全局文件，就无法被同名局部变量覆盖——这意味着改错一个值，所有引用它的地方都会静默崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
