Font Awesome 5 support, slug class

Font Awesome 5 support, slug class

diff --git a/common/common.scss b/common/common.scss
index c68c1fa..a90743b 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,4 +1,4 @@
-.category-title-header {
+div[class^="category-title-header"] {
   padding-top: 60px;
   display: flex;
   text-align: center;
@@ -7,9 +7,10 @@
   .category-title-contents {
     max-width: 500px;
     padding: 40px 40px 30px;
-    i {
+    svg {
+      height: 1.5em;
+      width: 1.1em;
       margin-right: .25em;
-      font-size: 1.5em;
     }
     h1 {
       text-transform: capitalize;
diff --git a/common/header.html b/common/header.html
index 5398d85..85afdb6 100644
--- a/common/header.html
+++ b/common/header.html
@@ -1,66 +1,68 @@
 <script type="text/discourse-plugin" version="0.8">
-  const container = Discourse.__container__;    
-  const { h } = require('virtual-dom');
- 
-  api.createWidget('category-header-widget', {
-      tagName: 'span', 
-      html(attrs, state) {
-      
-      const path = window.location.pathname;
-      let category;
-        
-      const controller = container.lookup('controller:navigation/category');
-      category = controller.get("category");
-     
-      const isException = category && 
-      settings.exceptions.split("|").includes(category.name);
-
-      if(/^\/c\//.test(path)) {
-          const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile;
-          const subCat = (!settings.show_subcategory && category.parentCategory) ? "true" : subCat;
-          const noDesc = (settings.hide_if_no_description && !category.description_text) ? "true" : noDesc;
-          
-          if(!isException && !noDesc && !subCat && !hideMobile) {
-            $("body").addClass("category-header");  
+    const container = Discourse.__container__;    
+    const { h } = require('virtual-dom');
+    const { iconNode } = require("discourse-common/lib/icon-library");
+    let lockIcon = iconNode('lock');
+    
+    api.createWidget('category-header-widget', {
+        tagName: 'span', 
+        html(attrs, state) {
             
-            function catDesc() {
-              if(settings.show_description) {
-                return h('p', category.description_text);
-              }
-            }
-
-            function ifProtected() {
-                if(category.read_restricted) {
-                    return h('i.fa.fa-lock');                    
-                }
-            }
-          
-            return h('div.category-title-header', {
-                "attributes" : {
-                    "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
+            const path = window.location.pathname;
+            let category;
+            
+            const controller = container.lookup('controller:navigation/category');
+            category = controller.get("category");
+            
+            const isException = category && 
+            settings.exceptions.split("|").includes(category.name);
+            
+            if(/^\/c\//.test(path)) {
+                const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile;
+                const subCat = (!settings.show_subcategory && category.parentCategory) ? "true" : subCat;
+                const noDesc = (settings.hide_if_no_description && !category.description_text) ? "true" : noDesc;
+                
+                if(!isException && !noDesc && !subCat && !hideMobile) {
+                    $("body").addClass("category-header");  
+                    
+                    function catDesc() {
+                        if(settings.show_description) {
+                            return h('p', category.description_text);
+                        }
+                    }
+                    
+                    function ifProtected() {
+                        if(category.read_restricted) {
+                            return lockIcon;                    
+                        }
+                    }
+                    
+                    return h('div.category-title-header' + " ." + category.slug, {
+                        "attributes" : {
+                            "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
+                        }
+                    }, h('div.category-title-contents', [
+                    ifProtected(),
+                    h('h1', category.name),   
+                    h('div.category-title-description',catDesc())
+                    ]),
+                    
+                    );
                 }
-              }, h('div.category-title-contents', [
-                      ifProtected(),
-                      h('h1', category.name),   
-                      h('div.category-title-description',catDesc())
-                  ]),
-                  
-              );
-          }
-          } else {
-              $("body").removeClass("category-header");
-          }   
-      }      
-  }),
-
-  api.decorateWidget('category-header-widget:after', helper => {
-      helper.widget.appEvents.on('page:changed', () => {
-          helper.widget.scheduleRerender();
-      });
-  });
-
+            } else {
+                $("body").removeClass("category-header");
+            }   
+        }      
+    }),
+    
+    api.decorateWidget('category-header-widget:after', helper => {
+        helper.widget.appEvents.on('page:changed', () => {
+            helper.widget.scheduleRerender();
+        });
+    });
+    
 </script> 
 
 <script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
-  {{mount-widget widget="category-header-widget"}}
+    {{mount-widget widget="category-header-widget"}}
 </script>
\ No newline at end of file

GitHub sha: 82812ff1