less中安全定义图标码点需定义为无前缀小写十六进制字符串（如@icon-home: "e900"），引用时用~"\@{icon-home}"转义插值，并配合mixin统一管理font-family等样式。
直接用 Less 变量管理图标码点（Unicode）是可行的，但必须配合 @font-face 正确声明字体、且变量值不带引号或转义错误，否则编译后 CSS 里会变成字面量字符串而非真实 Unicode 字符。
如何在 Less 中安全定义和引用图标码点
码点变量本质是字符串，但 CSS 的 content 属性需要的是未加引号的 Unicode 转义序列（如 \e900），而 Less 默认把带反斜杠的变量当普通字符串处理——直接写 @icon-home: "\e900"; 然后 content: @icon-home; 会输出 content: "\e900";，浏览器不识别。
- 正确做法是用 Less 的
~""转义插值：定义@icon-home: "e900";，使用时写content: ~"\@{icon-home}"; - 所有码点统一用小写十六进制、不带
\u或\前缀，避免编译器混淆 - 别把码点和字体名混在一个变量里，比如
@icon-home: "e900" "icomoon";—— 后续无法拆分提取，应分开定义@icon-font-name和@icon-home - 如果项目同时用多套图标字体（如 IcoMoon + 自定义 SVG 字体），为每个字体建独立变量文件，避免命名冲突
为什么 .icon::before { content: ~"\@{icon-home}"; } 有时不生效
常见原因不是变量写错，而是底层字体未加载或 class 名没匹配上。Less 编译只管生成 CSS，不校验字体是否真能渲染。
- 检查浏览器开发者工具的 Fonts 面板，确认
@font-face加载成功，且字体名与font-family声明完全一致（包括引号、空格） -
::before元素必须有display: inline-block或类似布局属性，否则content不显示 - 确保目标元素有足够宽高，且未被父级
overflow: hidden截断 - IE11 及更早版本不支持
content在伪元素中动态插入 Unicode，需提供降级方案（如图片或 SVG）
用 Mixin 封装图标插入逻辑比重复写 content 更可靠
手动拼 ~"\@{xxx}" 容易漏掉波浪号或花括号，也难统一设置 font-family、speak、vertical-align 等配套样式。
- 写一个
.icon-use(@code)mixin：.icon-use(@code) { font-family: @icon-font-name; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; content: ~"\@{code}"; } - 调用时传入变量：
.icon-home::before { .icon-use(@icon-home); } - 这样改字体名或加新属性，只需动 mixin 内部，不用遍历所有图标类
- 注意 mixin 不能嵌套在媒体查询里再调用（Less 旧版本会报错），建议把响应式逻辑放在调用处
真正容易被忽略的是字体路径和字体名的耦合——@icon-font-name 必须和 @font-face 里 font-family: "icomoon" 的引号内名称一字不差，连空格都不能多一个；而码点变量一旦定义，就只负责“是什么”，不负责“怎么显示”，显示逻辑全靠 mixin 和基础 font-face 支撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
