html - 如何使用 W3 Sidebar 和 w3-bar-item w3-button 在按钮下显示文本？

Question

到目前为止我有这个:

<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user-circle"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i></a>   
</div>

如果我在 a 标签中输入文本，文本最终看起来会很困惑，并且不会按照我希望的方式出现在按钮下方。我该如何解决这个问题？

Answer 1

我做了一个codepen这应该与您正在尝试做的相匹配:

这是CSS:

.w3-sidebar {
  width: auto;
}

.w3-bar-block .w3-bar-item {
  /* Overrides default rule */
  text-align: center;
}

.sidebar-icon-label {
  display: block;
  font-size: 10px;
}

您会看到我删除了 w3 侧边栏的内联样式，并将其设置为“自动”，这意味着它将具有其内容的大小。

我为您的图标标签创建了一个新类，并覆盖了原生 w3 规则以将所有内容居中。