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

Question

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

我的风格比较简单

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;
 }

这导致了这个

所以代码工作正常，但地图上没有。

如果有人知道问题出在哪里，我将不胜感激。

Answer 1

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

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

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

OpenLayers 6 and Font Awesome 5 showing boxes instead of icon

javascript

font-awesome-5

openlayers-6