font-awesome - 使用Semantic-UI(或Font Awesome)图标作为OpenLayers3中的标记

Question

有没有一种方法可以将语义UI或FontAwseome中的图标用作OpenLayers3中的标记图标？

OpenLayers具有功能样式文本，可以按如下方式使用:

var blackFill   = new ol.style.Fill({color: 'black'})
var whiteStroke = new ol.style.Stroke({color: 'white', width: 1})
var iconText    = new ol.style.Text({font: "<my font>", text: "<some string>", fill: blackFill, stroke: whiteStroke })
var featureStyle = new ol.style.Style({ text: iconText });

检查语义UI元素的样式后，我发现它使用“图标”作为字体系列，并使用转义字符选择符号(例如，日历图标为“\f073”)；因此，我尝试了一下(在页面的头部包含了Semantic-UI的CSS):

var iconText    = new ol.style.Text({font: "Icons", text: "\f073", fill: blackFill, stroke: whiteStroke })

这仅将“\f073”写为标记。
我尝试使用“＆＃xf073”，就像在HTML中一样，但这显示了相同的行为(它写为“＆＃xf073”)
我还尝试了“\uf073”，这表明有些死角表示一个未知的字符。

有什么建议吗？

Answer 1

您需要使用font属性将字体显式设置为FontAwesome，如下所示:

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '\uf041',
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});

干杯!