title: Onsen-UI Action buttons inside ons-bottom-toolbar
body: <p>I need help on below that I am trying to solve for days.</p>
  
  <p>I am trying to combine blocks fron onsen-ui framework for creating a fixed footbar that will have action buttons with icons and text below, without loads the other pages' content inside it,  like the one I created in</p>
  
  <p></p>
  
  <pre><code>    &lt;ons-list-item style="text-align:center;padding-top:4px;"modifier="action-buttons"&gt;
          &lt;ons-row  class="action"&gt;
            &lt;ons-col class="action-col"&gt; 
              &lt;div class="action-icon"&gt;
                &lt;ons-icon icon="ion-ios-calendar-outline"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
              &lt;div class="action-label"&gt;Check Now&lt;/div&gt;
            &lt;/ons-col&gt;
            ....
  
          &lt;/ons-row&gt;
      &lt;/ons-list-item&gt;
    &lt;/ons-list&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/Cadmos/pen/BybqpR/" rel="nofollow">http://codepen.io/Cadmos/pen/BybqpR/</a>  </p>
  
  <p>The thing on this is that it is not a fixed footer and is not showing until you get at the bottom of the page's content.</p>
  
  <p>I tried to combine to simulate a different version with ons-bottom-toolbar which is for fixed footers but unsuccesfully since it does not show any text below the icons and it loads other page's content inside it (which I do not want) </p>
  
  <pre><code>&lt;ons-bottom-toolbar&gt;
      &lt;div class="tab-bar"&gt;
        &lt;label ng-click="menu.setMainPage('home.html')" class="tab-bar__item"&gt;
          &lt;input type="radio" name="tab-bar-b"&gt;
               &lt;button class="tab-bar__button"&gt;
                 &lt;ons-icon icon="fa-twitter" fixed-width="true"&gt;&lt;/ons-icon&gt;Home
               &lt;/button&gt;
        &lt;/label&gt;
        ......
      &lt;/div&gt;
    &lt;/ons-bottom-toolbar&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/Cadmos/pen/JozmEQ/" rel="nofollow">http://codepen.io/Cadmos/pen/JozmEQ/</a>    </p>
  
  <p>Also it is causing the upper left slide menu to show twice when other page's content is loaded.</p>
  
  <p>ons-bottom-toolbar in its pure format would be perfect for what I want but it is supposed to exist only to display different content of other pages inside the master page (I do not want this) which also makes the menu toolbar to load twice when exists </p>