如何让HighCharts tooltip中使用unicode的Font Awesome图标等宽对齐

解决方案 #

你只需要按以下两步调整即可实现图标等宽左对齐：

1. 开启HighCharts tooltip的HTML渲染支持，同时给Unicode图标套上自定义类名的span标签，示例代码如下：

tooltip: {
  useHTML: true, // 必须开启，否则HTML标签会被转义不生效
  formatter: function() {
    // 原逻辑中插入图标的位置改为套span
    return `<span class="fa-tooltip-icon">\uf005</span> ${this.y}`
    // 其他图标同理，都套同一个类的span即可
  }
}

2. 给自定义类加统一的固定宽度样式：

.fa-tooltip-icon {
  display: inline-block;
  width: 1em; /* 宽度可自行调整，用em单位会跟随图标字体大小自适应 */
  text-align: left;
  /* 下方是确保Font Awesome图标正常渲染的基础配置，可根据你用的FA版本调整 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
}

如果用的是Font Awesome 4版本，把font-family改成FontAwesome、去掉font-weight配置即可。
调整后所有图标都会在固定宽度的容器内左对齐，不会再出现偏移不齐的问题。

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