Adjust icon header formatting, more visible icon, better alignment with text. Recalculate max icon width size

src/definitions/elements/header.less

@@ -47,6 +47,7 @@
 /* Icon and Content Together */
 .ui.header > .icon {
   display: table-cell;
+  opacity: @iconOpacity;
   font-size: @iconSize;
   padding-top: @iconOffset;
 
@@ -150,10 +151,12 @@ h5.ui.header {
 .ui.icon.header .icon {
   float: none;
   display: block;
+  width: auto;
+  height: auto;
+  padding: 0em;
   font-size: @iconHeaderSize;
   margin: 0em auto @iconHeaderMargin;
   opacity: @iconHeaderOpacity;
-  padding: 0em;
 }
 .ui.icon.header .content {
   display: block;

src/themes/packages/default/elements/header.variables

@@ -10,9 +10,9 @@
 @textTransform: none;
 
 @lineHeight: 1.33em;
-@lineHeightOffset: -(@lineHeight - 1em) / 2;
+@lineHeightOffset: (@lineHeight - 1em) / 2;
 
-@topMargin: ~"calc(2rem + "@lineHeightOffset~")";
+@topMargin: ~"calc(2rem - "@lineHeightOffset~")";
 @bottomMargin: 1rem;
 
 @firstMargin: @lineHeightOffset;
@@ -41,9 +41,10 @@
 @subHeaderColor: rgba(0, 0, 0, 0.5);
 
 /* Icon */
-@iconSize: 1em;
+@iconOpacity: 1;
+@iconSize: 1.5em;
 @iconOffset: @lineHeightOffset;
-@iconMargin: 1em;
+@iconMargin: 1rem;
 @iconAlignment: middle;
 
 /* Label */
@@ -63,7 +64,7 @@
 /* Icon Header */
 @iconHeaderSize: 3em;
 @iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.2em;
+@iconHeaderMargin: 0.25rem;
 @circularHeaderIconSize: 2em;
 @squareHeaderIconSize: 2em;
 

src/themes/packages/default/globals/site.variables

@@ -117,8 +117,8 @@
        Icons
 --------------------*/
 
-/* Max Width of Icon */
-@iconWidth : 1.23em;
+/* Maximum Glyph Width of Icon */
+@iconWidth : 1.18em;
 
 /*-------------------
        Easing