center div with Font Awesome - css

Question

I have a site I am making with Bootstrap 3.3.5. I would like to center the div with the icons and I also want the icons centered, like what text-align: center; would do if it was just text and not the Fonat Awesome icons. This is what I have tried so far, the css is in my css folder and in the custom.css page.
#media (min-width: 992px) {
.col-md-1-5 { width: 20%; }
.col-md-2-5 { width: 40%; }
.col-md-3-5 { width: 60%; }
.col-md-4-5 { width: 80%; }
.col-md-5-5 { width: 100%; }
}
#media (min-width: 1200px) {
.col-lg-1-5 { width: 20%; }
.col-lg-2-5 { width: 40%; }
.col-lg-3-5 { width: 60%; }
.col-lg-4-5 { width: 80%; }
.col-lg-5-5 { width: 100%; }
}
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
}
[class^=col-] {
margin-bottom: 2rem;
}
<div class="row show-grid">
<div class="col-sm-6 col-md-4-5 col-lg-1-5 text-center"><span class=""><a href="https://play.google.com/store/apps/details?id=com.nationalkitchencabinets.kitchensolutions" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-5-5 col-lg-1-5 text-center"><span class=""><a href="https://appsto.re/us/IxCMbb.i" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-android fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="mailto:info#nationalkitchencabinets.com">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="https://www.facebook.com/NationalKitchenCabinets/" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="tel:[phone]">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
</div>
This is what it looks like now, the icons are left aligned,

Answer 1

The elements that you are trying to align are block elements, so you simply need to use margin: 0 auto rather than text-align: center.
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
text-align: center;
}
Should be:
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
margin: 0 auto;
}
I've created a Bootply showcasing this here.
UPDATE:
A temporary hack to have the icons display next to each other on mobile would be something like the following:
#media (max-width: 500px) {
.col-sm-6 {
width: 20% !important;
float: left;
}
}
However, this is a workaround, and you should really simply set a smaller column width. Bootstrap columns always add up to 12, and col-sm-6 refers to '6 columns on small devices'. Typically, you'd use something like col-sm-2 col-md-12 col-lg-12 to represent that each element should take up the full width on medium and large devices, and only take up one-sixth of the width on small devices. Of course, 12 isn't divisible by 5, so you'd have to come up with your own workaround, such as centralisation or padding ;)
A secondary fiddle showcasing the hack is available here.
Hope this helps!