Ionic: Place text under Icon

I want to create Buttons with icons and text under it. I started with the following:

<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>

with the following css:

.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;
}

but the result of it is ofcourse that the text is written next to the icons of the buttons.

How can i set the text directly under the buttons without padding and how can i make my icons greater and my text smaller?

I was able to get the text under the icons:

<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;
}

BUT: between the icon and the text is too much space. how can i remove that space?