removed symbolset, replaced with fontawesome for view live, expand collape, zoom buttons

cms/static/js/base.js

@@ -209,8 +209,8 @@ function toggleSections(e) {
     $section = $('.courseware-section');
     sectionCount = $section.length;
     $button = $(this);
-    $labelCollapsed = $('<i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span>');
-    $labelExpanded = $('<i class="ss-icon ss-symbolicons-block">down</i> <span class="label">Expand All Sections</span>');
+    $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span>');
+    $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span>');
 
     var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
     $button.toggleClass('is-activated').html(buttonLabel);

cms/static/sass/_base.scss

@@ -767,12 +767,12 @@ hr.divide {
     display: block;
   }
 
-  .icon-view {
-    @include font-size(15);
+  .icon-eye-open {
+    @include font-size(16);
     display: inline-block;
     vertical-align: middle;
-    margin-right: ($baseline/2);
-    margin-top: ($baseline/5);
+    margin-right: 8px;
+    margin-top: -3px;
     line-height: 0;
   }
 }
@@ -887,7 +887,7 @@ body.js {
         @extend .text-sr;
       }
 
-      .ss-icon {
+      [class^="icon-"] {
         @include font-size(18);
         color: $white;
       }

cms/static/sass/views/_index.scss

@@ -164,11 +164,11 @@ body.index {
               right: ($baseline/2);
               opacity: 0;
 
-              .ss-icon {
+              [class^="icon-"] {
                 @include font-size(18);
                 @include border-top-radius(3px);
                 display: inline-block;
-                padding: ($baseline/4) ($baseline/2);
+                padding: ($baseline/2);
                 background: $blue;
                 color: $white;
                 text-align: center;

cms/static/sass/views/_outline.scss

@@ -533,7 +533,7 @@ body.course.outline {
           display: block;
       }
 
-      .ss-icon {
+      [class^="icon-"] {
           @include font-size(11);
           @include border-radius(20px);
           position: relative;

cms/templates/edit-tabs.html

@@ -76,7 +76,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon-close icon">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>

cms/templates/howitworks.html

@@ -28,7 +28,7 @@
             <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
             <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+              <i class="icon-zoom-in"></i>
             </span>
           </a>
         </figure>
@@ -62,7 +62,7 @@
           <img src="/static/img/thumb-hiw-feature2.png" alt="Learning is More than Just Lectures" />
           <figcaption class="sr">Learning is More than Just Lectures</figcaption>
           <span class="action-zoom">
-            <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+            <i class="icon-zoom-in"></i>
           </span>
         </a>
         </figure>
@@ -96,7 +96,7 @@
             <img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+              <i class="icon-zoom-in"></i>
             </span>
           </a>
         </figure>
@@ -132,7 +132,7 @@
     <header>
       <h2 class="sr">Sign Up for Studio Today!</h2>
     </header>
-    
+
     <ul class="list-actions">
       <li class="action-item">
         <a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a>
@@ -152,7 +152,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -165,7 +165,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -178,8 +178,8 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
-</%block>
+</%block>
\ No newline at end of file

cms/templates/index.html

@@ -76,7 +76,7 @@
             <a class="class-link" href="${url}" class="class-name">
               <span class="class-name">${course}</span>
             </a>
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
+            <a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
           </li>
             %endfor
         </ul>

cms/templates/overview.html

@@ -115,13 +115,13 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block icon">up</i> <span class="label">Collapse All Sections</span></a>
+            <a href="#" class="toggle-button toggle-button-sections"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></a>
           </li>
           <li class="nav-item">
             <a href="#" class="button new-button new-courseware-section-button"><i class="icon-plus"></i> New Section</a>
           </li>
           <li class="nav-item">
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
+            <a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
           </li>
         </ul>
       </nav>