diff --git a/scss/_tabs.scss b/scss/_tabs.scss
index 6d9d16852c..91a6649785 100644
--- a/scss/_tabs.scss
+++ b/scss/_tabs.scss
@@ -130,7 +130,9 @@
 }
 
 .tabs-icon-top > .tabs .tab-item,
-.tabs-icon-bottom > .tabs .tab-item {
+.tabs-icon-top.tabs .tab-item,
+.tabs-icon-bottom > .tabs .tab-item,
+.tabs-icon-bottom.tabs .tab-item {
   font-size: $tabs-text-font-size-side-icon;
   line-height: $tabs-text-font-size;
 }
@@ -142,7 +144,9 @@
   font-size: $tabs-icon-size;
 }
 
+.tabs-icon-left.tabs .tab-item,
 .tabs-icon-left > .tabs .tab-item,
+.tabs-icon-right.tabs .tab-item,
 .tabs-icon-right > .tabs .tab-item {
   font-size: $tabs-text-font-size-side-icon;
 
@@ -157,15 +161,18 @@
   }
 }
 
-.tabs-icon-left > .tabs .tab-item .icon {
+.tabs-icon-left > .tabs .tab-item .icon,
+.tabs-icon-left.tabs .tab-item .icon {
   padding-right: 3px;
 }
 
-.tabs-icon-right > .tabs .tab-item .icon {
+.tabs-icon-right > .tabs .tab-item .icon,
+.tabs-icon-right.tabs .tab-item .icon {
   padding-left: 3px;
 }
 
-.tabs-icon-only > .tabs .icon {
+.tabs-icon-only > .tabs .icon,
+.tabs-icon-only.tabs .icon {
   line-height: inherit;
 }
 
diff --git a/test/css/tabs-and-cards.html b/test/css/tabs-and-cards.html
new file mode 100644
index 0000000000..f406381b54
--- /dev/null
+++ b/test/css/tabs-and-cards.html
@@ -0,0 +1,53 @@
+<html ng-app>
+  <head>
+    <meta charset="utf-8">
+    <title>Tabs: Top Icons</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">
+    <script src="../../config/lib/js/angular/angular.js"></script>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Tab Bars & Cards</h1>
+    </header>
+
+    <main class="padding has-header">
+      <div class="{{iconTypeMain}}">
+        <div class="tabs">
+          <a class="tab-item" href="#">
+            <i class="icon ion-game-controller-a"></i>
+            {{iconTypeMain}}
+          </a>
+        </div>
+        <div class="pane">
+          <div class="list card">
+            Main Icon Type
+            <label class="item item-input">
+              <input type="text" ng-model="iconTypeMain" ng-init="iconTypeMain = 'tabs-icon-top'">
+            </label>
+
+            <br/>
+            Card Icon Type
+            <label class="item item-input">
+              <input type="text" ng-model="iconTypeSecondary" ng-init="iconTypeSecondary = 'tabs-icon-left'">
+            </label>
+
+            <br/>
+            <div class="item tabs {{iconTypeSecondary}} tabs-positive">
+              <a disabled class="tab-item">
+                <i class="icon ion-close"></i>
+                {{iconTypeSecondary}}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </main>
+
+    <style>
+main { top: 0; left: 0; right: 0; bottom: 0; position: absolute; }
+    </style>
+  </body>
+</html>
