title: Ionic: Place text under Icon
body: <p>I want to create Buttons with icons and text under it. I started with the following:</p>
  
  <pre><code>&lt;ion-view view-title="Title"&gt;
      &lt;ion-content&gt;
          &lt;div class="list"&gt;
              &lt;a ng-repeat="image in images" class="item"&gt;
                  &lt;div class="container"&gt;
                      &lt;img ng-src="{{image}}" /&gt;
                  &lt;/div&gt;
                  &lt;div class="container-side-menu"&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-eye"&gt;&lt;/i&gt; preview
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-crop"&gt;&lt;/i&gt; crop
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-android-options"&gt;&lt;/i&gt; styles
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-clear"&gt;
                              &lt;i class="icon ion-social-tumblr"&gt;&lt;/i&gt; text
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>with the following css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>but the result of it is ofcourse that the text is written next to the icons of the buttons. </p>
  
  <p>How can i set the text directly under the buttons without padding and how can i make my icons greater and my text smaller?</p>
  
  <p>I was able to get the text under the icons:</p>
  
  <pre><code>&lt;ion-view view-title="Title"&gt;
      &lt;ion-content&gt;
          &lt;div class="list"&gt;
              &lt;a ng-repeat="image in images" class="item"&gt;
                  &lt;div class="container"&gt;
                      &lt;img ng-src="{{image}}" /&gt;
                  &lt;/div&gt;
                  &lt;div class="container-side-menu"&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-eye"&gt;&lt;/i&gt; 
                              &lt;span&gt;preview&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-crop"&gt;&lt;/i&gt; 
                              &lt;span&gt;crop&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-android-options"&gt;&lt;/i&gt; 
                              &lt;span&gt;styles&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button class="button button-icon"&gt;
                              &lt;i class="icon ion-social-tumblr"&gt;&lt;/i&gt; 
                              &lt;span&gt;text&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container-side-menu div {
      vertical-align: top;
      text-align: center;
  }
  
  .container-side-menu span {
      display: block;
      font-size: 10px;
  }
  </code></pre>
  
  <p>BUT: between the icon and the text is too much space. how can i remove that space?</p>