传单：无法在按钮中显示图标

Question

我正在扩展 L.Control 以创建可折叠的属性。但是，我无法在按钮中显示 Awesome 字体图标。

这是代码

<script src="https://kit.fontawesome.com/abc123.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>

L.Control.Attri = L.Control.extend({
          onAdd: function(map) {
            var wrapper = L.DomUtil.create('div', 'leaflet-control-wrapper'),
                attribution = L.DomUtil.create('div', 'leaflet-control-attribution', wrapper),
                button = L.DomUtil.create('input', 'button', wrapper);
            button.type = "button";
            button.style.width = '30px';
            button.style.height = '30px';
            button.style.opacity = '0.5';
            button.style.borderColor = 'grey';
            button.style.borderRadius = '4px';
            button.style.backgroundColor = "#fff"
            button.innerHTML = '<i class="fas fa-info"></i>';

            wrapper.style.display = "flex";
            wrapper.style.alignItems = "center";   

            attribution.style.visibility = 'hidden';
            attribution.innerHTML = attri;
        
            button.onclick = function(){
              if(attribution.style.visibility == "visible")
                attribution.style.visibility = 'hidden';
              else
                attribution.style.visibility = 'visible';
            }
            return wrapper;            
          },
      
          onRemove: function(map) {
            // Nothing to do here
          }
        });
        map.addControl(new L.Control.Attri({position:'bottomright', metric: false}))

已编辑： 添加了传单和 fontawesome 版本，添加了 button.innerHTML

Answer 1

我设法使用其他类型的 html 标签而不是 'input'。从 this post 开始，输入无法接受 innerHTML，按钮文本值将被视为字符串。因此，这是更新后的代码：

'button' 而不是 'input'

button = L.DomUtil.create('button', 'leaflet-button', wrapper);

传单：无法在按钮中显示图标

leaflet: Unable to display icon in the button

javascript

button

leaflet

icons