Font Awesome中CSS content属性\f1db字符的转换逻辑与含义咨询

两个content属性的转换逻辑 #

你看到的第一种写法是CSS预处理器（Less/Sass）的变量调用写法：

• @fa-var-circle-thin 是Font Awesome官方为对应图标预先定义的语义化变量，变量内部存储的就是该图标的实际Unicode编码值
• ~ 是Less语法中的字符串拼接运算符，这里的作用就是把三个相同的circle-thin图标编码直接拼接在一起

当这段预处理器代码被编译为原生可被浏览器识别的CSS时，预处理器会自动把所有变量替换为实际的存储值，最终输出的就是你看到的第二个content属性写法。

\f1db的具体含义 #

\f1db 是Font Awesome中「空心薄圆（circle-thin）」图标的专属Unicode编码：

• CSS中前缀 \ 是转义标识，用于声明后面跟着的是十六进制格式的Unicode字符编码
• Font Awesome的所有图标都映射在Unicode的私有使用区间（U+F000 ~ U+F8FF），这个区间不会和常规公共字符的编码冲突
• 只要对应元素的font-family属性正确指定了Font Awesome的字体族，浏览器渲染时就会把\f1db自动替换为对应的空心圆图标，这里连续写三个就会依次渲染三个相同的空心圆。

内容的提问来源于stack exchange，提问作者Ragazini