CSS Background Image used for important link

CSS background image was used for the home icon at upper right corner
so when user enter high contrast mode or disable bakground image it
disapear so moved it to DOM element

TNL-1382

lms/static/sass/shared/_header.scss

@@ -138,7 +138,7 @@ header.global {
     }
 
     a.user-link {
-      @include padding(6px, 12px, 8px, 35px);
+      @include padding(3px, 12px, 8px, 8px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -146,24 +146,24 @@ header.global {
       letter-spacing: 0;
 
       .avatar {
-        @include background-image(url('../images/small-header-home-icon.png'));
-        background-repeat: no-repeat;
 
         // CASE: right to left layout
-        @include rtl {
-          background-position: top right;
-        }
 
-        height: 26px;
         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;
+      }
 
       &:hover, &:focus {
         .avatar {

lms/templates/navigation.html

@@ -68,12 +68,14 @@ 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}
+          <img alt='${_("Dashboard for:")}' class="avatar" src="${settings.STATIC_URL}images/small-header-home-icon.png">
+          <div>
+          ${user.username}
+          </div>
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
+        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><i class="fa fa-sort-desc" aria-hidden="true"></i></a>
         <ul class="dropdown-menu" aria-label="More Options" role="menu">
           <%block name="navigation_dropdown_menu_links" >
             % if settings.MKTG_URL_LINK_MAP.get('FAQ'):