Add icon sizes - Refs #1434

modules/system/assets/css/styles.css

@@ -1004,6 +1004,11 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap
 [class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}
 [class^="oc-icon-"]:before,[class*=" oc-icon-"]:before{display:inline-block;margin-right:8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;vertical-align:baseline}
 [class^="oc-icon-"].empty:before,[class*=" oc-icon-"].empty:before{margin-right:0}
+.icon-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}
+.icon-2x{font-size:2em}
+.icon-3x{font-size:3em}
+.icon-4x{font-size:4em}
+.icon-5x{font-size:5em}
 @font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Light.eot');src:url('../../../backend/assets/font/OpenSans-Light.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Light.svg#open_sanslight') format('svg'),url('../../../backend/assets/font/OpenSans-Light.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Light.ttf') format('truetype');font-style:normal;font-weight:300}
 @font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Regular.eot');src:url('../../../backend/assets/font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Regular.svg#open_sansregular') format('svg'),url('../../../backend/assets/font/OpenSans-Regular.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400}
 @font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Semibold.eot');src:url('../../../backend/assets/font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Semibold.svg#open_sanssemibold') format('svg'),url('../../../backend/assets/font/OpenSans-Semibold.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Semibold.ttf') format('truetype');font-style:normal;font-weight:600}

modules/system/assets/ui/docs/icon.md

@@ -18,25 +18,37 @@ You can also inject an icon to an existing element using the `oc-` prefix.
 
 > **Note**: Icon classes are echoed via CSS :before.
 
+### Icon sizes
+
+To increase icon sizes relative to their container, use the `icon-lg` (33% increase), `icon-2x`, `icon-3x`, `icon-4x`, or `icon-5x` classes.
+
+    <i class="fa icon-camera-retro icon-5x"></i> icon-5x
+    <i class="fa icon-camera-retro icon-4x"></i> icon-4x
+    <i class="fa icon-camera-retro icon-3x"></i> icon-3x
+    <i class="fa icon-camera-retro icon-2x"></i> icon-2x
+    <i class="fa icon-camera-retro icon-lg"></i> icon-lg
+
+> If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
+
 ### With buttons
 
-    <a class="btn btn-default" href="#">
+    <a class="btn btn-default oc-icon-refresh" href="#">
-        <i class="icon-refresh"></i> Refresh
+        Refresh
     </a>
-    <a class="btn btn-success" href="#">
+    <a class="btn btn-success oc-icon-shopping" href="#">
-        <i class="icon-shopping-cart icon-large"></i> Checkout
+        Checkout
     </a>
-    <a class="btn btn-primary" href="#">
+    <a class="btn btn-primary oc-icon-comment" href="#">
-        <i class="icon-comment"></i> Comment
+        Comment
     </a>
-    <a class="btn btn-danger" href="#">
+    <a class="btn btn-danger oc-icon-trash" href="#">
-        <i class="icon-trash icon-large"></i> Delete
+        Delete
     </a>
-    <a class="btn btn-default" href="#">
+    <a class="btn btn-default oc-icon-cog" href="#">
-        <i class="icon-cog"></i> Settings
+        Settings
     </a>
-    <a class="btn btn-info" href="#">
+    <a class="btn btn-info oc-icon-info" href="#">
-        <i class="icon-info"></i> More Info
+        More Info
     </a>
 
 ## Available icons

modules/system/assets/ui/less/icon.less

@@ -66,4 +66,19 @@
     &.empty:before {
         margin-right: 0;
     }
-}
+}
+
+//
+// Icon Sizes
+//
+
+// Makes the font 33% larger relative to the icon container
+.icon-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.icon-2x { font-size: 2em; }
+.icon-3x { font-size: 3em; }
+.icon-4x { font-size: 4em; }
+.icon-5x { font-size: 5em; }

modules/system/assets/ui/storm.css

@@ -1127,6 +1127,11 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap
 [class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}
 [class^="oc-icon-"]:before,[class*=" oc-icon-"]:before{display:inline-block;margin-right:8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;vertical-align:baseline}
 [class^="oc-icon-"].empty:before,[class*=" oc-icon-"].empty:before{margin-right:0}
+.icon-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}
+.icon-2x{font-size:2em}
+.icon-3x{font-size:3em}
+.icon-4x{font-size:4em}
+.icon-5x{font-size:5em}
 .caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
 .dropdown{position:relative}
 .dropdown-toggle:focus{outline:0}