使用Semantic-UI(或Font Awesome)图标作为OpenLayers3中的标记 [英] Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3

问题描述

是否可以使用语义UI或FontAwseome中的图标作为OpenLayers3中的标记图标?

Is there a way to use icons from Semantic UI or FontAwseome as markers icons in OpenLayers3 ?

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

OpenLayers features the feature style Text that can be used as follows:

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):

After checking the style of Semantic UI elements, I discovered it is using "Icons" as font-family and escaped characters to choose the symbol (e.g. "\f073" for the calendar icon); therefore I tried (with Semantic-UI's css included in the head section of my page):

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

这只是写"\ f073"作为标记. 我尝试使用&#xf073"，就像在HTML中那样，但是显示了相同的行为(它写为&#xf073"). 我还尝试了"\ uf073"，它显示出一些死角，表示角色未知.

This merely write "\f073" as markers. I tried to use "&#xf073", as I would do in HTML, but this shows the same behavior (it writes "&#xf073") I also tried "\uf073", this showed some square of death indicating an unknown character.

有什么建议吗?

推荐答案

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

You need to explicitly set the font to FontAwesome using the font property, like so:

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

干杯！

这篇关于使用Semantic-UI(或Font Awesome)图标作为OpenLayers3中的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！