是否可以在Mapbox标记中使用“真棒字体"图标? [英] Is is possible to use Font Awesome icons in Mapbox Markers?

问题描述

我正在使用Maki图标集，但它们非常有限，希望能够使用Font Awesome图标.这可能吗?

这是我用来设置标记图标的代码.

marker.setIcon(L.mapbox.marker.icon({
    'title': jobid,
    'marker-color': '#e32f2f',
    'marker-symbol': 'square'
}));

解决方案

如果您在页面上添加了超棒的CSS字体，则可以使用L.DivIcon构造函数来创建自定义图标.

<style>
/*
 * Unlike other icons, you can style `L.divIcon` instances with CSS.
 * These styles make each marker a circle with a border and centered
 * text
 */
.fa-icon {color: red;}
</style>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([45.52245801087795, -122.67773866653444], 3);

L.marker([45.52245801087795, -122.67773866653444], {
    icon: L.divIcon({
        // specify a class name that we can refer to in styles, as we
        // do above.
        className: 'fa-icon',
        // html here defines what goes in the div created for each marker
        html: '<i class="fa fa-camera-retro fa-3x"></i>',
        // and the marker width and height
        iconSize: [40, 40]
    })
}).addTo(map);

这是一个完整的示例: http://jsbin.com/tiyote/1/

I'm using the Maki set of icons, but they are very limited and would like to be able to use Font Awesome icons. Is this possible?

Here's the code I'm using to set up the marker icons.

marker.setIcon(L.mapbox.marker.icon({
    'title': jobid,
    'marker-color': '#e32f2f',
    'marker-symbol': 'square'
}));

解决方案

If you've included the font awesome CSS on your page, you can use the L.DivIcon constructor to create custom icon.

<style>
/*
 * Unlike other icons, you can style `L.divIcon` instances with CSS.
 * These styles make each marker a circle with a border and centered
 * text
 */
.fa-icon {color: red;}
</style>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([45.52245801087795, -122.67773866653444], 3);

L.marker([45.52245801087795, -122.67773866653444], {
    icon: L.divIcon({
        // specify a class name that we can refer to in styles, as we
        // do above.
        className: 'fa-icon',
        // html here defines what goes in the div created for each marker
        html: '<i class="fa fa-camera-retro fa-3x"></i>',
        // and the marker width and height
        iconSize: [40, 40]
    })
}).addTo(map);

Here's a full example: http://jsbin.com/tiyote/1/

这篇关于是否可以在Mapbox标记中使用“真棒字体"图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！