OpenLayers 6 和 Font Awesome 5 显示框而不是图标

问题描述

我尝试了各种已经建议的解决方案，但都没有奏效。

new Style({
    text: new Text({
        text: '\uf0d1',scale: 1.5,textBaseline: 'bottom',font: '900 20px Font Awesome 5 Free',fill: new Fill({ color: '#2196F3' }),}),})

这就是地图上显示的

只显示框而不是图标。

补充一点，这是带有 Nuxt 的 Vue 项目，因此 Font Awesome 是通过 next-fontawesome 包导入的，并通过组件标签在整个项目中使用。

在我的主 scss 文件中，我添加了 @import '@fortawesome/fontawesome-free/css/all.css'; 并在这样的基本跨度上进行了测试

<span class="custom-icon"></span>

在 css 中

.custom-icon::before {
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       content: "\f007";
       color: green;
 }

导致了这个

所以代码工作正常，但不在地图上。

如果有人知道是什么问题，我将不胜感激。

解决方法

弄清楚是否有人需要它以备将来参考

确保在全局 CSS 中导入 @fortawesome/fontawesome-free/css/all.css
字体名称应该像 font: '900 20px "Font Awesome 5 Free"' 一样引用

font-awesome-5 javascript openlayers-6