在 OpenLayers3 中使用 Semantic-UI（或 Font Awesome）图标作为标记答案

【问题标题】：Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3在 OpenLayers3 中使用 Semantic-UI（或 Font Awesome）图标作为标记
【发布时间】：2015-01-07 00:12:57
【问题描述】：

有没有办法将 Semantic UI 或 FontAwseome 中的图标用作 OpenLayers3 中的标记图标？

OpenLayers 的特征样式 Text 可以使用如下：

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”作为标记。我尝试使用“”，就像我在 HTML 中所做的那样，但这显示了相同的行为（它写入“”）我还尝试了“\uf073”，这显示了一些死亡方块，表示未知字符。

有什么建议吗？

【问题讨论】：

标签： font-awesome openlayers-3 semantic-ui

【解决方案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',
    })
  })
});

干杯！

【讨论】：

这行得通！仅供参考，如果您指定“Icons”而不是“FontAwesome”，它也适用于 Semantic-UI。非常感谢！
很高兴为您提供帮助！是的，该解决方案确实适用于您可能想要使用的任何矢量图标字体。除了 FontAwesome 之外，我自己也将它与 Octicons 一起使用。
从 Openlayers 4.4.0 及更高版本开始，textBaseline 必须为 bottom（小写），否则将不起作用。

【解决方案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
    })
});

【讨论】：

【解决方案3】：

即使有上述答案，我也无法正常工作。我的问题是我直接复制了通常由 FontAwesome 在 CSS 元素中分配的内容，而不是完整的代码。

例如，我试图使用代码\f077 让fa-chevron-down 出现。但是，要让图标出现在 OpenLayers 中，您需要使用 \uf077。

【讨论】：

【解决方案4】：

如果您想使用 Font Awesome 图标的规范名称，您可以使用 fontawesome 包：

var fa = require('fontawesome');
var style = new ol.style.Style({
  text: new ol.style.Text({
    text: fa('map-marker'),
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white'
    })
  })
});

Node.js 示例：

$ node
> var fa = require("fontawesome");
> fa("map-marker")
''

【讨论】：

【解决方案5】：

任何希望通过 Openlayers 6.x 和 Material Design Icons 实现这一目标的人可能会发现这很有用：

const style = new Style({
  text: new Text({
    text: String.fromCodePoint(0xF0470), // the value of the CSS' content property (\ replaced with 0x)
    font: 'normal normal 400 24px "Material Design Icons"'
  }),
})

您可以在图标的 CSS 类中找到代码点的值：

.mdi-satellite::before {
  content: "\F0470"; // becomes String.fromCodePoint(0xF0470)
}

【讨论】：