From f128629f488b1db4905498aacfeec6c147c50a25 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Thu, 8 Jan 2015 21:28:33 -0500
Subject: [PATCH] fixing styling and class syntax (to new FA-based classes) for
 missing UI elements

---
 .../js/spec/views/xblock_validation_spec.js   |  4 ++--
 .../js/views/overview_assignment_grader.js    |  2 +-
 cms/static/js/views/xblock_validation.js      |  2 +-
 cms/static/sass/views/_checklists.scss        |  2 +-
 cms/static/sass/views/_video-upload.scss      |  4 ++--
 .../js/metadata-list-entry.underscore         |  2 +-
 .../js/mock/mock-index-page.underscore        |  2 +-
 cms/templates/js/system-feedback.underscore   |  2 +-
 .../js/xblock-validation-messages.underscore  |  2 +-
 cms/templates/videos_index.html               |  2 +-
 .../djangoapps/third_party_auth/provider.py   |  8 +++----
 .../discussion_thread_list_view_spec.coffee   |  8 +++----
 .../static/coffee/src/discussion/utils.coffee |  2 +-
 .../views/discussion_thread_list_view.coffee  |  6 ++---
 common/static/js/utils/rwd_header_footer.js   |  2 +-
 common/templates/course_modes/choose.html     |  4 ++--
 common/templates/js/image-modal.underscore    | 18 +++++++--------
 .../student_account/test/test_views.py        | 12 +++++-----
 .../src/instructor_dashboard/util.coffee      |  6 ++---
 .../js/spec/shoppingcart/shoppingcart_spec.js |  6 ++---
 .../js/spec/student_account/login_spec.js     |  4 ++--
 .../js/spec/student_account/register_spec.js  |  4 ++--
 lms/static/js/views/cohorts.js                |  2 +-
 lms/static/sass/course/wiki/_wiki.scss        |  3 ---
 lms/static/sass/discussion/_discussion.scss   | 22 +++++++++----------
 .../sass/discussion/elements/_navigation.scss |  6 ++---
 lms/static/sass/multicourse/_dashboard.scss   | 12 +++++-----
 lms/static/sass/views/_shoppingcart.scss      | 14 ++++++------
 lms/static/sass/views/_verification.scss      | 15 ++++++++-----
 lms/templates/courseware/course_about.html    |  2 +-
 .../add-cohort-form.underscore                |  2 +-
 .../cohort-editor.underscore                  |  2 +-
 .../instructor_dashboard_2/cohorts.underscore |  4 ++--
 lms/templates/login.html                      |  2 +-
 lms/templates/register.html                   |  2 +-
 lms/templates/shoppingcart/shopping_cart.html |  4 ++--
 lms/templates/verify_student/error.underscore |  2 +-
 .../verify_student/face_photo_step.underscore |  2 +-
 .../verify_student/id_photo_step.underscore   |  2 +-
 .../verify_student/intro_step.underscore      | 10 ++++-----
 .../make_payment_step.underscore              | 10 ++++-----
 .../payment_confirmation_step.underscore      | 10 ++++-----
 .../verify_student/webcam_photo.underscore    |  2 +-
 43 files changed, 118 insertions(+), 116 deletions(-)

diff --git a/cms/static/js/spec/views/xblock_validation_spec.js b/cms/static/js/spec/views/xblock_validation_spec.js
index 727725ce95..460569243a 100644
--- a/cms/static/js/spec/views/xblock_validation_spec.js
+++ b/cms/static/js/spec/views/xblock_validation_spec.js
@@ -17,8 +17,8 @@ define(['jquery', 'js/models/xblock_validation', 'js/views/xblock_validation', '
             it('has a getIcon method', function() {
                 var getIcon = view.getIcon.bind(view);
 
-                expect(getIcon(model.WARNING)).toBe('fa-warning-sign');
-                expect(getIcon(model.NOT_CONFIGURED)).toBe('fa-warning-sign');
+                expect(getIcon(model.WARNING)).toBe('fa-exclamation-triangle');
+                expect(getIcon(model.NOT_CONFIGURED)).toBe('fa-exclamation-triangle');
                 expect(getIcon(model.ERROR)).toBe('fa-exclamation-circle');
                 expect(getIcon("unknown")).toBeNull();
             });
diff --git a/cms/static/js/views/overview_assignment_grader.js b/cms/static/js/views/overview_assignment_grader.js
index 7d20fd4f6f..e4abd11b64 100644
--- a/cms/static/js/views/overview_assignment_grader.js
+++ b/cms/static/js/views/overview_assignment_grader.js
@@ -13,7 +13,7 @@ define(["js/views/baseview", "underscore", "gettext", "js/models/assignment_grad
                     // TODO move to a template file
                     '<h4 class="status-label"><%= assignmentType %></h4>' +
                     '<a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">' +
-                        '<% if (!hideSymbol) {%><i class="icon fa fa-ok"></i><%};%>' +
+                        '<% if (!hideSymbol) {%><i class="icon fa fa-check"></i><%};%>' +
                     '</a>' +
                     '<ul class="menu">' +
                         '<% graders.each(function(option) { %>' +
diff --git a/cms/static/js/views/xblock_validation.js b/cms/static/js/views/xblock_validation.js
index 1b6cf3f0a2..4733c30f9d 100644
--- a/cms/static/js/views/xblock_validation.js
+++ b/cms/static/js/views/xblock_validation.js
@@ -32,7 +32,7 @@ define(["jquery", "underscore", "js/views/baseview", "gettext"],
                     return 'fa-exclamation-circle';
                 }
                 else if (messageType === this.model.WARNING || messageType === this.model.NOT_CONFIGURED) {
-                    return 'fa-warning-sign';
+                    return 'fa-exclamation-triangle';
                 }
                 return null;
             },
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 14fd20fab5..5472806260 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -142,7 +142,7 @@
         @extend %t-regular;
         @include float(right);
 
-        .icon-delete {
+        .fa-trash-o {
           @extend %t-icon7;
           display: inline-block;
           vertical-align: middle;
diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss
index a99e23b017..93c5f9bc8d 100644
--- a/cms/static/sass/views/_video-upload.scss
+++ b/cms/static/sass/views/_video-upload.scss
@@ -1,5 +1,5 @@
 .view-video-uploads {
-  
+
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
   }
@@ -14,7 +14,7 @@
 
   .nav-actions {
 
-    .icon-cloud-upload {
+    .fa-cloud-upload {
       @extend %t-copy;
       vertical-align: bottom;
       margin-right: ($baseline/5);
diff --git a/cms/templates/js/metadata-list-entry.underscore b/cms/templates/js/metadata-list-entry.underscore
index 92db6ee9e0..8b87ebfa1b 100644
--- a/cms/templates/js/metadata-list-entry.underscore
+++ b/cms/templates/js/metadata-list-entry.underscore
@@ -10,7 +10,7 @@
     </a>
   </div>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-    <i class="icon-undo"></i>
+    <i class="icon fa fa-undo"></i>
     <span class="sr">"<%= gettext("Clear Value") %>"</span>
   </button>
 </div>
diff --git a/cms/templates/js/mock/mock-index-page.underscore b/cms/templates/js/mock/mock-index-page.underscore
index 704a17be97..b185b2aba2 100644
--- a/cms/templates/js/mock/mock-index-page.underscore
+++ b/cms/templates/js/mock/mock-index-page.underscore
@@ -106,7 +106,7 @@
                 <dl class="course-status">
                   <dt class="label sr">This re-run processing status:</dt>
                   <dd class="value">
-                    <i class="icon fa fa-refresh icon-spin"></i>
+                    <i class="icon fa fa-refresh fa-spin"></i>
                     <span class="copy">Configuring as re-run</span>
                   </dd>
                 </dl>
diff --git a/cms/templates/js/system-feedback.underscore b/cms/templates/js/system-feedback.underscore
index 40f119f61d..57f768ce3f 100644
--- a/cms/templates/js/system-feedback.underscore
+++ b/cms/templates/js/system-feedback.underscore
@@ -9,7 +9,7 @@
   >
   <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
     <% if(obj.icon) { %>
-      <% var iconClass = {"warning": "warning", "confirmation": "ok", "error": "warning", "announcement": "bullhorn", "step-required": "exclamation-circle", "help": "question", "mini": "cog"} %>
+      <% var iconClass = {"warning": "warning", "confirmation": "check", "error": "warning", "announcement": "bullhorn", "step-required": "exclamation-circle", "help": "question", "mini": "cog"} %>
       <i class="feedback-symbol fa fa-<%= iconClass[intent] %>"></i>
     <% } %>
 
diff --git a/cms/templates/js/xblock-validation-messages.underscore b/cms/templates/js/xblock-validation-messages.underscore
index 716f619312..cdfa1c0ff5 100644
--- a/cms/templates/js/xblock-validation-messages.underscore
+++ b/cms/templates/js/xblock-validation-messages.underscore
@@ -4,7 +4,7 @@ var aggregateMessageType = summaryMessage.type;
 var aggregateValidationClass = aggregateMessageType === "error"? "has-errors" : "has-warnings";
 %>
     <div class="xblock-message validation <%= aggregateValidationClass %> <%= additionalClasses %>">
-        <p class="<%= aggregateMessageType %>"><i class="<%= getIcon(aggregateMessageType) %>"></i>
+        <p class="<%= aggregateMessageType %>"><i class="icon fa <%= getIcon(aggregateMessageType) %>"></i>
         <%- summaryMessage.text %>
         <% if (summaryMessage.action_class) { %>
             <a href="#" class="button action-button <%- summaryMessage.action_class %>">
diff --git a/cms/templates/videos_index.html b/cms/templates/videos_index.html
index 6a5ab8d2cb..34e8064ff3 100644
--- a/cms/templates/videos_index.html
+++ b/cms/templates/videos_index.html
@@ -44,7 +44,7 @@
             <h3 class="sr">${_("Page Actions")}</h3>
             <ul>
                 <li class="nav-item">
-                    <a href="#" class="button upload-button new-button"><i class="icon-plus"></i> ${_("Upload New File")}</a>
+                    <a href="#" class="button upload-button new-button"><i class="icon fa fa-plus"></i> ${_("Upload New File")}</a>
                 </li>
             </ul>
         </nav>
diff --git a/common/djangoapps/third_party_auth/provider.py b/common/djangoapps/third_party_auth/provider.py
index d398e1584c..4fc1de6a8d 100644
--- a/common/djangoapps/third_party_auth/provider.py
+++ b/common/djangoapps/third_party_auth/provider.py
@@ -6,7 +6,7 @@ invoke the Django armature.
 
 from social.backends import google, linkedin, facebook
 
-_DEFAULT_ICON_CLASS = 'icon-signin'
+_DEFAULT_ICON_CLASS = 'fa-signin'
 
 
 class BaseProvider(object):
@@ -114,7 +114,7 @@ class GoogleOauth2(BaseProvider):
     """Provider for Google's Oauth2 auth system."""
 
     BACKEND_CLASS = google.GoogleOAuth2
-    ICON_CLASS = 'icon-google-plus'
+    ICON_CLASS = 'fa-google-plus'
     NAME = 'Google'
     SETTINGS = {
         'SOCIAL_AUTH_GOOGLE_OAUTH2_KEY': None,
@@ -134,7 +134,7 @@ class LinkedInOauth2(BaseProvider):
     """Provider for LinkedIn's Oauth2 auth system."""
 
     BACKEND_CLASS = linkedin.LinkedinOAuth2
-    ICON_CLASS = 'icon-linkedin'
+    ICON_CLASS = 'fa-linkedin'
     NAME = 'LinkedIn'
     SETTINGS = {
         'SOCIAL_AUTH_LINKEDIN_OAUTH2_KEY': None,
@@ -154,7 +154,7 @@ class FacebookOauth2(BaseProvider):
     """Provider for LinkedIn's Oauth2 auth system."""
 
     BACKEND_CLASS = facebook.FacebookOAuth2
-    ICON_CLASS = 'icon-facebook'
+    ICON_CLASS = 'fa-facebook'
     NAME = 'Facebook'
     SETTINGS = {
         'SOCIAL_AUTH_FACEBOOK_KEY': None,
diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index a6ea196cba..b30efed581 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -7,7 +7,7 @@ describe "DiscussionThreadListView", ->
         <script type="text/template" id="thread-list-template">
             <div class="forum-nav-header">
                 <a href="#" class="forum-nav-browse" aria-haspopup="true">
-                    <i class="icon icon-reorder"></i>
+                    <i class="icon fa fa-bars"></i>
                     <span class="sr">Discussion topics; current selection is: </span>
                     <span class="forum-nav-browse-current">All Discussions</span>
                     ▾
@@ -16,7 +16,7 @@ describe "DiscussionThreadListView", ->
                     <label>
                         <span class="sr">Search</span>
                         <input class="forum-nav-search-input" type="text" placeholder="Search all posts">
-                        <i class="icon icon-search"></i>
+                        <i class="icon fa fa-search"></i>
                     </label>
                 </form>
             </div>
@@ -32,7 +32,7 @@ describe "DiscussionThreadListView", ->
                         <a href="#" class="forum-nav-browse-title">All Discussions</a>
                     </li>
                     <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
-                        <a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>Posts I'm Following</a>
+                        <a href="#" class="forum-nav-browse-title"><i class="icon fa fa-star"></i>Posts I'm Following</a>
                     </li>
                     <li class="forum-nav-browse-menu-item">
                         <a href="#" class="forum-nav-browse-title">Parent</a>
@@ -343,7 +343,7 @@ describe "DiscussionThreadListView", ->
       it "perform search when search icon is clicked", ->
         setupAjax()
         spyOn(@view, "searchFor")
-        @view.$el.find(".icon-search").click()
+        @view.$el.find(".fa-search").click()
         expect(@view.searchFor).toHaveBeenCalled()
 
     describe "username search", ->
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index 3beda4e82b..0d2b31fdfd 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -116,7 +116,7 @@ class @DiscussionUtil
       alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
       alertDiv.html(
         "<div class='inner-wrapper discussion-alert-wrapper'>" +
-        "  <button class='close-modal dismiss' aria-hidden='true'><i class='icon-remove'></i></button>" +
+        "  <button class='close-modal dismiss' aria-hidden='true'><i class='icon fa fa-times'></i></button>" +
         "  <header><h2/><hr/></header>" +
         "  <p id='discussion-alert-message'/>" +
         "  <hr/>" +
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 3d823fac9b..b07d0ddc22 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -7,7 +7,7 @@ if Backbone?
       "click .forum-nav-browse-menu-wrapper": "ignoreClick"
       "click .forum-nav-browse-title": "selectTopicHandler"
       "keydown .forum-nav-search-input": "performSearch"
-      "click .icon-search": "performSearch"
+      "click .fa-search": "performSearch"
       "change .forum-nav-sort-control": "sortThreads"
       "click .forum-nav-thread-link": "threadSelected"
       "click .forum-nav-load-more-link": "loadMorePages"
@@ -171,7 +171,7 @@ if Backbone?
         @$(".forum-nav-thread-list").append("<li class='forum-nav-load-more'><a href='#' class='forum-nav-load-more-link'>" + gettext("Load more") + "</a></li>")
 
     getLoadingContent: (srText) ->
-      return '<div class="forum-nav-loading" tabindex="0"><span class="icon-spinner icon-spin"/><span class="sr" role="alert">' + srText + '</span></div>'
+      return '<div class="forum-nav-loading" tabindex="0"><span class="icon fa fa-spinner fa-spin"/><span class="sr" role="alert">' + srText + '</span></div>'
 
     loadMorePages: (event) =>
       if event
@@ -426,7 +426,7 @@ if Backbone?
       @retrieveFirstPage(event)
 
     performSearch: (event) ->
-      #event.which 13 represent the Enter button 
+      #event.which 13 represent the Enter button
       if event.which == 13 or event.type == 'click'
         event.preventDefault()
         @hideBrowseMenu()
diff --git a/common/static/js/utils/rwd_header_footer.js b/common/static/js/utils/rwd_header_footer.js
index 5770381472..3849674d32 100644
--- a/common/static/js/utils/rwd_header_footer.js
+++ b/common/static/js/utils/rwd_header_footer.js
@@ -40,7 +40,7 @@
                 burger: function() {
                     _fn.$nav.prepend([
                         '<a href="#" class="mobile-menu-button" aria-label="menu">',
-                            '<i class="icon-reorder" aria-hidden="true"></i>',
+                            '<i class="icon fa fa-bars" aria-hidden="true"></i>',
                         '</a>'
                     ].join(''));
                 },
diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index 8adbc079b9..3482313e66 100644
--- a/common/templates/course_modes/choose.html
+++ b/common/templates/course_modes/choose.html
@@ -49,7 +49,7 @@
     % if error:
         <div class="wrapper-msg wrapper-msg-error">
             <div class=" msg msg-error">
-                <i class="msg-icon icon-warning-sign"></i>
+                <i class="msg-icon icon fa fa-exclamation-triangle"></i>
                 <div class="msg-content">
                     <h3 class="title">${_("Sorry, there was an error when trying to enroll you")}</h3>
                     <div class="copy">
@@ -94,7 +94,7 @@
                                     % if error:
                                         <div class="msg msg-error msg-inline">
                                             <div class="copy">
-                                                <p><i class="msg-icon icon-warning-sign"></i> ${error}</p>
+                                                <p><i class="msg-icon icon fa fa-exclamation-triangle"></i> ${error}</p>
                                             </div>
                                         </div>
                                     % endif
diff --git a/common/templates/js/image-modal.underscore b/common/templates/js/image-modal.underscore
index ef172c173d..f37520752a 100644
--- a/common/templates/js/image-modal.underscore
+++ b/common/templates/js/image-modal.underscore
@@ -3,40 +3,40 @@
     <%= smallHTML%>
     <a href="#" class="modal-ui-icon action-fullscreen" role="button">
       <span class="label">
-        <i class="icon-fullscreen icon-large"></i> <%= gettext("Fullscreen") %>
+        <i class="icon fa fa-arrows-alt fa-large"></i> <%= gettext("Fullscreen") %>
       </span>
     </a>
   </section>
-  
+
   <section class="image-modal">
     <section class="image-content">
       <div class="image-wrapper">
         <img alt="<%= largeALT %>, <%= gettext('Large') %>" src="<%= largeSRC %>" />
       </div>
-      
+
       <a href="#" class="modal-ui-icon action-close" role="button">
         <span class="label">
-          <i class="icon-remove icon-large"></i> <%= gettext("Close") %>
+          <i class="icon fa fa-remove fa-large"></i> <%= gettext("Close") %>
         </span>
       </a>
-      
+
       <ul class="image-controls">
         <li class="image-control">
           <a href="#" class="modal-ui-icon action-zoom-in" role="button">
             <span class="label">
-              <i class="icon-zoom-in icon-large"></i> <%= gettext("Zoom In") %>
+              <i class="icon fa fa fa-search-plus fa-large"></i> <%= gettext("Zoom In") %>
             </span>
           </a>
         </li>
-    
+
         <li class="image-control">
           <a href="#" class="modal-ui-icon action-zoom-out is-disabled" aria-disabled="true" role="button">
             <span class="label">
-              <i class="icon-zoom-out icon-large"></i> <%= gettext("Zoom Out") %>
+              <i class="icon fa fa fa-search-minus fa-large"></i> <%= gettext("Zoom Out") %>
             </span>
           </a>
         </li>
       </ul>
     </section>
   </section>
-</div>
\ No newline at end of file
+</div>
diff --git a/lms/djangoapps/student_account/test/test_views.py b/lms/djangoapps/student_account/test/test_views.py
index d315f89dda..47bb961eba 100644
--- a/lms/djangoapps/student_account/test/test_views.py
+++ b/lms/djangoapps/student_account/test/test_views.py
@@ -432,13 +432,13 @@ class StudentAccountLoginAndRegistrationTest(ModuleStoreTestCase):
         expected_providers = [
             {
                 "name": "Facebook",
-                "iconClass": "icon-facebook",
+                "iconClass": "fa-facebook",
                 "loginUrl": self._third_party_login_url("facebook", "account_login"),
                 "registerUrl": self._third_party_login_url("facebook", "account_register")
             },
             {
                 "name": "Google",
-                "iconClass": "icon-google-plus",
+                "iconClass": "fa-google-plus",
                 "loginUrl": self._third_party_login_url("google-oauth2", "account_login"),
                 "registerUrl": self._third_party_login_url("google-oauth2", "account_register")
             }
@@ -465,7 +465,7 @@ class StudentAccountLoginAndRegistrationTest(ModuleStoreTestCase):
         expected_providers = [
             {
                 "name": "Facebook",
-                "iconClass": "icon-facebook",
+                "iconClass": "fa-facebook",
                 "loginUrl": self._third_party_login_url(
                     "facebook", "account_login",
                     course_id=unicode(course.id),
@@ -479,7 +479,7 @@ class StudentAccountLoginAndRegistrationTest(ModuleStoreTestCase):
             },
             {
                 "name": "Google",
-                "iconClass": "icon-google-plus",
+                "iconClass": "fa-google-plus",
                 "loginUrl": self._third_party_login_url(
                     "google-oauth2", "account_login",
                     course_id=unicode(course.id),
@@ -513,7 +513,7 @@ class StudentAccountLoginAndRegistrationTest(ModuleStoreTestCase):
         expected_providers = [
             {
                 "name": "Facebook",
-                "iconClass": "icon-facebook",
+                "iconClass": "fa-facebook",
                 "loginUrl": self._third_party_login_url(
                     "facebook", "account_login",
                     course_id=unicode(course.id),
@@ -527,7 +527,7 @@ class StudentAccountLoginAndRegistrationTest(ModuleStoreTestCase):
             },
             {
                 "name": "Google",
-                "iconClass": "icon-google-plus",
+                "iconClass": "fa-google-plus",
                 "loginUrl": self._third_party_login_url(
                     "google-oauth2", "account_login",
                     course_id=unicode(course.id),
diff --git a/lms/static/coffee/src/instructor_dashboard/util.coffee b/lms/static/coffee/src/instructor_dashboard/util.coffee
index a6f4bfd14e..eb6a81c51c 100644
--- a/lms/static/coffee/src/instructor_dashboard/util.coffee
+++ b/lms/static/coffee/src/instructor_dashboard/util.coffee
@@ -209,7 +209,7 @@ create_email_message_views = ($messages_wrapper, emails) ->
     $email_header.append $('<input>', type: "button", name: "copy-email-body-text", value: gettext("Copy Email To Editor"), id: "copy_email_" + email_id)
 
     $close_button = $ '<a>', href: '#', class: "close-modal"
-    $close_button.append $ '<i>', class: 'icon-remove'
+    $close_button.append $ '<i>', class: 'icon fa fa-times'
     $email_header.append $close_button
 
     # HTML escape the subject line
@@ -316,10 +316,10 @@ class KeywordValidator
         do (found_keyword) ->
           if found_keyword not in keywords
             invalid_keywords.push found_keyword
-      
+
       if invalid_keywords.length != 0
         is_valid = false
-      
+
       return {
         is_valid: is_valid,
         invalid_keywords: invalid_keywords
diff --git a/lms/static/js/spec/shoppingcart/shoppingcart_spec.js b/lms/static/js/spec/shoppingcart/shoppingcart_spec.js
index 0c465f790c..92a84acbd3 100644
--- a/lms/static/js/spec/shoppingcart/shoppingcart_spec.js
+++ b/lms/static/js/spec/shoppingcart/shoppingcart_spec.js
@@ -7,7 +7,7 @@ define(['js/common_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
             var requests = null;
 
             beforeEach(function() {
-                setFixtures('<section class="wrapper confirm-enrollment shopping-cart cart-view"><form action="" method="post"><input type="hidden" name="" value="" /><i class="icon-caret-right"></i><input type="submit" value="Payment"/></form></section>');
+                setFixtures('<section class="wrapper confirm-enrollment shopping-cart cart-view"><form action="" method="post"><input type="hidden" name="" value="" /><i class="icon fa fa-caret-right"></i><input type="submit" value="Payment"/></form></section>');
 
                 view = new edx.shoppingcart.showcart.CartView({
                     el: $('.confirm-enrollment.cart-view form')
@@ -17,7 +17,7 @@ define(['js/common_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
 
                 // Spy on AJAX requests
                 requests = AjaxHelpers.requests(this);
-                
+
                 view.submit();
 
                 // Verify that the client contacts the server to
@@ -56,4 +56,4 @@ define(['js/common_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
             });
         });
     }
-);
\ No newline at end of file
+);
diff --git a/lms/static/js/spec/student_account/login_spec.js b/lms/static/js/spec/student_account/login_spec.js
index 93a0f1b69d..ec681150c1 100644
--- a/lms/static/js/spec/student_account/login_spec.js
+++ b/lms/static/js/spec/student_account/login_spec.js
@@ -26,13 +26,13 @@ define([
                 providers: [
                     {
                         name: 'Google',
-                        iconClass: 'icon-google-plus',
+                        iconClass: 'fa-google-plus',
                         loginUrl: '/auth/login/google-oauth2/?auth_entry=account_login',
                         registerUrl: '/auth/login/google-oauth2/?auth_entry=account_register'
                     },
                     {
                         name: 'Facebook',
-                        iconClass: 'icon-facebook',
+                        iconClass: 'fa-facebook',
                         loginUrl: '/auth/login/facebook/?auth_entry=account_login',
                         registerUrl: '/auth/login/facebook/?auth_entry=account_register'
                     }
diff --git a/lms/static/js/spec/student_account/register_spec.js b/lms/static/js/spec/student_account/register_spec.js
index cd6d59ea7b..bf3ad8ae2c 100644
--- a/lms/static/js/spec/student_account/register_spec.js
+++ b/lms/static/js/spec/student_account/register_spec.js
@@ -33,13 +33,13 @@ define([
                 providers: [
                     {
                         name: 'Google',
-                        iconClass: 'icon-google-plus',
+                        iconClass: 'fa-google-plus',
                         loginUrl: '/auth/login/google-oauth2/?auth_entry=account_login',
                         registerUrl: '/auth/login/google-oauth2/?auth_entry=account_register'
                     },
                     {
                         name: 'Facebook',
-                        iconClass: 'icon-facebook',
+                        iconClass: 'fa-facebook',
                         loginUrl: '/auth/login/facebook/?auth_entry=account_login',
                         registerUrl: '/auth/login/facebook/?auth_entry=account_register'
                     }
diff --git a/lms/static/js/views/cohorts.js b/lms/static/js/views/cohorts.js
index d19da6dc48..85e723e5f2 100644
--- a/lms/static/js/views/cohorts.js
+++ b/lms/static/js/views/cohorts.js
@@ -66,7 +66,7 @@
                     title: gettext('You currently have no cohort groups configured'),
                     actionText: gettext('Add Cohort Group'),
                     actionClass: 'action-create',
-                    actionIconClass: 'icon-plus'
+                    actionIconClass: 'fa-plus'
                 });
             }
         },
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index 651173f7c3..ded79da90d 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -296,9 +296,6 @@ section.wiki {
         width: 25px;
         margin-right: 3px;
         margin-top: 5px;
-      }
-
-      [class^="icon-"] {
         padding-right: ($baseline/4);
       }
 
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 8357f10fe8..2ccd56fddb 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -354,7 +354,7 @@ body.discussion {
           display: table-cell;
         }
 
-        .icon-stack i {
+        .fa-stack .icon {
           padding: 0 $baseline/2;
         }
 
@@ -397,20 +397,20 @@ body.discussion {
     }
 
   .helpgrid-row-navigation {
-    .icon-reorder {color: $light-gray;}
-    .icon-search {color: $light-gray;}
-    .icon-sort {color: $light-gray;}
+    .fa-bars {color: $light-gray;}
+    .fa-search {color: $light-gray;}
+    .fa-sort {color: $light-gray;}
   }
 
   .helpgrid-row-participation {
-    .icon-plus {color: $green;}
-    .icon-flag {color: $pink;}
-    .icon-star {color: $blue;}
+    .fa-plus {color: $green;}
+    .fa-flag {color: $pink;}
+    .fa-star {color: $blue;}
   }
 
   .helpgrid-row-notification {
-    .icon-sign-blank {color: $green;}
-    .icon-envelope {color: $light-gray;}
+    .fa-square {color: $green;}
+    .fa-envelope {color: $light-gray;}
   }
 
   .discussion-article {
@@ -560,7 +560,7 @@ body.discussion {
       @include text-align(left);
       font-size: 13px;
 
-      .icon-reply:before { // flip the icon for RTL
+      .fa-reply:before { // flip the icon for RTL
         @include ltr {
           content: "\f112"; // FA icon arrow to the left
         }
@@ -694,7 +694,7 @@ body.discussion {
       box-shadow: 0 1px 1px $shadow-l1;
       @include text-align(left);
 
-      .icon-reply:before {
+      .fa-reply:before {
         @include ltr {
           content: "\f112"; // FA icon arrow to the left
         }
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index 1aa8d3c1cc..6c55735865 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -209,15 +209,15 @@
     }
   }
 
-  .icon-comments {
+  .fa-comments {
     color: $gray-l2;
   }
 
-  .icon-check {
+  .fa-check-square-o {
     color: $forum-color-marked-answer;
   }
 
-  .icon-question {
+  .fa-question {
     color: $pink;
   }
 }
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index a12138cc8a..58d1908ca8 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -102,7 +102,7 @@
                 display: inline-block;
                 color: $gray-l2;
 
-                .icon-link {
+                .fa-link {
                   color: $base-font-color;
                 }
 
@@ -147,25 +147,25 @@
           border-bottom: 0;
           padding: 0;
 
-          [class^="icon-"] {
+          .icon {
             display: inline-block;
             vertical-align: top;
             margin: ($baseline/10) ($baseline/4) 0 0;
           }
 
-          &.is-open [class^="icon-"] {
+          &.is-open .icon {
             color: $action-primary-bg;
           }
 
-          &.is-pending [class^="icon-"] {
+          &.is-pending .icon {
             color: $warning-color;
           }
 
-          &.is-approved [class^="icon-"] {
+          &.is-approved .icon {
             color: $success-color;
           }
 
-          &.is-denied [class^="icon-"] {
+          &.is-denied .icon {
             color: $alert-color;
           }
 
diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss
index 12238f4e17..bda07b0574 100644
--- a/lms/static/sass/views/_shoppingcart.scss
+++ b/lms/static/sass/views/_shoppingcart.scss
@@ -492,7 +492,7 @@
             &.green {
               color: $green1;
             }
-            
+
             .line-through {
               text-decoration: line-through;
             }
@@ -572,7 +572,7 @@
             &.disabled {
               .counter {
                 border: 2px solid $gray;
-                
+
                 &:hover {
                   cursor: not-allowed;
                 }
@@ -594,7 +594,7 @@
               float: right;
               font-size: 15px;
               padding: 25px 35px 25px 0;
-              
+
               &:focus {
                 outline: none;
               }
@@ -680,7 +680,7 @@
         padding: 8px 12px;
         font-weight: 600;
         width: 260px;
-        
+
         &:focus {
           border-color: $dark-gray2;
           box-shadow: none;
@@ -803,7 +803,7 @@
             margin-left: ($baseline/2);
           }
         }
-        
+
       .col-2{
         width: 65%;
         float: right;
@@ -828,7 +828,7 @@
         form{
           position: relative;
         }
-          i.icon-caret-right{
+          .fa-caret-right {
             position: absolute;
             right: 30px;
             top: 25px;
@@ -1100,7 +1100,7 @@
     }
 
     .bordered-bar {
-      
+
       h2 {
         font-size: 14px;
       }
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 2a65f34263..209dd4675a 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -699,7 +699,7 @@
             @extend %btn-primary-blue;
             padding: ($baseline/2) ($baseline*0.75);
 
-            *[class^="icon-"] {
+            .icon {
               @extend %t-icon4;
               padding: ($baseline*.25) ($baseline*.5);
               display: block;
@@ -1517,15 +1517,15 @@
             color: $white;
           }
 
-          .icon-over, .icon-under {
+          .fa-stack-1x, .fa-stack-2x {
             position: relative;
           }
 
-          .icon-under {
+          .fa-stack-2x {
             @extend %ui-depth1;
           }
 
-          .icon-over {
+          .fa-stack-1x {
             @extend %ui-depth2;
             @extend %t-icon5;
             position: absolute;
@@ -1534,6 +1534,11 @@
             background: $verified-color-lvl3;
             padding: 3px 5px;
           }
+
+          .id-photo {
+            width: 23px;
+            padding: 3px 0;
+          }
         }
 
         .copy {
@@ -2150,7 +2155,7 @@
               @extend %btn-primary-blue;
               padding: ($baseline/2) ($baseline*0.75);
 
-              *[class^="icon-"] {
+              .icon {
                 @extend %t-icon4;
                 padding: ($baseline*.25) ($baseline*.5);
                 display: block;
diff --git a/lms/templates/courseware/course_about.html b/lms/templates/courseware/course_about.html
index 0331360d0d..2ed5cd1b11 100644
--- a/lms/templates/courseware/course_about.html
+++ b/lms/templates/courseware/course_about.html
@@ -313,7 +313,7 @@
 
           %if is_shopping_cart_enabled and registration_price:
             <li class="important-dates-item">
-              <i class="icon icon-money"></i>
+              <i class="icon fa fa-money"></i>
               <p class="important-dates-item-title">${_("Price")}</p>
               <span class="important-dates-item-text">${_("{currency_symbol}{cost}").format(currency_symbol=currency_symbol, cost=registration_price)}</span>
             </li>
diff --git a/lms/templates/instructor/instructor_dashboard_2/add-cohort-form.underscore b/lms/templates/instructor/instructor_dashboard_2/add-cohort-form.underscore
index 8770977fe7..3680de44b5 100644
--- a/lms/templates/instructor/instructor_dashboard_2/add-cohort-form.underscore
+++ b/lms/templates/instructor/instructor_dashboard_2/add-cohort-form.underscore
@@ -17,7 +17,7 @@
 
         <div class="form-actions">
             <button class="form-submit button action-primary action-save">
-                <i class="icon icon-plus"></i>
+                <i class="icon fa fa-plus"></i>
                 <%- gettext('Save') %>
             </button>
             <a href="" class="form-cancel action-secondary action-cancel"><%- gettext('Cancel') %></a>
diff --git a/lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore b/lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore
index 0f2833a07e..4bfc997c00 100644
--- a/lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore
+++ b/lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore
@@ -56,7 +56,7 @@
 
         <div class="form-actions">
             <button class="form-submit button action-primary action-view">
-                <i class="button-icon icon icon-plus"></i> <%- gettext('Add Students') %>
+                <i class="button-icon icon fa fa-plus"></i> <%- gettext('Add Students') %>
             </button>
         </div>
     </form>
diff --git a/lms/templates/instructor/instructor_dashboard_2/cohorts.underscore b/lms/templates/instructor/instructor_dashboard_2/cohorts.underscore
index db6fae6b5c..8113089642 100644
--- a/lms/templates/instructor/instructor_dashboard_2/cohorts.underscore
+++ b/lms/templates/instructor/instructor_dashboard_2/cohorts.underscore
@@ -19,7 +19,7 @@
     </form>
 
     <a href="" class="action-primary action-create">
-        <i class="icon icon-plus"></i>
+        <i class="icon fa fa-plus"></i>
         <%- gettext('Add Cohort Group') %>
     </a>
 </div>
@@ -37,7 +37,7 @@
 
     <div class="cohort-management-supplemental">
         <p class="">
-            <i class="icon icon-info-sign"></i>
+            <i class="icon fa fa-info-circle"></i>
             <%= interpolate(
             gettext('To review student cohort group assignments or see the results of uploading a CSV file, download course profile information or cohort results on %(link_start)s the Data Download page. %(link_end)s'),
                 {link_start: '<a href="" class="link-cross-reference" data-section="data_download">', link_end: '</a>'},
diff --git a/lms/templates/login.html b/lms/templates/login.html
index 94bb947c04..b1b188932b 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -220,7 +220,7 @@
 
     % for enabled in provider.Registry.enabled():
       ## Translators: provider_name is the name of an external, third-party user authentication provider (like Google or LinkedIn).
-      <button type="submit" class="button button-primary button-${enabled.NAME} login-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline_url[enabled.NAME]}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign in with {provider_name}').format(provider_name=enabled.NAME)}</button>
+      <button type="submit" class="button button-primary button-${enabled.NAME} login-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline_url[enabled.NAME]}');"><span class="icon fa ${enabled.ICON_CLASS}"></span>${_('Sign in with {provider_name}').format(provider_name=enabled.NAME)}</button>
     % endfor
 
     </div>
diff --git a/lms/templates/register.html b/lms/templates/register.html
index a5a04648fa..74d39ba31a 100644
--- a/lms/templates/register.html
+++ b/lms/templates/register.html
@@ -126,7 +126,7 @@
 
         % for enabled in provider.Registry.enabled():
           ## Translators: provider_name is the name of an external, third-party user authentication service (like Google or LinkedIn).
-          <button type="submit" class="button button-primary button-${enabled.NAME} register-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline_urls[enabled.NAME]}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign up with {provider_name}').format(provider_name=enabled.NAME)}</button>
+          <button type="submit" class="button button-primary button-${enabled.NAME} register-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline_urls[enabled.NAME]}');"><span class="icon fa ${enabled.ICON_CLASS}"></span>${_('Sign up with {provider_name}').format(provider_name=enabled.NAME)}</button>
         % endfor
 
         </div>
diff --git a/lms/templates/shoppingcart/shopping_cart.html b/lms/templates/shoppingcart/shopping_cart.html
index 773b86cea9..df7e3c4147 100644
--- a/lms/templates/shoppingcart/shopping_cart.html
+++ b/lms/templates/shoppingcart/shopping_cart.html
@@ -65,7 +65,7 @@ from django.utils.translation import ugettext as _
                 <div class="counter">
                     <input maxlength="3" title="Input qty and press enter." max="999" type="text" name="students" value="${item.qty}" id="${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}">
                 </div>
-                <div class="inc button"><i class="icon fa fa-caret-up"><span>+</span></i></div><div class="dec button"><i class="icon-caret-down"></i></div>
+                <div class="inc button"><i class="icon fa fa-caret-up"><span>+</span></i></div><div class="dec button"><i class="icon fa fa-caret-down"></i></div>
                     <!--<a name="updateBtn" class="updateBtn hidden" id="updateBtn-${item.id}" href="#">update</a>-->
                 <span class="error-text hidden" id="students-${item.id}"></span>
             </div>
@@ -123,7 +123,7 @@ from django.utils.translation import ugettext as _
                 </p>
               </div>
               <div name="billing" class="hidden">
-                  <input type="submit" value = "Billing Details" name="billing-details"><i class="icon-caret-right"></i>
+                  <input type="submit" value = "Billing Details" name="billing-details"><i class="icon fa fa-caret-right"></i>
                     <p>
                         ${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
                     </p>
diff --git a/lms/templates/verify_student/error.underscore b/lms/templates/verify_student/error.underscore
index 496171ab3a..d1923dd911 100644
--- a/lms/templates/verify_student/error.underscore
+++ b/lms/templates/verify_student/error.underscore
@@ -1,6 +1,6 @@
 <div id="error" class="wrapper-msg wrapper-msg-activate">
   <div class=" msg msg-activate">
-    <i class="msg-icon icon-warning-sign"></i>
+    <i class="msg-icon icon fa fa-exclamation-triangle"></i>
     <div class="msg-content">
       <h3 class="title"><%- errorTitle %></h3>
       <div class="copy">
diff --git a/lms/templates/verify_student/face_photo_step.underscore b/lms/templates/verify_student/face_photo_step.underscore
index f0ff6a3a5c..ec31979f7e 100644
--- a/lms/templates/verify_student/face_photo_step.underscore
+++ b/lms/templates/verify_student/face_photo_step.underscore
@@ -17,7 +17,7 @@
               <li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
               <li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon-camera"></i>)</span>' } ) %>
+                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon fa fa-camera"></i>)</span>' } ) %>
               </li>
               <li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
diff --git a/lms/templates/verify_student/id_photo_step.underscore b/lms/templates/verify_student/id_photo_step.underscore
index 265bac5abf..24efa21a14 100644
--- a/lms/templates/verify_student/id_photo_step.underscore
+++ b/lms/templates/verify_student/id_photo_step.underscore
@@ -19,7 +19,7 @@
               <li class="help-item"><%- gettext( "Ensure that you can see your photo and read your name" ) %></li>
               <li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon-camera"></i>)</span>' } ) %>
+                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon fa fa-camera"></i>)</span>' } ) %>
               </li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
             </ul>
diff --git a/lms/templates/verify_student/intro_step.underscore b/lms/templates/verify_student/intro_step.underscore
index fc235907e6..3adda87712 100644
--- a/lms/templates/verify_student/intro_step.underscore
+++ b/lms/templates/verify_student/intro_step.underscore
@@ -26,7 +26,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-envelope-alt"></i>
+              <i class="icon fa fa-envelope-o"></i>
             </div>
 
             <div class="copy">
@@ -39,9 +39,9 @@
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
-            <div class="placeholder-art">
-              <i class="icon-list-alt icon-under"></i>
-              <i class="icon-user icon-over"></i>
+            <div class="placeholder-art fa-lg">
+              <i class="icon fa fa-list-alt fa-stack-2x"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
             </div>
 
             <div class="copy">
@@ -56,7 +56,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-facetime-video"></i>
+              <i class="icon fa fa-video-camera"></i>
             </div>
 
             <div class="copy"></div>
diff --git a/lms/templates/verify_student/make_payment_step.underscore b/lms/templates/verify_student/make_payment_step.underscore
index c04afcacd7..9479f056c8 100644
--- a/lms/templates/verify_student/make_payment_step.underscore
+++ b/lms/templates/verify_student/make_payment_step.underscore
@@ -121,7 +121,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-envelope-alt"></i>
+              <i class="icon fa fa-envelope-o"></i>
             </div>
 
             <div class="copy">
@@ -134,9 +134,9 @@
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h4>
-            <div class="placeholder-art">
-              <i class="icon-list-alt icon-under"></i>
-              <i class="icon-user icon-over"></i>
+            <div class="placeholder-art fa-lg">
+              <i class="icon fa fa-list-alt fa-stack-2x"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
             </div>
 
             <div class="copy"></div>
@@ -147,7 +147,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-facetime-video"></i>
+              <i class="icon fa fa-video-camera"></i>
             </div>
 
             <div class="copy"></div>
diff --git a/lms/templates/verify_student/payment_confirmation_step.underscore b/lms/templates/verify_student/payment_confirmation_step.underscore
index 780b715334..44e927e5cb 100644
--- a/lms/templates/verify_student/payment_confirmation_step.underscore
+++ b/lms/templates/verify_student/payment_confirmation_step.underscore
@@ -86,7 +86,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-envelope-alt"></i>
+              <i class="icon fa fa-envelope-o"></i>
             </div>
 
             <div class="copy">
@@ -103,9 +103,9 @@
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
-            <div class="placeholder-art">
-              <i class="icon-list-alt icon-under"></i>
-              <i class="icon-user icon-over"></i>
+            <div class="placeholder-art fa-lg">
+              <i class="icon fa fa-list-alt fa-stack-2x"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
             </div>
 
             <div class="copy">
@@ -120,7 +120,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon-facetime-video"></i>
+              <i class="icon fa fa-video-camera"></i>
             </div>
 
             <div class="copy"></div>
diff --git a/lms/templates/verify_student/webcam_photo.underscore b/lms/templates/verify_student/webcam_photo.underscore
index 47fa3bebdb..66f7b2dcca 100644
--- a/lms/templates/verify_student/webcam_photo.underscore
+++ b/lms/templates/verify_student/webcam_photo.underscore
@@ -13,7 +13,7 @@
   </div>
   <div class="control control-do is-hidden" id="webcam_capture_button">
     <a class="action action-do">
-      <i class="icon-camera"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
+      <i class="icon fa fa-camera"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
     </a>
   </div>
 </div>