CSS中Unicode图标显示为乱码（â–¾）的原因及解决方法

这问题我之前也碰到过，其实是字符编码不匹配搞的鬼！

为什么会出现乱码？ #

你用到的▾是UTF-8编码的特殊字符，它需要多个字节来存储。当浏览器或者某个扩展在解析你的CSS文件时，错误地用了单字节编码（比如ISO-8859-1）去读取UTF-8格式的文件，就会把原本的多字节字符拆成单个字节解析，于是就出现了â–¾这种乱码。特别是部分浏览器扩展可能会注入代码、修改页面资源的编码处理逻辑，干扰了原本正确的字符解析流程。

解决方法 #

• 用Unicode转义序列替代直接写字符：这是最稳妥的方案，完全规避编码问题。把你的代码改成：

  .selector:after { content: '\25BE'; }
  

  \25BE就是▾对应的Unicode码点（U+25BE）的转义写法，浏览器能直接识别，不受编码设置影响。

• 确保CSS文件的编码声明正确：在CSS文件的最开头添加编码声明，明确告诉浏览器文件是UTF-8编码：

  @charset "UTF-8";
  /* 后面是你的CSS代码 */
  .selector:after { content: '▾'; }
  

  同时要确认你的编辑器在保存CSS文件时，选择的是不带BOM的UTF-8编码（带BOM的UTF-8可能会被部分旧浏览器或扩展误解析）。

• 排查干扰的浏览器扩展：临时禁用所有浏览器扩展，然后逐个重新启用，找出哪个扩展导致了编码异常。有些扩展可能会修改页面的字符集设置，或者对CSS资源做了不必要的转码，找到后可以查看扩展是否有相关设置可以调整，或者更换功能类似的替代扩展。

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