how to center icon and text in bulma navbar-item - css

Question

I started playing with Bulma and Buefy framework and I'm stuck with this issue.
I'm trying yo replicate the google apps menù, I've create a navbar-item div and put the foloowing code inside:
<div class="columns">
<div class="column">
<a>
<b-icon
icon="cloud-outline">
</b-icon>
<span>function 1</span>
</a>
</div>
<div class="column">
<b-icon
icon="compass">
</b-icon>
Function 2
</div>
<div class="column">
<b-icon
icon="scatter-plot">
</b-icon>
Function 3
</div>
</div>
the output is:
The result that I want to achieve is the following:
How can I center the icon and move the text to a new line?

Answer 1

You could use flexbox to style your links:
.custom-nav a {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
.custom-nav i {
font-size: 3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" integrity="sha256-1nEaE91OpXJD7M6W5uSiqxhdmrY+lOOTHC1iUxU9Pds=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<div class="columns custom-nav">
<div class="column">
<a href="#">
<i class="fas fa-box-tissue fa-2x"></i>
<span>function 1</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-handshake-slash fa-2x"></i>
<span>function 2</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-head-side-mask fa-2x"></i>
<span>function 3</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-shield-virus fa-2x"></i>
<span>function 3</span>
</a>
</div>
</div>

Answer 2

You can do this with css flex. By using the additional keys:
flex-direction (says what direction the flex should apply)
align-items (aligns the items inside the container)
justify-content (spacing the items inside the container)
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="columns">
<div class="column">
<span>icon</span>
<span>function 1</span>
</div>
<div class="column">
<span>icon</span> Function 2
</div>
<div class="column">
<span>icon</span> Function 3
</div>
</div>