Update room features markup to use font awesome

css/converse.css

@@ -6249,10 +6249,6 @@ body.reset {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           padding: 0.3em 0;
           font-weight: bold; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
-          font-size: 12px;
-          width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           width: 100%; }
@@ -6284,6 +6280,12 @@ body.reset {
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
+              width: 100%; }
+              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
+              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
+                color: #777; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
             cursor: default;
@@ -6293,10 +6295,9 @@ body.reset {
             padding: 0.2em 0.5em 0.2em 0;
             text-overflow: ellipsis;
             white-space: nowrap; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
-              padding-right: 0.5em; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
+              margin-right: 0.5em; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
               font-size: 10px; }

css/inverse.css

@@ -6366,10 +6366,6 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           padding: 0.3em 0;
           font-weight: bold; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
-          font-size: 14px;
-          width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           width: 100%; }
@@ -6401,6 +6397,12 @@ body {
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
+              width: 100%; }
+              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
+              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
+                color: #777; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
             cursor: default;
@@ -6410,10 +6412,9 @@ body {
             padding: 0.2em 0.5em 0.2em 0;
             text-overflow: ellipsis;
             white-space: nowrap; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
-              padding-right: 0.5em; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
+              margin-right: 0.5em; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
               font-size: 10px; }

sass/_chatrooms.scss

@@ -153,15 +153,6 @@
                         font-weight: bold;
                     }
 
-                    ul {
-                        li {
-                            &.feature {
-                                font-size: $font-size-small;
-                                width: 100%;
-                            }
-                        }
-                    }
-
                     .chatroom-features {
                         width: 100%;
                         .feature {
@@ -194,6 +185,12 @@
                         }
                         &.features-list {
                             padding-top: 0;
+                            .feature {
+                                width: 100%;
+                                .fa {
+                                    color: $text-color;
+                                }
+                            }
                         }
                         li {
                             cursor: default;
@@ -203,8 +200,8 @@
                             padding: 0.2em 0.5em 0.2em 0;
                             text-overflow: ellipsis;
                             white-space: nowrap;
-                            [class^="icon-"], [class*=" icon-"] {
-                                padding-right: 0.5em;
+                            .fa {
+                                margin-right: 0.5em;
                             }
                             &.feature {
                                 font-size: $font-size-tiny;

src/templates/chatroom_features.html

@@ -3,42 +3,42 @@
 {[ } ]}
 <ul class="features-list">
 {[ if (o.passwordprotected) { ]}
-<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="icon-lock"></span>{{{ o.label_passwordprotected }}}</li>
+<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="fa fa-lock"></span>{{{ o.label_passwordprotected }}}</li>
 {[ } ]}
 {[ if (o.unsecured) { ]}
-<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ o.label_unsecured }}}</li>
+<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="fa fa-unlock"></span>{{{ o.label_unsecured }}}</li>
 {[ } ]}
 {[ if (o.hidden) { ]}
-<li class="feature" title="{{{ o.tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ o.label_hidden }}}</li>
+<li class="feature" title="{{{ o.tt_hidden }}}"><span class="fa fa-eye-slash"></span>{{{ o.label_hidden }}}</li>
 {[ } ]}
 {[ if (o.public_room) { ]}
-<li class="feature" title="{{{ o.tt_public }}}"><span class="icon-eye"></span>{{{ o.label_public }}}</li>
+<li class="feature" title="{{{ o.tt_public }}}"><span class="fa fa-eye"></span>{{{ o.label_public }}}</li>
 {[ } ]}
 {[ if (o.membersonly) { ]}
-<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="icon-address-book"></span>{{{ o.label_membersonly }}}</li>
+<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="fa fa-address-book"></span>{{{ o.label_membersonly }}}</li>
 {[ } ]}
 {[ if (o.open) { ]}
-<li class="feature" title="{{{ o.tt_open }}}"><span class="icon-globe"></span>{{{ o.label_open }}}</li>
+<li class="feature" title="{{{ o.tt_open }}}"><span class="fa fa-globe"></span>{{{ o.label_open }}}</li>
 {[ } ]}
 {[ if (o.persistent) { ]}
-<li class="feature" title="{{{ o.tt_persistent }}}"><span class="icon-save"></span>{{{ o.label_persistent }}}</li>
+<li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
 {[ } ]}
 {[ if (o.temporary) { ]}
-<li class="feature" title="{{{ o.tt_temporary }}}"><span class="icon-snowflake"></span>{{{ o.label_temporary }}}</li>
+<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake"></span>{{{ o.label_temporary }}}</li>
 {[ } ]}
 {[ if (o.nonanonymous) { ]}
-<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
+<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
 {[ } ]}
 {[ if (o.semianonymous) { ]}
-<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="icon-info"></span>{{{ o.label_semianonymous }}}</li>
+<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="fa fa-user-secret"></span>{{{ o.label_semianonymous }}}</li>
 {[ } ]}
 {[ if (o.moderated) { ]}
-<li class="feature" title="{{{ o.tt_moderated }}}"><span class="icon-legal"></span>{{{ o.label_moderated }}}</li>
+<li class="feature" title="{{{ o.tt_moderated }}}"><span class="fa fa-gavel"></span>{{{ o.label_moderated }}}</li>
 {[ } ]}
 {[ if (o.unmoderated) { ]}
-<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="icon-info"></span>{{{ o.label_unmoderated }}}</li>
+<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="fa fa-info-circle"></span>{{{ o.label_unmoderated }}}</li>
 {[ } ]}
 {[ if (o.mam_enabled) { ]}
-<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="icon-database"></span>{{{ o.label_mam_enabled }}}</li>
+<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="fa fa-database"></span>{{{ o.label_mam_enabled }}}</li>
 {[ } ]}
 </ul>