[side nav] replaced some icons so that they are horizontally aligned …

frontend/src/components/main-side-nav.js

@@ -209,27 +209,27 @@ class MainSideNav extends React.Component {
 
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
-                <span className="sf2-icon-star" aria-hidden="true"></span>
+                <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             {showActivity &&
               <li className="nav-item">
                 <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
-                  <span className="sf2-icon-clock" aria-hidden="true"></span>
+                  <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
               </li>
             }
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
-                <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
+                <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Wikis')}</span>
               </Link>
             </li>
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={(e) => this.tabItemClick(e, 'linked-devices')}>
-                <span className="sf2-icon-monitor" aria-hidden="true"></span>
+                <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Linked Devices')}</span>
               </Link>
             </li>
@@ -243,7 +243,7 @@ class MainSideNav extends React.Component {
             }
             <li className="nav-item flex-column" id="share-admin-nav">
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
-                <span className="sf2-icon-wrench" aria-hidden="true"></span>
+                <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
                 <span className={`toggle-icon fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
               </a>

media/css/seahub_react.css

@@ -152,7 +152,7 @@ a, a:hover { color: #ec8000; }
 }
 
 .sf-heading .nav-icon {
-  font-size: .875rem;
+  font-size: 1rem;
   margin-right: 6px;
   line-height: 1;
   color: #999;
@@ -681,7 +681,7 @@ a, a:hover { color: #ec8000; }
 
 .side-nav-con [class^="sf2-icon-"],
 .side-nav-con [class^="sf3-font-"] {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     line-height: 1;
     color: #999;
     margin-right: 0.5rem;
@@ -727,14 +727,14 @@ a, a:hover { color: #ec8000; }
     height: auto;
 }
 .side-nav-con .sub-nav#files-sub-nav .nav-item .nav-link {
-    padding-left: 2.5rem;
+    padding-left: 2.25rem;
     height: 28px;
     display: flex;
     align-items: center;
 }
 
 .side-nav-con .sub-nav#files-sub-nav .nav-item .nav-link .nav-icon {
-  font-size: .875rem;
+  font-size: 1rem;
   margin-right: 6px;
 }
 

media/css/sf_font3/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sf3-font"; /* Project id 1230969 */
-  src: url('iconfont.eot?t=1713953465004'); /* IE9 */
-  src: url('iconfont.eot?t=1713953465004#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1713953465004') format('woff2'),
-       url('iconfont.woff?t=1713953465004') format('woff'),
-       url('iconfont.ttf?t=1713953465004') format('truetype'),
-       url('iconfont.svg?t=1713953465004#sf3-font') format('svg');
+  src: url('iconfont.eot?t=1714979170396'); /* IE9 */
+  src: url('iconfont.eot?t=1714979170396#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1714979170396') format('woff2'),
+       url('iconfont.woff?t=1714979170396') format('woff'),
+       url('iconfont.ttf?t=1714979170396') format('truetype'),
+       url('iconfont.svg?t=1714979170396#sf3-font') format('svg');
 }
 
 .sf3-font {
@@ -16,6 +16,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sf3-font-starred:before {
+  content: "\e80b";
+}
+
+.sf3-font-devices:before {
+  content: "\e80c";
+}
+
+.sf3-font-wrench:before {
+  content: "\e808";
+}
+
+.sf3-font-wiki:before {
+  content: "\e809";
+}
+
+.sf3-font-activities:before {
+  content: "\e80a";
+}
+
 .sf3-font-share-with-all:before {
   content: "\e807";
 }