CSS issue of the change on the stage

lms/static/sass/shared/_header.scss

@@ -472,28 +472,46 @@ header.global-new {
         }
       }
     }
-
-    a.user-link {
-      @include padding(6px, 12px, 8px, 35px);
+     a.user-link {
+      @include padding(3px, 12px, 8px, 8px);
       position: relative;
       text-transform: none;
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 0;
 
+      .icon {
+        display: inline-block;
+        @include float(left);
+        margin: 3px 0 -3px 0;
+        font-size: 1.2em;
+        color: $m-gray;
+      }
+
       .avatar {
-        @include background-image(url('../images/small-header-home-icon.png'));
-        background-repeat: no-repeat;
-        height: 26px;
+
+        // CASE: right to left layout
+
         display: inline-block;
         @include left(8px);
         opacity: 0.5;
         overflow: hidden;
-        position: absolute;
         top: 4px;
+        margin-top: 1px;
+        margin-right: 2px;
         @include transition(all 0.15s linear 0s);
         width: 19px;
       }
+      div {
+        margin-top: 3px;
+        float: right;
+        margin-left: 4px;
+      }
+      div {
+        margin-top: 3px;
+        float: right;
+        margin-left: 4px;
+      }
 
       &:hover, &:focus {
         .avatar {

lms/templates/navigation-edx.html

@@ -68,8 +68,11 @@ site_status_msg = get_site_status_msg(course_id)
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
-          <span class="avatar"></span>
-          <span class="sr">${_("Dashboard for:")} </span> ${user.username}
+          <i class="icon fa fa-home" aria-hidden="true"></i>
+          <span class="sr">${_("Dashboard for:")}</span>
+          <div>
+          ${user.username}
+          </div>
         </a>
       </li>
       <li class="primary">