title: Floating action button ionic app
body: <p>I want to add a floating action button into my app and whenever I add it, my localhost seems to show it, but when debugging it on my phone it just says 'add' the value to give it the + symbol.</p>
  
  <p>I only import in my index.html</p>
  
  <pre><code>&lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Itim|Roboto" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"&gt;
  &lt;link rel="stylesheet" href="../mdl/material.min.css"&gt;
  &lt;script src="../mdl/material.js"&gt;&lt;/script&gt;
  &lt;script defer src="https://code.getmdl.io/1.2.1/material.min.js"&gt;&lt;/script&gt;    &lt;link href="css/style.css" rel="stylesheet"&gt;
  
  
  
  
  &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item ng-repeat="task in tasks" class="item-icon-right" ng-class="{complete: task.completed}" ng-click="task.completed = !task.completed"&gt;
          {{task.title}}
          &lt;i class="icon ion-android-create"&gt;&lt;/i&gt;
          &lt;ion-option-button class="button-assertive" ng-click="tasks.splice($index, 1)"&gt;Delete&lt;/ion-option-button&gt;
          &lt;ion-option-button class="button-energized" ng-click="edit(task)"&gt;Edit&lt;/ion-option-button&gt;
          &lt;/ion-item&gt;
          &lt;!--&lt;ion-option-button ng-click="showAlert()"&gt;Alert&lt;/ion-option-button&gt;--&gt;
        &lt;!--&lt;ion-item&gt;
          &lt;select name="singleSelect" ng-model="data.headerColor"&gt;
            &lt;option value="bar-positive"&gt;Blue&lt;/option&gt;
            &lt;option value="bar-calm"&gt;Light blue&lt;/option&gt;
            &lt;option value="bar-balanced"&gt;Green&lt;/option&gt;
            &lt;option value="bar-energized"&gt;Yellow&lt;/option&gt;
            &lt;option value="bar-assertive"&gt;Red&lt;/option&gt;
            &lt;option value="bar-royal"&gt;Purple&lt;/option&gt;
            &lt;option value="bar-dark"&gt;Black&lt;/option&gt;
          &lt;/select&gt;&lt;br&gt;
        &lt;/ion-item&gt;--&gt;
  
      &lt;/ion-list&gt;
  
        &lt;!-- Real floating action button, fixed. It will not scroll with the content --&gt;
        &lt;ion-fab top right edge&gt;
          &lt;button ion-fab mini&gt;&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
          &lt;ion-fab-list&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-facebook"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-twitter"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-vimeo"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-googleplus"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
          &lt;/ion-fab-list&gt;
        &lt;/ion-fab&gt;
  
        &lt;ion-fab right bottom&gt;
          &lt;button ion-fab color="light"&gt;&lt;ion-icon name="arrow-dropleft"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
          &lt;ion-fab-list side="left"&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-facebook"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-twitter"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-vimeo"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
            &lt;button ion-fab&gt;&lt;ion-icon name="logo-googleplus"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
          &lt;/ion-fab-list&gt;
        &lt;/ion-fab&gt;
  
  
  
  
    &lt;/ion-content&gt;
  </code></pre>