在具有不同图标样式的 Openlayers 中使用 Fontawesome答案

【问题标题】：Use Fontawesome in Openlayers with different icon styles在具有不同图标样式的 Openlayers 中使用 Fontawesome
【发布时间】：2020-05-15 18:55:21
【问题描述】：

我想在我的地图上使用不同的 Fontawesome 图标样式。到目前为止，这不是问题。但在我的情况下，Icon: 'map-marker-alt' 只有一个 unicode 用于 4 种不同的样式 (https://fontawesome.com/icons/map-marker-alt?style=regular)。所以我可以访问的唯一样式是常规样式。是否可以引用另一种样式，例如solid样式？

      const markerStyle = new Style({
        text: new Text({
          text: '\uf3c5',
          scale: 1.5,
          textBaseline: 'bottom',
          font: 'normal 16px "Font Awesome 5 Pro"',
          fill: new Fill({ color: '#2196F3' }),
          stroke: new Stroke({ color: 'black', width: 1 })
        })
      });

【问题讨论】：

标签： font-awesome openlayers

【解决方案1】：

根据https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use，字体粗细用于指定要使用的图标样式。对于 Regular 样式，要使用的权重为 400，因此您的代码需要更改为：

const markerStyle = new Style({
        text: new Text({
          text: '\uf3c5',
          scale: 1.5,
          textBaseline: 'bottom',
          font: '400 16px "Font Awesome 5 Pro"',
          fill: new Fill({ color: '#2196F3' }),
          stroke: new Stroke({ color: 'black', width: 1 })
        })
      });

【讨论】：