The Ionic fab button does not display correctly in the application.

Question

I am trying to enable fabo buttons (the FAB button in the link) on the main page of my application. but it just displays the usual square button buttons. could you help identify.

My html

<ion-content>
       <a ng-repeat="area in areaArray | orderBy: 'name'" class="item item-thumbnail-left" href="#">
            <img ng-src={{area["image"]}} ui-sref="tabs.projects({area:area['name']})">
            <h2>{{ area["name"]}}</h2>
      <button class="button button-fab-center button-balanced" ui-sref="tabs.projects({area:area['name'], Project_Status:'Green'})">
                     {{ area["active"]}}</i>
         </button>
         <button class="button button-fab-center button-assertive" ui-sref="tabs.projects({area:area['name'], Project_Status:'Red'})">
                      {{ area["alert"]}}</i>
          </button>
          <button class="button button-fab-center button-energized" ui-sref="tabs.projects({area:area['name'], Project_Status:'Amber'})">
                     {{ area["Amber"]}}</i>
         </button>
     </a>
</ion-content>

This is my conclusion:

Answer 1

I have the same problems, but they are easy to solve, do not worry :)

You just need to have a FAB button

<ion-fab right bottom>
  <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

IMPORTANT You need to upgrade the ion version to at least 2.0.0-rc0, and you will see your beautiful FAB button :)

Docs here