Position of icon in Leaflet Easy Button

Question

I'm using Leaflet easy button on my Leaflet map:

<!-- 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>

I'm also using Google Material icons:

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

The goal is to create a custom button on my leaflet map like this:

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

It works, but icon in my custom button is positioned above button center:

How can I center the icon?

vertical aligning material icons. [check here](https://github.com/google/material-design-icons/issues/206) — User863, May 17 '19 at 08:08
@Aswin Kumari I added ```display: inline-flex; vertical-align: middle;``` and now It is a bit too low, but still better than before. Is there any way to fine tune it? — Marin Leontenko, May 17 '19 at 09:02

score 1 · Accepted Answer · edited May 17 '19 at 09:48

1

you can use left/top in css code:

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

edited May 17 '19 at 09:48

kboul

13,836
5
42
53

answered May 17 '19 at 09:42

Ahmadreza Paripaykar

26
2

1

Good idea. padding-bottom worked for me: `````` – Marin Leontenko May 17 '19 at 12:14

Position of icon in Leaflet Easy Button

1 Answers1