Fix part of oppia#15968 : Replace material icons with FA icons. (oppi…

…a#16269) * Migrate from Material Icons to FonT Awesome for some files * Migrate from Material Icons to FonT Awesome for some files * Migrate from Material Icons to FonT Awesome for some files * Migrate from Material Icons to FonT Awesome for some files * Migrate from Material Icons to FonT Awesome for some files * Migrate from Material Icons to FonT Awesome for some files * Update collection-editor-navbar.component.html
aishacodes · Oct 19, 2022 · dce0717 · dce0717
1 parent c719ef2
commit dce0717
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/core/templates/pages/collection-editor-page/editor-tab/collection-node-editor.component.html b/core/templates/pages/collection-editor-page/editor-tab/collection-node-editor.component.html
@@ -9,26 +9,20 @@
   <span class="collection-editor-delete-node e2e-test-editor-delete-node">
     <span (click)="deleteNode()"
           aria-hidden="true">
-      <i class="material-icons mat-18">
-        &#xE14C;
-      </i>
+      <i class="fas fa-times"></i>
     </span>
   </span>
   <span (click)="shiftNodeLeft()"
         *ngIf="linearIndex > 0"
         class="collection-editor-shift-left-arrow e2e-test-editor-shift-left"
         aria-hidden="true">
-    <i class="material-icons">
-      &#xE5CB;
-    </i>
+    <i class="fas fa-chevron-left"></i>
   </span>
   <span (click)="shiftNodeRight()"
         *ngIf="linearIndex < collection?.getCollectionNodeCount() - 1"
         class="collection-editor-shift-right-arrow e2e-test-editor-shift-right"
         aria-hidden="true">
-    <i class="material-icons">
-      &#xE5CC;
-    </i>
+    <i class="fas fa-chevron-right"></i>
   </span>
 </mat-card>
 
@@ -49,14 +43,14 @@
   .collection-editor-delete-node {
     color: #ef5350;
     position: absolute;
-    right: 0;
+    right: 4.5px;
     top: 0;
   }
 
   .collection-editor-shift-left-arrow {
     bottom: 0;
     color: #000;
-    left: 0;
+    left: 7px;
     opacity: 0.7;
     position: absolute;
   }
@@ -65,7 +59,7 @@
     color: #000;
     opacity: 0.7;
     position: absolute;
-    right: 0;
+    right: 7px;
   }
   .collection-editor-shift-left-arrow:hover {
     cursor: pointer;

diff --git a/core/templates/pages/collection-editor-page/navbar/collection-editor-navbar.component.html b/core/templates/pages/collection-editor-page/navbar/collection-editor-navbar.component.html
@@ -6,7 +6,7 @@
       (mouseleave)="$event.stopPropagation(); onEditButtonHover()"
       class="nav-item">
     <a href="#" ngbTooltip="Editor" (click)="selectMainTab()" class="nav-link e2e-test-main-tab">
-      <i class="material-icons">&#xE254;</i>
+      <i class="fas fa-pen"></i>
     </a>
     <div *ngIf="getWarningsCount()"
          class="oppia-editor-warnings-indicator oppia-editor-warnings-error-color"
@@ -28,7 +28,7 @@
   <!-- Settings -->
   <li [ngClass]="{'active': getActiveTabName() === 'settings'}" class="nav-item">
     <a href="#" ngbTooltip="Settings" placement="bottom" (click)="selectSettingsTab()" class="nav-link e2e-test-settings-tab">
-      <i class="material-icons">&#xE8B8;</i>
+      <i class="fas fa-cog"></i>
     </a>
   </li>
 
@@ -43,7 +43,7 @@
        rel="noopener"
        ngbTooltip="Player (new tab)"
        placement="bottom" class="nav-link">
-      <i class="material-icons">&#xE037;</i>
+      <i class="fas fa-play"></i>
       <div *ngIf="getWarningsCount()"
            class="oppia-editor-warnings-indicator oppia-editor-warnings-error-color"
            (click)="selectMainTab()">
@@ -84,20 +84,18 @@
             [disabled]="!isCollectionSaveable()">
       <span *ngIf="!isSaveInProgress()">
         <span *ngIf="collectionRights.isPrivate()">
-          <i class="material-icons md-18 oppia-save-publish-button-icon"
+          <i class="fas fa-save oppia-save-publish-button-icon"
              alt="Save Collection">
-            &#xE161;
           </i>
-          <span class="oppia-save-publish-button-label float-left">Save Draft</span>
+          <span class="oppia-save-publish-button-label">Save Draft</span>
           <span class="d-none d-md-block float-left oppia-change-count"
                 *ngIf="getChangeListCount() > 0">
             ({{ getChangeListCount() }})
           </span>
         </span>
         <span *ngIf="collectionRights.isPublic()" title="Publish Changes">
-          <i class="material-icons md-18 oppia-save-publish-button-icon"
+          <i class="fas fa-cloud-upload-alt oppia-save-publish-button-icon"
              alt="Publish Changes">
-            &#xE2C3;
           </i>
           <span class="oppia-save-publish-button-label">Publish Changes</span>
         </span>

diff --git a/...tes/pages/collection-player-page/collection-local-nav/collection-local-nav.component.html b/...tes/pages/collection-player-page/collection-local-nav/collection-local-nav.component.html
@@ -2,14 +2,16 @@
   <ul class="nav navbar-nav oppia-navbar-nav float-right oppia-navbar-pencil-icon">
     <li *ngIf="canEdit" class="nav-item">
       <a [href]="'/collection_editor/create/' + collectionId" ngbTooltip="Edit" placement="bottom" target="_blank" rel="noopener" class="nav-link">
-        <i class="material-icons">&#xE254;</i>
+        <i class="fas fa-pen fa-lg"></i>
         <span class="oppia-icon-accessibility-label">Edit</span>
       </a>
     </li>
   </ul>
 </div>
 <style>
   .oppia-navbar-pencil-icon {
-    margin-right: 0;
+    margin-right: 8px;
+    margin-top: 3px;
+
   }
 </style>