style(theme-shared): change table sort icons

npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html

@@ -1,3 +1,3 @@
-<span class="float-right {{ iconClass }}">
-  <i class="fa {{ icon }}"></i>
-</span>
+<div class="float-right {{ iconClass }}">
+  <span class="{{ icon }}"></span>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts

@@ -61,8 +61,8 @@ export class SortOrderIconComponent {
   iconClass: string;
 
   get icon(): string {
-    if (!this.selectedSortKey) return 'fa-sort';
-    if (this.selectedSortKey === this.sortKey) return `fa-sort-${this.order}`;
+    if (!this.selectedSortKey) return 'sorting';
+    if (this.selectedSortKey === this.sortKey) return `sorting_${this.order}`;
     else return '';
   }
 

npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts

@@ -241,6 +241,33 @@ body abp-toast .ui-toast .ui-toast-message.ui-toast-message-info .ui-toast-messa
   max-height: 100vh;
 }
 
+[class^="sorting"] {
+  opacity: .3;
+  cursor: pointer;
+}
+[class^="sorting"]:before {
+  right: 0.5rem;
+  content: "↑";
+}
+[class^="sorting"]:after {
+  right: 0.5rem;
+  content: "↓";
+}
+
+.sorting_desc {
+  opacity: 1;
+}
+.sorting_desc:before {
+  opacity: .3;
+}
+
+.sorting_asc {
+  opacity: 1;
+}
+.sorting_asc:after {
+  opacity: .3;
+}
+
 @keyframes fadeInTop {
   from {
     transform: translateY(-5px);