我有一个按钮，下面有图标和文字。它只能在图标和文字周围点击，而不能在上面点击。

scss文件

.navbar {
  background-color: #292929;
 height: 70px;
}

.button {
  display: flex;
  flex-direction: column;
  background-color: transparent !important;
  color: white !important;
  margin-left: 100px;
  margin-top: 5px;
  width: 60px;
  height: 60px;
  padding: 10px;  
}

.bx {
  margin-left: 15px;
  font-size: 30px;
}

.icon {
  flex: 1;
}

.text {
  text-align: center;
  color: white;
  font-size: 12px;
  margin-left: 4px;
}

/* Add hover effect to the button */
.button:hover .text, 
.button:hover .bx {
  color: red;
}

超文本标记语言

<nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-start">
        <!-- Button on the left side -->
        <button class="button" (click)="logInfo()">
          <span class="icon">
            <i class='bx bx-file-find'></i>
          </span>
          <a href="#" class="text">Scan</a>
        </button>
      </div>
      <div class="navbar-end">
        <!-- Text on the far right side -->
        <div class="navbar-item is-size-5 has-text-white">test</div>
        <img src="assets/favicon.ico" />
      </div>
    </nav>

我添加了填充和边距、指针事件：无，但这不起作用。更改显示为块，但这导致文本移动到图标的右侧。我尝试使用不同的图标和z索引：999;但这不是解决办法。