Add label icon to code snippet header

_includes/refactor-content.html

@@ -119,14 +119,20 @@
 
       {% if _left contains 'file="' %}
         {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file' %}
       {% else %}
         {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+        {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
+      {% capture _label %}
+        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+      {% endcapture %}
+
       {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header" text-data="'
-          | append: _text
-          | append: '"><button aria-label="copy" data-original-title="'
+          | append: '<div class="code-header">'
+          | append: _label
+          | append: '<button aria-label="copy" data-original-title="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clone"></i></button></div>'
           | append: '<div class="highlight"><code>'

_sass/addon/syntax.scss

@@ -172,24 +172,33 @@ div {
   align-items: center;
   line-height: 1.85rem;
 
-  // text data
-  &::before {
-    content: attr(text-data);
+  // the label
+  span {
     color: var(--lang-badge-color);
-    padding-left: 1em;
+    padding-left: 0.6rem;
+    font-size: 0.85rem;
+
+    &:after {
+      content: attr(text-data);
+      margin-left: 0.3rem;
+      font-weight: 600;
 
       // language
+      @at-root .highlighter-rouge:not([file]) #{&} {
         font-size: 0.75rem;
-    font-weight: 600;
         text-transform: uppercase;
+      }
 
-    // file name
-    @at-root [file] #{&} {
-      font-size: 0.85rem;
-      text-transform: none;
+    } // :after
+
+    @at-root [file] #{&} > i { // center the file icon
+      position: relative;
+      top: 1px;
     }
+
   }
 
+
   // clipboard
   button {
     border: 1px solid var(--code-header-bg);
@@ -208,8 +217,10 @@ div {
 
     &:not([timeout]):hover {
       background-color: gray;
+      > i {
         color: white;
       }
+    }
 
     &:focus {
       outline: none;