studio - plumbs in Font Awesome icons into header dropdown menus and user nav

cms/static/sass/elements/_header.scss

@@ -131,6 +131,11 @@
     text-overflow: ellipsis;
     @include font-size(16);
     font-weight: 600;
+
+    [class^="icon-"] {
+      @include font-size(36);
+      @include lh(36);
+    }
   }
 }
 
@@ -219,10 +224,11 @@
   .nav-item {
     position: relative;
 
-    .icon-expand {
+    .icon-caret-down {
       @include font-size(14);
       @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
       display: inline-block;
+      vertical-align: middle;
       margin-left: 2px;
       opacity: 0.5;
       color: $gray-l2;
@@ -230,7 +236,7 @@
 
     &:hover {
 
-      .icon-expand {
+      .icon-caret-down {
         color: $blue;
         opacity: 1.0;
       }

cms/templates/widgets/header.html

@@ -21,7 +21,7 @@
 
         <ol>
           <li class="nav-item nav-course-courseware">
-            <h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -36,7 +36,7 @@
           </li>
 
           <li class="nav-item nav-course-settings">
-            <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -51,7 +51,7 @@
           </li>
 
           <li class="nav-item nav-course-tools">
-            <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title">Tools <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -76,10 +76,10 @@
           <li class="nav-item nav-account-username">
             <a href="#" class="title">
               <span class="account-username">
-                <i class="ss-icon ss-symbolicons-standard icon-user">&#x1F464;</i>
+                <i class="icon-user"></i>
                 ${ user.username }
               </span>
-              <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
+              <i class="icon-caret-down"></i>
             </a>
 
             <div class="wrapper wrapper-nav-sub">