在Openlayers中以不同的图标样式使用Fontawesome

时间:2020-01-30 07:51:51

标签: font-awesome openlayers

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

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

1 个答案:

答案 0 :(得分:0)

根据https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use,字体的粗细是用来指定要使用的图标样式的。对于常规样式,要使用的权重为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 })
        })
      });