Merge pull request #6956 from edx/ahsan/tnl-1382-css-background-used-home-link

CSS Background Image used for important link

lms/static/sass/shared/_header.scss

@@ -125,7 +125,7 @@ header.global {
         > a {
           @include border-radius(0, 4px, 4px, 0);
           @include border-left(none);
-          padding: 5px 8px 7px 8px;
+          padding: 3px 8px 9px 8px;
 
           &.shopping-cart {
             border-radius: 4px;
@@ -138,32 +138,45 @@ 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;
       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;
 
         // 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;
+      }
+      div {
+        margin-top: 3px;
+        float: right;
+        margin-left: 4px;
+      }
 
       &:hover, &:focus {
         .avatar {

lms/templates/navigation.html

@@ -68,12 +68,15 @@ 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">
-        <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'):