Changing sequence nav buttons from images to icon fonts

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -239,47 +239,22 @@ $sequence--border-color: #C8C8C8;
 
 .sequence-nav-button {
   @extend %ui-depth3;
+  @include transition(all .2s $ease-in-out-quad 0s);
   position: absolute;
   display: block;
   top: 0;
   width: ($baseline*2);
   height: 46px;
-  background-position: center;
-  background-repeat: no-repeat;
-  text-indent: -9999px;
-  overflow: hidden;
-  @include transition(all .2s $ease-in-out-quad 0s);
+  padding: 0;
 
   &.button-previous {
     @include border-radius(35px, 0, 0, 35px);
     @include left(0);
-    background-position: center 15px;
-
-    // CASE: left to right layout
-    @include ltr {
-      background-image: url('../images/sequence-nav/previous-icon.png');
-    }
-
-    // CASE: right to left layout
-    @include rtl {
-      background-image: url('../images/sequence-nav/next-icon.png');
-    }
   }
 
   &.button-next {
     @include border-radius(0, 35px, 35px, 0);
     @include right(0);
-    background-position: center 15px;
-
-    // CASE: left to right layout
-    @include ltr {
-      background-image: url('../images/sequence-nav/next-icon.png');
-    }
-
-    // CASE: right to left layout
-    @include rtl {
-      background-image: url('../images/sequence-nav/previous-icon.png');
-    }
   }
 
   &:hover,

lms/templates/seq_module.html

@@ -2,7 +2,7 @@
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
   <div class="sequence-nav">
-    <button class="sequence-nav-button button-previous">${_('Previous')}</button>
+    <button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
     <nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
       <ol id="sequence-list">
         % for idx, item in enumerate(items):
@@ -27,7 +27,7 @@
         % endfor
       </ol>
     </nav>
-    <button class="sequence-nav-button button-next">${_('Next')}</button>
+    <button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
   </div>
 
   <div class="sr-is-focusable" tabindex="-1"></div>
@@ -43,8 +43,8 @@
   <div id="seq_content"></div>
 
   <nav class="sequence-bottom" aria-label="${_('Section')}">
-    <button class="sequence-nav-button button-previous">${_('Previous')}</button>
-    <button class="sequence-nav-button button-next">${_('Next')}</button>
+    <button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
+    <button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
   </nav>
 </div>