如何为Leaflet.AwesomeMarkers插件升级至Font Awesome 5？

我之前也踩过这个坑！Leaflet.AwesomeMarkers确实停更好久了，和Font Awesome 5的兼容问题主要集中在类名前缀、样式规则、字体路径这几个点，给你一步步拆解解决：

Font Awesome 5把图标分成了不同的风格（solid/regular/light等），对应的前缀从原来统一的fa改成了fas（solid）、far（regular）这类，而AwesomeMarkers默认还是用fa前缀，所以得手动修改标记的配置：

原来的写法：

L.AwesomeMarkers.icon({
  icon: 'map-marker',
  prefix: 'fa',
  markerColor: 'red'
});

改成Font Awesome 5对应的前缀（比如用solid风格）：

L.AwesomeMarkers.icon({
  icon: 'map-marker',
  prefix: 'fas', // 换成fas/far/fa-light等对应风格的前缀
  markerColor: 'red'
});

AwesomeMarkers的内置CSS是针对Font Awesome 4写的，得在你的app.scss里覆盖它的字体规则，适配Font Awesome 5：

// 覆盖AwesomeMarkers的图标字体设置
.awesome-marker .icon-awesome {
  font-family: 'Font Awesome 5 Pro'; // 这里要和你引入的Font Awesome 5字体名称一致
  font-weight: 900; // solid风格对应900，regular对应400，根据你用的风格调整
}

检查app.scss里的Font Awesome 5资源引入路径，别让字体文件报404：

// 先引入官方的CSS文件
@import './path/to/font-awesome-pro-5.0.1.css';

// 如果官方CSS里的字体路径不对，手动重新声明字体（路径要相对于编译后的CSS文件位置）
@font-face {
  font-family: 'Font Awesome 5 Pro';
  src: url('./fonts/fa-solid-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

如果上述调整还是有奇奇怪怪的兼容性问题，不如直接换掉停更的AwesomeMarkers，找个原生支持Font Awesome 5的Leaflet标记插件——这类插件在社区里不少，维护状态更好，能省掉很多手动适配的麻烦。

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