Convert icons on course_about to font awesome

lms/static/sass/multicourse/_course_about.scss

@@ -500,21 +500,21 @@
         }
 
         .share {
-          height: 44px;
           display: inline-block;
-          margin-right: 10px;
+          height: 35px;
+          width: 35px;
+          margin-right: ($baseline);
+          margin-top: ($baseline/4);
+          font-size: 1.75em;
+          text-decoration: none;
+          color: $black;
           opacity: 0.5;
           @include transition(all 0.15s linear 0s);
-          width: 44px;
 
           &:hover, &:focus {
             opacity: 1.0;
           }
 
-          img {
-            width: 100%;
-          }
-
           &:last-child {
             margin-right: 0px;
           }
@@ -532,21 +532,21 @@
     .important-dates {
       list-style: none;
       margin: 0px;
-      padding: 0px 10px;
+      padding: 0 ($baseline/2);
 
       li {
         @include clearfix;
         border-bottom: 1px dotted $border-color-2;
-        margin-bottom: 20px;
-        padding-bottom: 10px;
+        margin-bottom: $baseline;
+        padding-bottom: ($baseline/2);
 
         &.prerequisites {
           border: 1px solid $border-color-2;
-          margin: 0 -10px 0;
-          padding: 10px;
+          margin: 0 -($baseline/2) 0;
+          padding: ($baseline/2);
 
           p {
-            margin-right: 10px;
+            margin-right: ($baseline/2);
           }
         }
 
@@ -563,37 +563,10 @@
         }
 
         .icon {
-          background-size: cover;
             float: left;
-          height: 19px;
-          margin: 2px 10px 0 0;
-          opacity: 0.6;
-          @include transition(all 0.15s linear 0s);
-          width: 19px;
-
-          &.start {
-            @include background-image(url('../images/portal-icons/calendar-icon.png'));
-          }
-
-          &.end {
-            @include background-image(url('../images/portal-icons/calendar-icon.png'));
-          }
-
-          &.length {
-            @include background-image(url('../images/portal-icons/chart-icon.png'));
-          }
-
-          &.course-number {
-            @include background-image(url('../images/portal-icons/course-info-icon.png'));
-          }
-
-          &.effort {
-            @include background-image(url('../images/portal-icons/pencil-icon.png'));
-          }
-
-          &.prereq {
-            @include background-image(url('../images/portal-icons/prerec-icon.png'));
-          }
+            padding: 1px;
+            margin: ($baseline/5) ($baseline/2) 0 0;
+            opacity: .6;
         }
 
         span {

lms/templates/courseware/course_about.html

@@ -237,10 +237,10 @@
             ##       want here (and on this whole page, really).
             % if self.stanford_theme_enabled():
               <a href="http://twitter.com/intent/tweet?text=I+just+registered+for+${course.number}+${get_course_about_section(course, 'title')}!+(http://class.stanford.edu)" class="share">
-                <img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
+                <i class="icon icon-twitter"></i><span class="sr">Tweet that you've registered for this course</span>
               </a>
               <a href="mailto:?subject=Take%20a%20course%20at%20Stanford%20online!&body=I%20just%20registered%20for%20${course.number}%20${get_course_about_section(course, 'title')}+(http://class.stanford.edu)" class="share">
-                <img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
+                <i class="icon icon-envelope"></i><span class="sr">Email someone to say you've registered for this course</span>
               </a>
             % else:
               <%
@@ -276,13 +276,13 @@
                 ).replace(u" ", u"%20")
               %>
               <a href="${tweet_action}" class="share">
-                <img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
+                <i class="icon icon-twitter"></i><span class="sr">Tweet that you've registered for this course</span>
               </a>
               <a href="${facebook_link}" class="share">
-                <img src="${static.url('images/social/facebook-sharing.png')}" alt="Post a Facebook message to say you've registered for this course">
+                <i class="icon icon-thumbs-up"></i><span class="sr">Post a Facebook message to say you've registered for this course</span>
               </a>
               <a href="${email_subject}" class="share">
-                <img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
+                <i class="icon icon-envelope"></i><span class="sr">Email someone to say you've registered for this course</span>
               </a>
             % endif
           </div>
@@ -290,15 +290,15 @@
         </header>
 
         <ol class="important-dates">
-          <li><div class="icon course-number"></div><p>${_("Course Number")}</p><span class="course-number">${course.display_number_with_default | h}</span></li>
+          <li><i class="icon icon-info-sign"></i><p>${_("Course Number")}</p><span class="course-number">${course.display_number_with_default | h}</span></li>
           % if not course.start_date_is_still_default:
-          <li><div class="icon start"></div><p>${_("Classes Start")}</p><span class="start-date">${course.start_datetime_text()}</span></li>
+            <li><i class="icon icon-calendar"></i><p>${_("Classes Start")}</p><span class="start-date">${course.start_datetime_text()}</span></li>
           % endif
             ## We plan to ditch end_date (which is not stored in course metadata),
             ## but for backwards compatibility, show about/end_date blob if it exists.
             % if get_course_about_section(course, "end_date") or course.end:
             <li>
-                <div class="icon end"></div>
+                <i class="icon icon-calendar"></i>
                 <p>${_("Classes End")}</p><span class="final-date">
                 % if get_course_about_section(course, "end_date"):
                     ${get_course_about_section(course, "end_date")}
@@ -310,13 +310,13 @@
             % endif
 
           % if get_course_about_section(course, "effort"):
-            <li><div class="icon effort"></div><p>${_("Estimated Effort")}</p><span class="start-date">${get_course_about_section(course, "effort")}</span></li>
+            <li><i class="icon icon-pencil"></i><p>${_("Estimated Effort")}</p><span class="start-date">${get_course_about_section(course, "effort")}</span></li>
           % endif
 
-          ##<li><div class="icon length"></div><p>${_('Course Length')}</p><span class="course-length">${_('{number} weeks').format(number=15)}</span></li>
+          ##<li><i class="icon icon-time"></i><p>${_('Course Length')}</p><span class="course-length">${_('{number} weeks').format(number=15)}</span></li>
 
           % if get_course_about_section(course, "prerequisites"):
-            <li class="prerequisites"><div class="icon prereq"></div><p>${_("Prerequisites")}</p><span class="start-date">${get_course_about_section(course, "prerequisites")}</span></li>
+            <li class="prerequisites"><i class="icon icon-book"></i><p>${_("Prerequisites")}</p><span class="start-date">${get_course_about_section(course, "prerequisites")}</span></li>
           % endif
         </ol>
       </section>