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

Question

So far I have this:

<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>

If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?

Answer 1

I made a codepen that should match what you are attempting to do :

Here is the 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;
}

You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.

I created a new class for your icon labels, and overrode a native w3 rule to center everything.

Answer 2

Update your code Like this

<style>
    i{ width:20px;
    height:20px;
    display:inline-block; }
    a{ float:left; width:100%; text-align:center; }
    span{ float:left; width:100%; text-align:center; }
</style>

    <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><span>Text 1</span></a>
                    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i><span>Text 1</span></a>
                    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i><span>Text 1</span></a>    
    </div>