Font Awesome 5 support, slug class

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;

common/header.html

@@ -1,6 +1,8 @@
 <script type="text/discourse-plugin" version="0.8">
     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', 
@@ -31,11 +33,11 @@
                     
                     function ifProtected() {
                         if(category.read_restricted) {
-                    return h('i.fa.fa-lock');                    
+                            return lockIcon;                    
                         }
                     }
                     
-            return h('div.category-title-header', {
+                    return h('div.category-title-header' + " ." + category.slug, {
                         "attributes" : {
                             "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
                         }