Upgrade: Font Awesome 4.2.0

cms/static/js/factories/index.js

@@ -21,8 +21,8 @@ define(['jquery.form', 'js/index'], function() {
                 .find('.label')
                     .text('Sorry, there was error with your request');
             $('#request-coursecreator-submit')
-                .find('.icon-cog')
-                    .toggleClass('icon-spin');
+                .find('.fa-cog')
+                    .toggleClass('fa-spin');
         };
 
         $('#request-coursecreator').ajaxForm({

cms/static/js/spec/views/group_configuration_spec.js

@@ -35,8 +35,8 @@ define([
         usageUnit: '.group-configuration-usage-unit',
         usageUnitAnchor: '.group-configuration-usage-unit a',
         usageUnitMessage: '.group-configuration-validation-message',
-        usageUnitWarningIcon: '.group-configuration-usage-unit i.icon-warning-sign',
-        usageUnitErrorIcon: '.group-configuration-usage-unit i.icon-exclamation-sign',
+        usageUnitWarningIcon: '.group-configuration-usage-unit i.fa-warning',
+        usageUnitErrorIcon: '.group-configuration-usage-unit i.fa-exclamation-circle',
         warningMessage: '.group-configuration-validation-text',
         warningIcon: '.wrapper-group-configuration-validation > i',
         note: '.wrapper-delete-button'

cms/static/js/spec/views/pages/container_subviews_spec.js

@@ -438,9 +438,9 @@ define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_hel
 
                     verifyExplicitStaffOnly = function(isStaffOnly) {
                         if (isStaffOnly) {
-                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('icon-check');
+                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-check');
                         } else {
-                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('icon-check-empty');
+                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-check-empty');
                         }
                     };
 

cms/static/js/spec/views/xblock_validation_spec.js

@@ -17,9 +17,9 @@ 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('icon-warning-sign');
-                expect(getIcon(model.NOT_CONFIGURED)).toBe('icon-warning-sign');
-                expect(getIcon(model.ERROR)).toBe('icon-exclamation-sign');
+                expect(getIcon(model.WARNING)).toBe('fa-warning');
+                expect(getIcon(model.NOT_CONFIGURED)).toBe('fa-warning');
+                expect(getIcon(model.ERROR)).toBe('fa-exclamation-circle');
                 expect(getIcon("unknown")).toBeNull();
             });
 

cms/static/js/views/course_rerun.js

@@ -50,7 +50,7 @@ define(["domReady", "jquery", "underscore", "js/views/utils/create_course_utils"
 
             // Go into creating re-run state
             $('.rerun-course-save').addClass('is-disabled').addClass('is-processing').html(
-               '<i class="icon icon-refresh icon-spin"></i>' + gettext('Processing Re-run Request')
+               '<i class="icon fa fa-refresh fa-spin"></i>' + gettext('Processing Re-run Request')
             );
             $('.action-cancel').addClass('is-hidden');
         };

cms/static/js/views/import.js

@@ -14,9 +14,9 @@ define(
          * @param {boolean} isSpinning Turns cog spin on if true, off otherwise.
          */
         var updateCog = function (elem, isSpinning) {
-            var cogI = elem.find('i.icon-cog');
-            if (isSpinning) { cogI.addClass("icon-spin");}
-            else { cogI.removeClass("icon-spin");}
+            var cogI = elem.find('i.fa-cog');
+            if (isSpinning) { cogI.addClass("fa-spin");}
+            else { cogI.removeClass("fa-spin");}
         };
 
 

cms/static/js/views/metadata.js

@@ -285,7 +285,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
                 var template = _.template(
                     '<li class="list-settings-item">' +
                         '<input type="text" class="input" value="<%= ele %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
+                        '<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon fa fa-remove-sign"></i><span class="sr">Remove</span></a>' +
                     '</li>'
                 );
                 list.append($(template({'ele': ele, 'index': index})));
@@ -452,7 +452,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
                     '<li class="list-settings-item">' +
                         '<input type="text" class="input input-key" value="<%= key %>">' +
                         '<input type="text" class="input input-value" value="<%= value %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
+                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon fa fa-remove-sign"></i><span class="sr">Remove</span></a>' +
                     '</li>'
                 );
 

cms/static/js/views/overview.js

@@ -10,9 +10,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
 
             var $section = $('.courseware-section');
             var $button = $(this);
-            var $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">' +
+            var $labelCollapsed = $('<i class="icon fa fa-arrow-up"></i> <span class="label">' +
                 gettext('Collapse All Sections') + '</span>');
-            var $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">' +
+            var $labelExpanded = $('<i class="icon fa fa-arrow-down"></i> <span class="label">' +
                 gettext('Expand All Sections') + '</span>');
 
             var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
@@ -102,7 +102,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                             '<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
                             gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
                             '</span>' +
-                            '<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon-time"></i> <span class="sr">' +
+                            '<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon fa fa-time"></i> <span class="sr">' +
                             gettext("Edit section release date") +
                             '</span></a>',
                         {year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),

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-ok"></i><%};%>' +
+                        '<% if (!hideSymbol) {%><i class="icon fa fa-ok"></i><%};%>' +
                     '</a>' +
                     '<ul class="menu">' +
                         '<% graders.each(function(option) { %>' +

cms/static/js/views/pages/container_subviews.js

@@ -218,8 +218,8 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/utils/
             },
 
             checkStaffLock: function(check) {
-                this.$('.action-staff-lock i').removeClass('icon-check icon-check-empty');
-                this.$('.action-staff-lock i').addClass(check ? 'icon-check' : 'icon-check-empty');
+                this.$('.action-staff-lock i').removeClass('fa-check-square-o fa-square-o');
+                this.$('.action-staff-lock i').addClass(check ? 'fa-check-square-o' : 'fa-square-o');
             }
         });
 

cms/static/js/views/settings/main.js

@@ -20,7 +20,7 @@ var DetailsView = ValidatingView.extend({
     },
 
     initialize : function() {
-        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon-file"></i><%= filename %></a>');
+        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon fa fa-file"></i><%= filename %></a>');
         // fill in fields
         this.$el.find("#course-organization").val(this.model.get('org'));
         this.$el.find("#course-number").val(this.model.get('course_id'));

cms/static/js/views/xblock_validation.js

@@ -29,10 +29,10 @@ define(["jquery", "underscore", "js/views/baseview", "gettext"],
              */
             getIcon: function (messageType) {
                 if (messageType === this.model.ERROR) {
-                    return 'icon-exclamation-sign';
+                    return 'fa-exclamation-circle';
                 }
                 else if (messageType === this.model.WARNING || messageType === this.model.NOT_CONFIGURED) {
-                    return 'icon-warning-sign';
+                    return 'fa-warning-sign';
                 }
                 return null;
             },

cms/static/sass/_base.scss

@@ -715,7 +715,7 @@ body.js {
         @extend %cont-text-sr;
       }
 
-      [class^="icon-"] {
+      .icon {
         @extend %t-action1;
         color: $white;
       }

cms/static/sass/_shame.scss

@@ -15,7 +15,7 @@
       transition-timing-function: ease-in-out;
     }
 
-    .icon-remove-sign {
+    .fa-times-circle {
       // needed to override general a element transition properties - need to fix.
       transition-duration: 0.25s;
       transition-timing-function: ease-in-out;

cms/static/sass/elements/_controls.scss

@@ -180,7 +180,7 @@
 // button elements
 .button {
 
-  [class^="icon-"] {
+  .icon {
     display: inline-block;
     vertical-align: middle;
     margin-right: ($baseline/4);
@@ -267,7 +267,7 @@
         background-color: $gray-l1;
       }
 
-      [class^="icon-"] {
+      .icon {
         font-style: normal;
       }
     }
@@ -378,7 +378,7 @@
     border-top: 1px solid $blue-l1;
     opacity: 0.0;
 
-    *[class^="icon-caret"] {
+    *[class^="fa-caret"] {
       @extend %t-icon5;
       position: absolute;
       top: -12px;

cms/static/sass/elements/_footer.scss

@@ -48,7 +48,7 @@
           padding: ($baseline/2) ($baseline/2);
           background: transparent;
 
-          [class^="icon-"] {
+          .icon {
             @include transition(top $tmg-f2 ease-in-out 0.25s);
             @extend %t-action3;
             display: inline-block;

cms/static/sass/elements/_forms.scss

@@ -372,6 +372,10 @@ form {
     @extend %ui-btn-non-blue;
     @extend %t-copy-base;
     padding-top: ($baseline/10);
+
+    .icon.icon {
+      vertical-align: baseline;
+    }
   }
 
   .incontext-editor-form {

cms/static/sass/elements/_header.scss

@@ -78,28 +78,28 @@
       @extend %ui-btn-dd-nav-primary;
       @include transition(all $tmg-f2 ease-in-out 0s);
 
-      .label, .icon-caret-down {
+      .label, .fa-caret-down {
 
       }
 
       .label {
 
       }
 
-      .icon-caret-down {
+      .fa-caret-down {
         opacity: 0.25;
       }
 
       &:hover {
 
-        .icon-caret-down {
+        .fa-caret-down {
           opacity: 1.0;
         }
       }
 
       .nav-sub .nav-item {
 
-        [class^="icon-"] {
+        .icon {
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/4);

cms/static/sass/elements/_icons.scss

@@ -1,11 +1,6 @@
 // studio - elements - icons & badges
 // ====================
-
 .icon {
-
-}
-
-[class^="icon-"] {
   font-style: normal;
 }
 
@@ -32,7 +27,7 @@
   padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
   text-transform: uppercase;
 
-  * [class^="icon-"] {
+  * .icon {
     margin-right: ($baseline/5);
   }
 

cms/static/sass/elements/_layout.scss

@@ -72,7 +72,7 @@
             vertical-align: baseline;
           }
 
-          [class^="icon-"] {
+          .icon {
             display: inline-block;
             vertical-align: baseline;
           }

cms/static/sass/elements/_navigation.scss

@@ -50,7 +50,7 @@ nav {
 
   .title {
 
-    .label, .icon-caret-down {
+    .label, .fa-caret-down {
       display: inline-block;
       vertical-align: middle;
     }

cms/static/sass/elements/_sock.scss

@@ -33,7 +33,7 @@
       padding: ($baseline/2) $baseline;
       color: $gray;
 
-      [class^="icon-"] {
+      .icon {
         @extend %t-icon6;
         @include margin-right($baseline/4);
       }
@@ -95,7 +95,7 @@
             @extend %t-action4;
             display: block;
 
-            [class^="icon-"] {
+            .icon {
               @extend %t-icon4;
               vertical-align: middle;
               @include margin-right($baseline/4);

cms/static/sass/elements/_system-feedback.scss

@@ -656,7 +656,7 @@
       @extend %cont-text-sr;
     }
 
-    [class^="icon"] {
+    .icon {
       @extend %t-icon6;
       color: $white;
       width: auto;
@@ -763,7 +763,7 @@
     padding: ($baseline/2) ($baseline*.75);
     color: $white;
 
-    [class^="icon-"] {
+    .icon {
       font-style: normal;
     }
 
@@ -785,7 +785,7 @@
     &.has-warnings {
       border-bottom: 3px solid $orange;
 
-      .icon-warning-sign {
+      .fa-warning {
         margin-right: ($baseline/2);
         color: $orange;
       }
@@ -794,7 +794,7 @@
     &.has-errors {
       border-bottom: 3px solid $red-l2;
 
-      .icon-exclamation-sign {
+      .fa-exclamation-circle {
         margin-right: ($baseline/2);
         color: $red-l2;
       }