zurb foundation 5 icon bar Text Misaligned - html

Question

I have a weird issue with the text under the icon bar not being centered under the icons.
code example
<div class="row">
<div class="small-12 columns">
<div class="icon-bar five-up small">
<a class="item" a href="/index.html">
<i class="fi-home"></i>
<div>
<label>Home</label>
</div>
</a>
<a class="item" a href="/cart.html">
<i class="fi-shopping-cart"></i>
<div>
<label>Cart</label>
</div>
</a>
<a class="item" a href="/pages/about-us">
<i class="fi-info"></i>
<div>
<label>About</label>
</div>
</a>
<a class="item" a href="/pages/contact-us">
<i class="fi-mail"></i>
<div>
<label>Contact</label>
</div>
</a>
<a class="item" a href="/account/login">
<i class="fi-torso"></i>
<div>
<label>Account</label>
</div>
</a>
</div>
</div>
</div>
I've tried to center the labels with no luck. Has anyone had any issue with this before. Can't post a screenshot since it's a new account. but the contact label and account label seem to start on the left of the icon and go right instead of the start of the actual icon box.

Answer 1

Ok your problems is about CSS in foundation. the property "padding" here:
.icon-bar > * {
font-size: 1rem;
padding: 1.25rem;
}
To fix that, you need to add a media query for mobile. Maybe something like:
#media (max-width: 400px) {
a.item {
padding-left: 0;
padding-right: 0;
position: relative;
text-align: center;
}
}
Change the value 400px of your resolution. If its doesn't work because CSS style is overrite by another.. change padding-left and padding-right for:
padding-left: 0 !important;
padding-right: 0 !important;
Check this JSFiddle