Button and Text distance too far - html

Question

I have 4 button and text arrange in each column. ( see picture bellow)
My problem is text title of button is too far from icon.
my css:
.ButtonPDetails {
font-size:10px !important;
overflow: hidden;
white-space: nowrap;
}
.col{
text-align:center !important;
}
.rowL{
padding-bottom:0px !important;
margin:0px !important;
}
.my-icon:before,
.my-icon{
font-size:20px !important;
display:block !important;
line-height: 40px !important;
}
Here my html:
<div class="row rowL">
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-bag my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblPlaceOrder}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-ios-cart my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblAddToCart}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-ios-information-outline my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblInfo}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-android-globe my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblShare}}
</a>
</div>
</div>
i want distance between button and text about 5px.
please help me solve this.

Answer 1

If you don't have access to the generated HTML/CSS that renders the content inside the {{ }} tags, which is the real culprit, then you may be able to work around it by modifying your CSS for my-icon
.my-icon {
font-size:20px !important;
display:block !important;
line-height: 40px !important;
padding: 0px !important;
margin: 0px 0px -20px !important; /* top, right/left, bottom */
}
And remove the CSS inline in the HTML.
The -20px bottom margin may compensate for the padding added by the generated HTML.