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

Question

有没有办法使用Semantic 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元素的样式后,我发现它使用"Icons"作为font-family和转义字符来选择符号(例如"\ f073"用于日历图标); 因此我尝试了(我的页面的head部分包含Semantic-UI的css):

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

这只是写"\ f073"作为标记.我尝试使用"",就像我在HTML中所做的那样,但这显示了相同的行为(它写了"")我也尝试了"\ 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',
    })
  })
});

干杯!

Answer 2

我使用此代码使其与 OpenLayers v6.0.1 和 Font Awesome 5.11.2 一起使用：

var style = new ol.style.Style({
    text: new ol.style.Text({
        text: '\uf04b',                         // fa-play, unicode f04b
        font: '900 18px "Font Awesome 5 Free"', // font weight must be 900
    })
});