[pdf file view] zoom toolbar: use new icons (#4432)

frontend/src/components/pdf-viewer.js

@@ -197,9 +197,9 @@ class PDFViewer extends React.Component {
                   </div>
                   <div id="toolbarViewerMiddle" className="zoom-toolbar">
                     <div className="splitToolbarButton d-flex flex-column">
-                      <button id="restoreToAuto" title={gettext('Default Size')} className="fas fa-square btn btn-icon rounded mb-4"></button>
+                      <button id="restoreToAuto" title={gettext('Default Size')} className="sf3-font sf3-font-page-size btn btn-icon rounded mb-4"></button>
-                      <button id="zoomIn" className="toolbarButton zoomIn fas fa-plus btn btn-icon rounded mb-2" title={gettext('Zoom In')} tabIndex="22" data-l10n-id="zoom_in"></button>
+                      <button id="zoomIn" className="toolbarButton zoomIn sf3-font sf3-font-enlarge btn btn-icon rounded mb-2" title={gettext('Zoom In')} tabIndex="22" data-l10n-id="zoom_in"></button>
-                      <button id="zoomOut" className="toolbarButton zoomOut fas fa-minus btn btn-icon rounded" title={gettext('Zoom Out')} tabIndex="21" data-l10n-id="zoom_out">
+                      <button id="zoomOut" className="toolbarButton zoomOut sf3-font sf3-font-narrow btn btn-icon rounded" title={gettext('Zoom Out')} tabIndex="21" data-l10n-id="zoom_out">
                       </button>
                       <div className="splitToolbarButtonSeparator"></div>
                     </div>

media/css/sf_font3/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "sf3-font";
-  src: url('iconfont.eot?t=1568629720479'); /* IE9 */
+  src: url('iconfont.eot?t=1581318305835'); /* IE9 */
-  src: url('iconfont.eot?t=1568629720479#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  src: url('iconfont.eot?t=1581318305835#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1568629720479') format('woff'),
+  url('iconfont.woff?t=1581318305835') format('woff'),
-  url('iconfont.ttf?t=1568629720479') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.ttf?t=1581318305835') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1568629720479#sf3-font') format('svg'); /* iOS 4.1- */
+  url('iconfont.svg?t=1581318305835#sf3-font') format('svg'); /* iOS 4.1- */
 }
 
 .sf3-font {
@@ -43,3 +43,15 @@
   content: "\e675";
 }
 
+.sf3-font-page-size:before {
+  content: "\e6ae";
+}
+
+.sf3-font-enlarge:before {
+  content: "\e6af";
+}
+
+.sf3-font-narrow:before {
+  content: "\e6b0";
+}
+

media/css/sf_font3/iconfont.svg

@@ -41,6 +41,15 @@ Created by iconfont
     <glyph glyph-name="arrow" unicode="&#58997;" d="M636.8-41.6l364.8 368c22.4 22.4 28.8 54.4 16 80 0 3.2-3.2 3.2-3.2 6.4-3.2 9.6-9.6 12.8-12.8 19.2L640 809.6c-28.8 32-73.6 32-102.4 3.2-32-28.8-32-76.8-6.4-108.8l3.2-3.2 233.6-243.2H73.6C32 457.6 0 425.6 0 384s28.8-76.8 70.4-76.8h704L531.2 64c-28.8-28.8-28.8-76.8-3.2-105.6 28.8-28.8 76.8-32 108.8 0-3.2 0 0 0 0 0z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="page-size" unicode="&#59054;" d="M960 320v-384H576v128h256v256h128zM192 320v-256h256v-128H64V320h128zM960 832v-384h-128V704h-256V832h384zM64 832h384v-128H192v-256H64V832z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="enlarge" unicode="&#59055;" d="M576 832v-384h384v-128H576v-384h-128V320H64v128h384V832h128z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="narrow" unicode="&#59056;" d="M64 448h896v-128H64z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>