Ionique: Place le texte sous l'Icône

Je veux créer des Boutons avec des icônes et du texte en dessous. J'ai commencé avec les éléments suivants:

<ion-view view-title="Title">
    <ion-content>
        <div class="list">
            <a ng-repeat="image in images" class="item">
                <div class="container">
                    <img ng-src="{{image}}" />
                </div>
                <div class="container-side-menu">
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-eye"></i> preview
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-crop"></i> crop
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-android-options"></i> styles
                        </button>
                    </div>
                    <div>
                        <button class="button button-clear">
                            <i class="icon ion-social-tumblr"></i> text
                        </button>
                    </div>
                </div>
            </a>
        </div>
    </ion-content>
</ion-view>

avec le code css suivant:

.container {
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/frame_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 245px;
    height: 325px;
    position: relative;
}

.container img {
    width: 87.5%;
    height: 68.5%;
    position: absolute;
    top: 0;
    bottom: 13%;
    left: 0;
    right: 0;
    margin: auto;
}

.container-side-menu {
    width: 10%;
    height: 50%;
    top: 20%;
    right: 15px;
    position: absolute;
    margin: auto;
}

.container-side-menu .button {
    color: white !important;
}

mais le résultat est bien sûr que le texte est écrit à côté des icônes de boutons.

Comment puis-je mettre le texte directement sous les boutons sans rembourrage et comment puis-je faire mes icônes plus et mon texte plus petit?

J'ai réussi à avoir le texte sous les icônes:

<ion-view view-title="Title">
    <ion-content>
        <div class="list">
            <a ng-repeat="image in images" class="item">
                <div class="container">
                    <img ng-src="{{image}}" />
                </div>
                <div class="container-side-menu">
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-eye"></i> 
                            <span>preview</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-crop"></i> 
                            <span>crop</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-android-options"></i> 
                            <span>styles</span>
                        </button>
                    </div>
                    <div>
                        <button class="button button-icon">
                            <i class="icon ion-social-tumblr"></i> 
                            <span>text</span>
                        </button>
                    </div>
                </div>
            </a>
        </div>
    </ion-content>
</ion-view>

css:

.container-side-menu div {
    vertical-align: top;
    text-align: center;
}

.container-side-menu span {
    display: block;
    font-size: 10px;
}

MAIS: entre l'icône et le texte est trop de place. comment puis-je supprimer cet espace?