Adds headers with images #1663

src/definitions/elements/header.less

@@ -63,17 +63,31 @@
   opacity: @iconOpacity;
   font-size: @iconSize;
   padding-top: @iconOffset;
-
   vertical-align: @iconAlignment;
-  padding-right: (@iconMargin / 2);
 }
 
-/* Only One */
+/* With Text Node */
 .ui.header .icon:only-child {
   display: inline-block;
   padding: 0em;
-  margin-right: (@iconMargin / 2);
-  vertical-align: baseline;
+  margin-right: @iconMargin;
+}
+
+/*-------------------
+        Image
+--------------------*/
+
+.ui.header > .image,
+.ui.header > img {
+  display: inline-block;
+  margin-top: @imageOffset;
+  width: @imageWidth;
+  height: @imageHeight;
+  vertical-align: @imageAlignment;
+}
+.ui.header > .image:only-child,
+.ui.header > img:only-child {
+  margin-right: @imageMargin;
 }
 
 /*--------------
@@ -85,8 +99,16 @@
   vertical-align: @contentAlignment;
 }
 
+/* After Image */
+.ui.header > img + .content,
+.ui.header > .image + .content {
+  padding-left: @imageMargin;
+  vertical-align: @contentImageAlignment;
+}
+
+/* After Icon */
 .ui.header > .icon + .content {
-  padding-left: (@iconMargin / 2);
+  padding-left: @iconMargin;
   display: table-cell;
   vertical-align: @contentIconAlignment;
 }
@@ -190,7 +212,6 @@ h5.ui.header .sub.header {
   font-size: @tinySubHeaderFontSize;
 }
 
-
 /*-------------------
         Icon
 --------------------*/

src/themes/default/elements/header.variables

@@ -24,13 +24,22 @@
 /* Sub Header */
 @subHeaderLineHeight: 1.2em;
 @subHeaderColor: rgba(0, 0, 0, 0.5);
+
+
 /* Icon */
 @iconOpacity: 1;
 @iconSize: 1.5em;
 @iconOffset: @lineHeightOffset;
-@iconMargin: 1rem;
+@iconMargin: 0.75rem;
 @iconAlignment: middle;
 
+/* Image */
+@imageWidth: 2.5em;
+@imageHeight: auto;
+@imageOffset: @lineHeightOffset;
+@imageMargin: @iconMargin;
+@imageAlignment: middle;
+
 /* Label */
 @labelDistance: 0.5rem;
 @labelVerticalAlign: middle;
@@ -38,6 +47,7 @@
 /* Content */
 @contentAlignment: top;
 @contentIconAlignment: middle;
+@contentImageAlignment: middle;
 
 /* Paragraph after Header */
 @nextParagraphDistance: 0em;