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

【问题标题】：OpenLayers 6 and Font Awesome 5 showing boxes instead of iconOpenLayers 6 和 Font Awesome 5 显示框而不是图标
【发布时间】：2021-06-01 09:47:54
【问题描述】：

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

我的风格很简单

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

导致了这个

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

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

【问题讨论】：

标签： javascript font-awesome-5 openlayers-6

【解决方案1】：

如果有人需要它以供将来参考，请弄清楚

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

【讨论】：