按钮图标不可点击..但按钮的其余部分为

Question

基本上我在自定义标题中有一个按钮我正在为Wordpress网站构建。 里面的图标来自Fontawesome，CDN设置等。以下是代码：

<button onclick="menu()" style="background-color:#fff; color:#232323;" class="dd-menubtn"><i class="fas fa-bars"></i></button>

function menu() {
    document.getElementById("menu-dropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dd-menubtn')) {

        var dropdowns = document.getElementsByClassName("dropdownmenu-content");
        var i;

        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];

            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

简而言之，更宽的按钮区域（由于wordpress样式我似乎无法摆脱）是可点击的并激活下拉菜单，但Icon本身（汉堡菜单的东西）不是。

我错过了什么吗？