fix(buttons): centering icons on <a> tag buttons. Closes #2074

ionic-team · Sep 5, 2014 · 69442d5 · 69442d5
1 parent 5605317
commit 69442d5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -235,6 +235,13 @@ input.button.button-block  {
 
 a.button {
   text-decoration: none;
+
+  .icon:before,
+  &.icon:before,
+  &.icon-left:before,
+  &.icon-right:before {
+    margin-top: 2px;
+  }
 }
 
 .button.disabled,

diff --git a/test/css/buttons-link-icon.html b/test/css/buttons-link-icon.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Buttons</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      body {
+        position: absolute;;
+      }
+    </style>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Buttons: &lt;link&gt; block w/ icons</h1>
+    </header>
+
+    <div class="content has-header padding">
+      <button class="button">
+        <i class="icon ion-loading-c"></i> Loading...
+      </button>
+      <br />
+      <button class="button icon-left ion-home">Home</button>
+      <br />
+      <button class="button icon-left ion-star button-positive">Favorites</button>
+      <br />
+      <a class="button icon-right ion-chevron-right button-calm">Learn More</a>
+      <br />
+      <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
+      <br />
+      <button class="button icon ion-gear-a"></button>
+      <br />
+      <a class="button button-icon icon ion-settings"></a>
+      <br />
+      <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
+    </div>
+
+  </body>
+</html>