图标在 Leaflet Easy Button 中的位置

Question

我在我的 Leaflet 地图上使用 Leaflet 简易按钮：

<!-- Load LeafletEasyButton -->  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

我也在使用 Google Material 图标：

<!-- Load Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

目标是在我的传单地图上创建一个自定义按钮，如下所示：

L.easyButton('<i class="material-icons" style="font-size:18px;">gps_fixed</i>', function(){
    locateMe();
}, {position: 'bottomright'}).addTo(map);

有效，但我的自定义按钮中的图标位于按钮中心上方：

如何让图标居中？

Answer 1

您可以在 css 中使用 left/top 代码：

 .widget-code {
    display: block;
    height: 18px;
    left: 6px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 6px;
    width: 18px;
}

图标在 Leaflet Easy Button 中的位置

Position of icon in Leaflet Easy Button

javascript

css

leaflet

google-material-icons