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

【问题标题】：leaflet: Unable to display icon in the button传单：无法在按钮中显示图标
【发布时间】：2021-09-30 02:12:42
【问题描述】：

我正在扩展 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}))

已编辑：添加了传单和字体，添加了 button.innerHTML

【问题讨论】：

那么您尝试做什么来显示图标？出了什么问题？您是否在浏览器控制台中看到任何相关的错误消息？
图标在我用 div innerHTML 显示时显示，浏览器控制台没有显示任何错误。
您可以编辑您的帖子以显示您尝试过的内容吗？您的代码可以正常工作，但它与加载 Font Awesome（哪个版本？）或为按钮设置图标（哪个？）无关。很多事情可能会出错，但由于无法看到您是如何尝试使其工作的，因此很难建议如何解决它。
我已经包含了更多关于我正在使用的版本和按钮的 innerHTML 的信息。

标签： javascript button leaflet icons

【解决方案1】：

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

“按钮”而不是“输入”

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

【讨论】：