replacing img with div

apps/documenteditor/main/resources/help/de/HelpfulHints/CollaborativeEditing.htm

@@ -17,21 +17,21 @@
         <h1>Gemeinsame Bearbeitung von Dokumenten in Echtzeit</h1>
         <p>Der <a href="https://www.onlyoffice.com/de/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> ermöglicht es Ihnen, einen konstanten teamweiten Ansatz für den Arbeitsablauf beizubehalten: Sie können die Dateien und Ordner <a href="https://helpcenter.onlyoffice.com/de/userguides/groups-guides-documents-share-documents.aspx">freigeben</a>; direkt im Editor <a href="../HelpfulHints/Communicating.htm" onclick="onhyperlinkclick(this)">kommunizieren</a>; bestimmte Teile Ihrer Dokumente, die zusätzliche Eingaben Dritter erfordern, <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">kommentieren</a>; <a href="../HelpfulHints/VersionHistory.htm" onclick="onhyperlinkclick(this)">Dokumentversionen</a> für zukünftige Verwendung speichern; Dokumente <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">überprüfen</a> und Ihre Änderungen hinzufügen, ohne die Datei tatsächlich zu bearbeiten; Dokumente <a href="../HelpfulHints/Comparison.htm" onclick="onhyperlinkclick(this)">vergleichen und zusammenführen</a>, um die Verarbeitung und Bearbeitung zu erleichtern.</p>
         <p>Im <b>Dokumenteneditor</b> können Sie in Echtzeit an Dokumenten mit zwei Modi zusammenarbeiten: <b>Schnell</b> oder <b>Formal</b>.</p>
-        <p>Die Modi können in den <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">erweiterten Einstellungen</a> ausgewählt werden. Es ist auch möglich, den gewünschten Modus über das Symbol <img alt="Co-editing Mode icon" src="../images/coeditingmode.png" /> <b>Modus "Gemeinsame Bearbeitung"</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste auswählen:</p>
+        <p>Die Modi können in den <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">erweiterten Einstellungen</a> ausgewählt werden. Es ist auch möglich, den gewünschten Modus über das Symbol <div class = "icon icon-coeditingmode"></div> <b>Modus "Gemeinsame Bearbeitung"</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste auswählen:</p>
         <p><img alt="Co-editing Mode menu" src="../images/coeditingmodemenu.png" /></p>
-        <p>Die Anzahl der Benutzer, die an dem aktuellen Dokument arbeiten, wird auf der rechten Seite der Editor-Kopfzeile angezeigt - <img alt="Number of users icon" src="../images/usersnumber.png" />. Wenn Sie sehen möchten, wer genau die Datei gerade bearbeitet, können Sie auf dieses Symbol klicken oder das <b>Chat</b>-Bedienfeld mit der vollständigen Liste der Benutzer öffnen.</p>
+        <p>Die Anzahl der Benutzer, die an dem aktuellen Dokument arbeiten, wird auf der rechten Seite der Editor-Kopfzeile angezeigt - <div class = "icon icon-usersnumber"></div>. Wenn Sie sehen möchten, wer genau die Datei gerade bearbeitet, können Sie auf dieses Symbol klicken oder das <b>Chat</b>-Bedienfeld mit der vollständigen Liste der Benutzer öffnen.</p>
         <h3>Modus "Schnell"</h3>
         <p>Der Modus <b>Schnell</b> wird standardmäßig verwendet und zeigt die von anderen Benutzern vorgenommenen Änderungen in Echtzeit an. Wenn Sie ein Dokument in diesem Modus gemeinsam bearbeiten, ist die Möglichkeit zum <b>Wiederholen</b> des letzten rückgängig gemachten Vorgangs nicht verfügbar. In diesem Modus werden die Aktionen und die Namen der Co-Autoren angezeigt, wenn sie den Text bearbeiten.</p>
         <p>Wenn Sie den Mauszeiger über eine der bearbeiteten Passagen bewegen, wird der Name des Benutzers angezeigt, der sie gerade bearbeitet.</p>
         <p><img alt="Modus Schnell" src="../images/fastmode.png" /></p>
         <h3>Modus "Formal"</h3>
-        <p>Der Modus <b>Formal</b> wird ausgewählt, um die von anderen Benutzern vorgenommenen Änderungen auszublenden, bis Sie auf das Symbol <b>Speichern</b> <img alt="Save icon" src="../images/savewhilecoediting.png" /> klicken, um Ihre Änderungen zu speichern und die von Co-Autoren vorgenommenen Änderungen anzunehmen. Wenn ein Dokument in diesem Modus von mehreren Benutzern gleichzeitig bearbeitet wird, werden die bearbeiteten Textpassagen mit gestrichelten Linien in unterschiedlichen Farben gekennzeichnet.</p>
+        <p>Der Modus <b>Formal</b> wird ausgewählt, um die von anderen Benutzern vorgenommenen Änderungen auszublenden, bis Sie auf das Symbol <b>Speichern</b> <div class = "icon icon-savewhilecoediting"></div> klicken, um Ihre Änderungen zu speichern und die von Co-Autoren vorgenommenen Änderungen anzunehmen. Wenn ein Dokument in diesem Modus von mehreren Benutzern gleichzeitig bearbeitet wird, werden die bearbeiteten Textpassagen mit gestrichelten Linien in unterschiedlichen Farben gekennzeichnet.</p>
         <p><img alt="Modus Formal" src="../images/strictmode.png" /></p>
-        <p>Sobald einer der Benutzer seine Änderungen durch Klicken auf das Symbol <img alt="Save icon" src="../images/savewhilecoediting.png" /> speichert, sehen die anderen einen Hinweis in der Statusleiste, der darauf hinweist, dass es Aktualisierungen gibt. Um die von Ihnen vorgenommenen Änderungen zu speichern, damit andere Benutzer sie sehen und die von Ihren Mitbearbeitern gespeicherten Aktualisierungen abrufen können, klicken Sie auf das Symbol <img alt="Save icon" src="../images/saveupdate.png" /> in der linken oberen Ecke der oberen Symbolleiste. Die Aktualisierungen werden hervorgehoben, damit Sie sehen können, was genau geändert wurde.</p>
+        <p>Sobald einer der Benutzer seine Änderungen durch Klicken auf das Symbol <div class = "icon icon-savewhilecoediting"></div> speichert, sehen die anderen einen Hinweis in der Statusleiste, der darauf hinweist, dass es Aktualisierungen gibt. Um die von Ihnen vorgenommenen Änderungen zu speichern, damit andere Benutzer sie sehen und die von Ihren Mitbearbeitern gespeicherten Aktualisierungen abrufen können, klicken Sie auf das Symbol <div class = "icon icon-saveupdate"></div> in der linken oberen Ecke der oberen Symbolleiste. Die Aktualisierungen werden hervorgehoben, damit Sie sehen können, was genau geändert wurde.</p>
         <p>Sie können angeben, welche Änderungen während der gemeinsamen Bearbeitung hervorgehoben werden sollen, indem Sie auf die Registerkarte <b>Datei</b> in der oberen Symbolleiste klicken, die Option <b>Erweiterte Einstellungen...</b> auswählen und eine der drei Möglichkeiten auswählen:</p>
         <ul>
             <li><b>Alle anzeigen</b>: Alle Änderungen, die während der aktuellen Sitzung vorgenommen wurden, werden hervorgehoben.</li>
-            <li><b>Letzte anzeigen</b>: Nur die Änderungen, die seit dem letzten Klicken auf das Symbol <img alt="Save icon" src="../images/saveupdate.png" /> vorgenommen wurden, werden hervorgehoben.</li>
+            <li><b>Letzte anzeigen</b>: Nur die Änderungen, die seit dem letzten Klicken auf das Symbol <div class = "icon icon-saveupdate"></div> vorgenommen wurden, werden hervorgehoben.</li>
             <li><b>Keine</b>: Änderungen, die während der aktuellen Sitzung vorgenommen wurden, werden nicht hervorgehoben.</li>
         </ul>
         <h3>Anonym</h3>

apps/documenteditor/main/resources/help/de/HelpfulHints/Commenting.htm

@@ -4,6 +4,7 @@
     <title>Dokumente kommentieren</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tipps zur gemeinsamen Bearbeitung" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -21,15 +22,15 @@
         <ol>
             <li>Wählen Sie eine Textpassage aus, bei der Sie der Meinung sind, dass ein Fehler oder Problem vorliegt.</li>
             <li>
-                Wechseln Sie zur Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> der oberen Symbolleiste und klicken Sie auf die Schaltfläche <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Kommentar hinzufügen</b>, oder<br />
-                Verwenden Sie das Symbol <img alt="Comments icon" src="../images/commentsicon.png" /> in der linken Seitenleiste, um das Bedienfeld <b>Kommentare</b> zu öffnen, und klicken Sie auf den Link <b>Kommentar zum Dokument hinzufügen</b>, oder<br />
+                Wechseln Sie zur Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> der oberen Symbolleiste und klicken Sie auf die Schaltfläche <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentar hinzufügen</b>, oder<br />
+                Verwenden Sie das Symbol <div class = "icon icon-commentsicon"></div> in der linken Seitenleiste, um das Bedienfeld <b>Kommentare</b> zu öffnen, und klicken Sie auf den Link <b>Kommentar zum Dokument hinzufügen</b>, oder<br />
                 Klicken Sie mit der rechten Maustaste auf die ausgewählte Textpassage und wählen Sie im Kontextmenü die Option <b>Kommentar hinzufügen</b>.
             </li>
             <li>Geben Sie den erforderlichen Text ein.</li>
             <li>Klicken Sie auf die Schaltfläche <b>Kommentar hinzufügen/Hinzufügen</b>.</li>
         </ol>
         <p>Der Kommentar wird links im Bereich <b>Kommentare</b> angezeigt. Jeder andere Benutzer kann den hinzugefügten Kommentar beantworten, indem er Fragen stellt oder über seine Arbeit berichtet. Klicken Sie dazu auf den Link <b>Antwort hinzufügen</b> unterhalb des Kommentars, geben Sie Ihre Antwort in das Eingabefeld ein und drücken Sie die Schaltfläche <b>Antworten</b>.</p>
-        <p>Wenn Sie den Co-Bearbeitungsmodus <b>Formal</b> verwenden, werden neue Kommentare, die von anderen Benutzern hinzugefügt wurden, erst sichtbar, nachdem Sie auf das Symbol <img alt="Save icon" src="../images/saveupdate.png" /> in der linken oberen Ecke in der oberen Symbolleiste geklickt haben.</p>
+        <p>Wenn Sie den Co-Bearbeitungsmodus <b>Formal</b> verwenden, werden neue Kommentare, die von anderen Benutzern hinzugefügt wurden, erst sichtbar, nachdem Sie auf das Symbol <div class = "icon icon-saveupdate"></div> in der linken oberen Ecke in der oberen Symbolleiste geklickt haben.</p>
         <h3>Anzeige von Kommentaren deaktivieren</h3>
         <p>Die von Ihnen kommentierte Textpassage wird im Dokument hervorgehoben. Um den Kommentar anzuzeigen, klicken Sie einfach innerhalb der Passage. Um diese Funktion zu deaktivieren:</p>
         <ol>
@@ -37,12 +38,12 @@
             <li>Wählen Sie die Option <b>Erweiterte Einstellungen...</b> aus.</li>
             <li>Deaktivieren Sie das Kontrollkästchen <b>Live-Kommentare einschalten</b>.</li>
         </ol>
-        <p>Jetzt werden die kommentierten Passagen nur dann hervorgehoben, wenn Sie auf das Symbol <img alt="Comments icon" src="../images/commentsicon.png" /> klicken.</p>
+        <p>Jetzt werden die kommentierten Passagen nur dann hervorgehoben, wenn Sie auf das Symbol <div class = "icon icon-commentsicon"></div> klicken.</p>
         <h3>Kommentare verwalten</h3>
         <p>Sie können die hinzugefügten Kommentare mit den Symbolen in der Kommentarsprechblase oder im Bereich <b>Kommentare</b> auf der linken Seite verwalten:</p>
         <ul>
             <li>
-                Sortieren Sie die hinzugefügten Kommentare, indem Sie auf das Symbol <img alt="Sort icon" src="../images/sortcommentsicon.png" /> klicken:
+                Sortieren Sie die hinzugefügten Kommentare, indem Sie auf das Symbol <div class = "icon icon-sortcommentsicon"></div> klicken:
                 <ul>
                     <li>nach Datum: <b>Neueste zuerst</b> oder <b>Älteste zuerste</b>. Dies ist die standardmäßige Sortierreihenfolge.</li>
                     <li>nach Verfasser: <b>Verfasser (A-Z)</b> oder <b>Verfasser (Z-A)</b>.</li>
@@ -52,9 +53,9 @@
                         <p><img alt="Sort comments" src="../images/sortcomments.png" /></p>
                     </li>
                 </ul>
-            <li>Bearbeiten Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <img alt="Edit icon" src="../images/editcommenticon.png" /> klicken.</li>
-            <li>Löschen Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <img alt="Delete icon" src="../images/deletecommenticon.png" /> klicken.</li>
-            <li>Schließen Sie die aktuell ausgewählte Diskussion, indem Sie auf das Symbol <img alt="Resolve icon" src="../images/resolveicon.png" /> klicken, wenn die von Ihnen in Ihrem Kommentar angegebene Aufgabe oder das Problem gelöst wurde, danach die von Ihnen geöffnete Diskussion mit Ihrem Kommentar erhält den gelösten Status. Klicken Sie auf das Symbol <img alt="Open again icon" src="../images/resolvedicon.png" />, um die Diskussion neu zu öffnen. Wenn Sie aufgelöste Kommentare ausblenden möchten, klicken Sie auf die Registerkarte <b>Datei</b> in der oberen Symbolleiste, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie die Option <b>Anzeige der aktivieren Kommentare gelöst</b> und klicken Sie auf <b>Anwenden</b>. In diesem Fall werden die gelösten Kommentare nur hervorgehoben, wenn Sie auf das Symbol <img alt="Comments icon" src="../images/commentsicon.png" /> klicken.</li>
+            <li>Bearbeiten Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <div class = "icon icon-editcommenticon"></div> klicken.</li>
+            <li>Löschen Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <div class = "icon icon-deletecommenticon"></div> klicken.</li>
+            <li>Schließen Sie die aktuell ausgewählte Diskussion, indem Sie auf das Symbol <div class = "icon icon-resolveicon"></div> klicken, wenn die von Ihnen in Ihrem Kommentar angegebene Aufgabe oder das Problem gelöst wurde, danach die von Ihnen geöffnete Diskussion mit Ihrem Kommentar erhält den gelösten Status. Klicken Sie auf das Symbol <div class = "icon icon-resolvedicon"></div>, um die Diskussion neu zu öffnen. Wenn Sie aufgelöste Kommentare ausblenden möchten, klicken Sie auf die Registerkarte <b>Datei</b> in der oberen Symbolleiste, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie die Option <b>Anzeige der aktivieren Kommentare gelöst</b> und klicken Sie auf <b>Anwenden</b>. In diesem Fall werden die gelösten Kommentare nur hervorgehoben, wenn Sie auf das Symbol <div class = "icon icon-commentsicon"></div> klicken.</li>
             <li>Wenn Sie mehrere Kommentare verwalten möchten, öffnen Sie das Drop-Down-Menü <b>Lösen</b> auf der Registerkarte <b>Zusammenarbeit</b>. Wählen Sie eine der Optionen zum Auflösen von Kommentaren aus: <b>Gültige Kommentare lösen</b>, <b>Meine Kommentare lösen</b> oder <b>Alle Kommentare lösen</b>.</li>
         </ul>
         <h3>Erwähnungen hinzufügen</h3>
@@ -70,7 +71,7 @@
         <h3>Kommentare entfernen</h3>
         <p>Um Kommentare zu entfernen:</p>
         <ol>
-            <li>Klicken Sie auf die Schaltfläche <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Kommentare entfernen</b> auf der Registerkarte <b>Zusammenarbeit</b> der oberen Symbolleiste.</li>
+            <li>Klicken Sie auf die Schaltfläche <div class = "icon icon-removecomment_toptoolbar"></div> <b>Kommentare entfernen</b> auf der Registerkarte <b>Zusammenarbeit</b> der oberen Symbolleiste.</li>
             <li>
                 Wählen Sie die erforderliche Option aus dem Menü:
                 <ul>
@@ -80,7 +81,7 @@
                 </ul>
             </li>
         </ol>
-        <p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf das Symbol <img alt="Comments icon" src="../images/commentsicon.png" />.</p>
+        <p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf das Symbol <div class = "icon icon-commentsicon"></div>.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/de/HelpfulHints/Communicating.htm

@@ -4,6 +4,7 @@
     <title>Kommunikation in Echtzeit</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tipps zur gemeinsamen Bearbeitung" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -19,15 +20,15 @@
         <p>Um auf das <b>Chat</b>-Tool zuzugreifen und eine Nachricht für andere Benutzer zu hinterlassen:</p>
         <ol>
             <li>
-                Klicken Sie im linken Seitenbereich auf das Symbol <img alt="Chat icon" src="../images/chaticon.png" /> oder <br />
-                wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf die Schaltfläche <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b>.
+                Klicken Sie im linken Seitenbereich auf das Symbol <div class = "icon icon-chaticon"></div> oder <br />
+                wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf die Schaltfläche <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b>.
             </li>
             <li>Geben Sie Ihren Text in das entsprechende Feld unten ein.</li>
             <li>Klicken Sie auf <b>Senden</b>.</li>
         </ol>
         <p class="note">Die Chat-Nachrichten werden nur während einer Sitzung gespeichert. Um den Inhalt des Dokuments zu diskutieren, ist es besser, <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">Kommentare zu verwenden</a>, die gespeichert werden, bis sie gelöscht werden.</p>
-        <p>Alle Nachrichten, die von Benutzern hinterlassen wurden, werden links in der Leiste angezeigt. Liegen ungelesene neue Nachrichten vor, sieht das Chat-Symbol wie folgt aus - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
-        <p>Um die Leiste mit den Chat-Nachrichten zu schließen, klicken Sie in der linken Seitenleiste auf das Symbol <img alt="Chat icon" src="../images/chaticon.png" /> oder klicken Sie in der oberen Symbolleiste erneut auf die Schaltfläche <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b>.</p>
+        <p>Alle Nachrichten, die von Benutzern hinterlassen wurden, werden links in der Leiste angezeigt. Liegen ungelesene neue Nachrichten vor, sieht das Chat-Symbol wie folgt aus - <div class = "icon icon-chaticon_new"></div>.</p>
+        <p>Um die Leiste mit den Chat-Nachrichten zu schließen, klicken Sie in der linken Seitenleiste auf das Symbol <div class = "icon icon-chaticon"></div> oder klicken Sie in der oberen Symbolleiste erneut auf die Schaltfläche <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b>.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/de/HelpfulHints/Comparison.htm

@@ -23,7 +23,7 @@
         <h3 id="choosedocument">Dokument zum Vergleich auswählen</h3>
         <p>Um zwei Dokumente zu vergleichen, öffnen Sie das Originaldokument, das Sie vergleichen möchten, und wählen Sie das zweite Dokument zum Vergleich aus:</p>
         <ol>
-            <li>Wechseln Sie in der oberen Symbolleiste zur Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf die Schaltfläche <img alt="Compare button" src="../images/comparebutton.png" /> <b>Vergleichen</b>.</li>
+            <li>Wechseln Sie in der oberen Symbolleiste zur Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf die Schaltfläche <div class = "icon icon-comparebutton"></div> <b>Vergleichen</b>.</li>
             <li>
                 Wählen Sie eine der folgenden Optionen, um das Dokument zu laden:
                 <ul>
@@ -39,7 +39,7 @@
         <p>Wenn das zweite zu vergleichende Dokument ausgewählt wird, beginnt der Vergleichsprozess und das Dokument sieht so aus, als ob es im Modus <b>Review</b> geöffnet ist. Alle Änderungen werden mit einer Farbe hervorgehoben, und Sie können die Änderungen anzeigen, zwischen ihnen navigieren, die Änderungen einzeln oder alle auf einmal annehmen oder ablehnen. Es ist auch möglich, den Anzeigemodus zu ändern und zu sehen, wie das Dokument vor dem Vergleich, während des Vergleichs oder nach dem Vergleich aussieht, wenn Sie alle Änderungen annehmen.</p>
 
         <h3 id="displaymode">Den Anzeigemodus für die Änderungen auswählen</h3>
-        <p>Klicken Sie auf die Schaltfläche <b>Anzeigemodus</b> <img alt="Anzeigemodus Schlatfläche" src="../images/review_displaymode.png" /> in der oberen Symbolleiste und wählen Sie einen der verfügbaren Modi aus der Liste aus:</p>
+        <p>Klicken Sie auf die Schaltfläche <b>Anzeigemodus</b> <div class = "icon icon-review_displaymode"></div> in der oberen Symbolleiste und wählen Sie einen der verfügbaren Modi aus der Liste aus:</p>
         <ul>
             <li>
                 <b>Markup</b> - diese Option ist standardmäßig. Verwenden Sie sie, um das Dokument <b>während des Vergleichsprozesses</b> anzuzeigen. Im diesen Modus können Sie das Dokument sehen sowie bearbeiten.
@@ -56,19 +56,19 @@
         </ul>
 
         <h3 id="managechanges">Änderungen annehmen oder ablehnen</h3>
-        <p>Verwenden Sie die Schaltflächen <img alt="To Previous Change button" src="../images/review_previous.png" /> <b>Zur vorherigen Änderung</b> und <img alt="To Next Change button" src="../images/review_next.png" /> <b>Zur nächsten Änderung</b> in der oberen Symbolleiste, um die Änderungen zu navigieren.</p>
+        <p>Verwenden Sie die Schaltflächen <div class = "icon icon-review_previous"></div> <b>Zur vorherigen Änderung</b> und <div class = "icon icon-review_next"></div> <b>Zur nächsten Änderung</b> in der oberen Symbolleiste, um die Änderungen zu navigieren.</p>
         <p>Um die aktuell ausgewählte Änderung zu akzeptieren, können Sie:</p>
         <ul>
-            <li>Klicken Sie auf die Schaltfläche <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> in der oberen Symbolleiste, oder</li>
+            <li>Klicken Sie auf die Schaltfläche <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> in der oberen Symbolleiste, oder</li>
             <li>Klicken Sie den Abwärtspfeil unter der Schaltfläche <b>Annehmen</b> an und wählen Sie die Option <b>Aktuelle Änderungen annehmen</b> aus (die Änderung wird angenommen und Sie übergehen zur nächsten Änderung) oder</li>
-            <li>Klicken Sie die Schaltfläche <b>Annehmen</b> <img alt="Annehmen Schaltfläche" src="../images/review_accept.png" /> im Pop-Up-Fenster an.</li>
+            <li>Klicken Sie die Schaltfläche <b>Annehmen</b> <div class = "icon icon-review_accept"></div> im Pop-Up-Fenster an.</li>
         </ul>
         <p>Um alle Änderungen anzunehmen, klicken Sie den Abwärtspfeil unter der Schaltfläche <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> an und wählen Sie die Option <b>Alle Änderungen annehmen</b> aus.</p>
         <p>Um die aktuelle Änderung abzulehnen:</p>
         <ul>
-            <li>Klicken Sie die Schaltfläche <img alt="Reject button" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> in der oberen Symbolleiste, oder</li>
+            <li>Klicken Sie die Schaltfläche <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> in der oberen Symbolleiste, oder</li>
             <li>klicken Sie den Abwärtspfeil unter der Schaltfläche <b>Ablehnen</b> an und wählen Sie die Option <b>Aktuelle Änderung ablehnen</b> aus (die Änderung wird abgelehnt und Sie übergehen zur nächsten Änderung) oder</li>
-            <li>Лlicken Sie die Schaltfläche <b>Ablehnen</b> <img alt="Ablehnen Schaltfläche" src="../images/review_reject.png" /> im Pop-Up-Fenster an.</li>
+            <li>Лlicken Sie die Schaltfläche <b>Ablehnen</b> <div class = "icon icon-review_reject"></div> im Pop-Up-Fenster an.</li>
         </ul>
         <p>Um alle Änderungen abzulehnen, klicken Sie den Abwärtspfeil unter der Schaltfläche <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> an und wählen Sie die Option <b>Alle Änderungen ablehnen</b> aus.</p>
 

apps/documenteditor/main/resources/help/de/HelpfulHints/Navigation.htm

@@ -29,7 +29,7 @@
             <h3 id="navigationtools">Verwendung der Navigationswerkzeuge</h3>
 			<p>Mithilfe der folgenden Werkzeuge können Sie durch Ihr Dokument navigieren:</p>
 			<p>Die <b>Zoom-Funktion</b> befindet sich in der rechten unteren Ecke und dient zum Vergrößern und Verkleinern des aktuellen Dokuments. Um den in Prozent angezeigten aktuellen Zoomwert zu ändern, klicken Sie darauf und wählen Sie eine der verfügbaren Zoomoptionen (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%) aus der Liste 
-			oder klicken Sie auf <b>Vergrößern</b> <img alt="Vergrößern" src="../images/zoomin.png" /> oder <b>Verkleinern</b> <img alt="Verkleinern" src="../images/zoomout.png" />. Klicken Sie auf das Symbol <b>Eine Seite</b>, <img alt="Eine Seite" src="../images/fitwidth.png" /> um die ganze Seite im Fenster anzuzeigen. Um das ganze Dokument an den sichtbaren Teil des Arbeitsbereichs anzupassen, klicken Sie auf das Symbol <b>Seitenbreite</b> <img alt="Seitenbreite anpassen" src="../images/fitpage.png" />. Die Zoom-Einstellungen sind auch in der Gruppe <b>Ansichtseinstellungen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> verfügbar. Das kann nützlich sein, wenn Sie die <b>Statusleiste</b> ausblenden möchten.</p>
+			oder klicken Sie auf <b>Vergrößern</b> <div class = "icon icon-zoomin"></div> oder <b>Verkleinern</b> <div class = "icon icon-zoomout"></div>. Klicken Sie auf das Symbol <b>Eine Seite</b>, <div class = "icon icon-fitwidth"></div> um die ganze Seite im Fenster anzuzeigen. Um das ganze Dokument an den sichtbaren Teil des Arbeitsbereichs anzupassen, klicken Sie auf das Symbol <b>Seitenbreite</b> <div class = "icon icon-fitpage"></div>. Die Zoom-Einstellungen sind auch in der Gruppe <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> verfügbar. Das kann nützlich sein, wenn Sie die <b>Statusleiste</b> ausblenden möchten.</p>
 			<p>Die <b>Seitenzahlanzeige</b> stellt die aktuelle Seite als Teil aller Seiten im aktuellen Dokument dar (Seite „n“ von „nn“). Klicken Sie auf die Seitenzahlanzeige, um ein Fenster zu öffnen, anschließend können Sie eine Seitenzahl eingeben und direkt zu dieser Seite wechseln.</p>
 		</div>
 	</body>

apps/documenteditor/main/resources/help/de/HelpfulHints/Password.htm

@@ -25,7 +25,7 @@
 				<li>wählen Sie die Option <b>Schützen</b> aus,</li>
 				<li>klicken Sie auf die Schaltfläche <b>Kennwort hinzufügen</b>,</li>
 				<li>
-					geben Sie das Kennwort im Feld <b>Kennwort</b> ein und wiederholen Sie es im Feld <b>Kennwort wiederholen</b> nach unten, dann klicken Sie auf <b>OK</b>. Klicken Sie auf <img alt="Kennwortsymbol anzeigen" src="../images/show_password.png" />, um die Kennwortzeichen bei der Eingabe anzuzeigen oder auszublenden.
+					geben Sie das Kennwort im Feld <b>Kennwort</b> ein und wiederholen Sie es im Feld <b>Kennwort wiederholen</b> nach unten, dann klicken Sie auf <b>OK</b>. Klicken Sie auf <div class = "icon icon-show_password"></div>, um die Kennwortzeichen bei der Eingabe anzuzeigen oder auszublenden.
 					<p><img alt="Kennwort erstellen" src="../images/setpassword.png" /></p>
 				</li>
 			</ul>

apps/documenteditor/main/resources/help/de/HelpfulHints/Review.htm

@@ -22,9 +22,9 @@
         <h3>Die Funktion "Änderungen nachverfolgen" aktivieren</h3>
         <p>Um Änderungen anzuzeigen, die von einem Rezensenten vorgeschlagen wurden, aktivieren Sie die Option <b>Änderungen nachverfolgen</b>:</p>
         <ul>
-            <li>Klicken Sie in der rechten unteren Statusleiste auf das Symbol <img alt="Track changes button" src="../images/trackchangesstatusbar.png" />, oder</li>
+            <li>Klicken Sie in der rechten unteren Statusleiste auf das Symbol <div class = "icon icon-trackchangesstatusbar"></div>, oder</li>
             <li>
-                Wechseln Sie in der oberen Symbolleiste zur Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf <img alt="Änderungen nachverfolgen" src="../images/trackchangestoptoolbar.png" /> <b>Änderungen nachverfolgen</b>.
+                Wechseln Sie in der oberen Symbolleiste zur Registerkarte <b>Zusammenarbeit</b> und klicken Sie auf <div class = "icon icon-trackchangestoptoolbar"></div> <b>Änderungen nachverfolgen</b>.
                 <p class="note">Der Überprüfer muss die Option <b>Änderungen nachverfolgen</b> nicht aktivieren. Sie ist standardmäßig aktiviert und kann nicht deaktiviert werden, wenn das Dokument nur mit Zugriffsrechten zum Review freigegeben wird.</p>
             </li>
             <li>
@@ -47,8 +47,8 @@
         <p>Von einem Benutzer vorgenommene Änderungen werden im Dokumenttext mit einer bestimmten Farbe hervorgehoben. Wenn Sie auf den geänderten Text klicken, öffnet sich eine Sprechblase, die den Benutzernamen, Datum und Uhrzeit der Änderung sowie die Änderungsbeschreibung anzeigt. Die Sprechblase enthält auch Symbole zum Akzeptieren oder Ablehnen der aktuellen Änderung.</p>
         <p><img alt="Sprechblase" src="../images/review_popup.png" /></p>
         <p>Wenn Sie einen Textabschnitt per Drag & Drop an eine andere Stelle im Dokument ziehen, wird der Text an einer neuen Position mit der doppelten Linie unterstrichen. Der Text an der ursprünglichen Position wird doppelt gekreuzt. Dies wird als eine einzige Änderung gezählt.</p>
-        <p>Klicken Sie auf den doppelt durchgestrichenen Text an der ursprünglichen Position und verwenden Sie den Pfeil <img alt="Follow Move button" src="../images/follow_move.png" /> in der Änderungssprechblase, um zur neuen Position des Textes zu wechseln.</p>
-        <p>Klicken Sie an der neuen Position auf den doppelt unterstrichenen Text und verwenden Sie den Pfeil <img alt="Follow Move button" src="../images/follow_move.png" /> in der Änderungssprechblase, um zur ursprünglichen Position des Textes zu wechseln.</p>
+        <p>Klicken Sie auf den doppelt durchgestrichenen Text an der ursprünglichen Position und verwenden Sie den Pfeil <div class = "icon icon-follow_move"></div> in der Änderungssprechblase, um zur neuen Position des Textes zu wechseln.</p>
+        <p>Klicken Sie an der neuen Position auf den doppelt unterstrichenen Text und verwenden Sie den Pfeil <div class = "icon icon-follow_move"></div> in der Änderungssprechblase, um zur ursprünglichen Position des Textes zu wechseln.</p>
         <h3 id="displaymode">Anzeigemodus für Änderungen auswählen</h3>
         <p>Klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-review_displaymode"></div> <b>Anzeigemodus</b> und wählen Sie einen der verfügbaren Modi aus der Liste aus:</p>
         <ul>
@@ -58,24 +58,24 @@
             <li><b>Original</b>: In diesem Modus werden alle Änderungen so angezeigt, als wären sie abgelehnt worden. Die Änderungen werden nicht wirklich abgelehnt, die Funktion ermöglicht Ihnen lediglich eine Vorschau, falls alle Änderungen abgelehnt werden. In diesem Modus kann das Dokument nicht bearbeitet werden.</li>
         </ul>
         <h3 id="managechanges">Änderungen annehmen oder ablehnen</h3>
-        <p>Über die Schaltflächen <img alt="Vorherige Änderung" src="../images/review_previous.png" /> <b>Vorherige</b> und <img alt="Nächste Änderung" src="../images/review_next.png" /> <b>Nächste</b> in der oberen Symbolleiste können Sie zwischen den Änderungen navigieren.</p>
+        <p>Über die Schaltflächen <div class = "icon icon-review_previous"></div> <b>Vorherige</b> und <div class = "icon icon-review_next"></div> <b>Nächste</b> in der oberen Symbolleiste können Sie zwischen den Änderungen navigieren.</p>
         <p>Um die aktuell ausgewählte Änderung anzunehmen:</p>
         <ul>
-            <li>Klicken Sie auf die Schaltfläche <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> in der oberen Symbolleiste, oder</li>
+            <li>Klicken Sie auf die Schaltfläche <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> in der oberen Symbolleiste, oder</li>
             <li>Klicken Sie auf den Abwärtspfeil unter der Schaltfläche <b>Annehmen</b> und wählen Sie die Option <b>Aktuelle Änderung annehmen</b> (in diesem Fall wird die Änderung angenommen und Sie fahren mit der nächsten Änderung fort), oder</li>
-            <li>Klicken Sie auf die Schaltfläche <b>Annehmen</b> <img alt="Accept button" src="../images/review_accept.png" /> der Änderungssprechblase.</li>
+            <li>Klicken Sie auf die Schaltfläche <b>Annehmen</b> <div class = "icon icon-review_accept"></div> der Änderungssprechblase.</li>
         </ul>
-        <p>Um alle Änderungen sofort anzunehmen, klicken Sie auf den Abwärtspfeil unter der Schaltfläche <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> und wählen Sie die Option <b>Alle Änderungen annehmen</b> aus.</p>
+        <p>Um alle Änderungen sofort anzunehmen, klicken Sie auf den Abwärtspfeil unter der Schaltfläche <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> und wählen Sie die Option <b>Alle Änderungen annehmen</b> aus.</p>
         <p>Um die aktuell ausgewählte Änderung abzulehnen:</p>
         <ul>
-            <li>Klicken Sie auf die Schaltfläche <img alt="Reject button" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> in der oberen Symbolleiste, oder</li>
+            <li>Klicken Sie auf die Schaltfläche <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> in der oberen Symbolleiste, oder</li>
             <li>Klicken Sie auf den Abwärtspfeil unter der Schaltfläche <b>Ablehnen</b> und wählen Sie die Option <b>Aktuelle Änderung ablehnen</b> aus (in diesem Fall wird die Änderung abgelehnt und Sie fahren mit der nächsten verfügbaren Änderung fort), oder</li>
-            <li>Klicken Sie auf die Schaltfläche <b>Ablehnen</b> <img alt="Reject button" src="../images/review_reject.png" /> der Änderungssprechblase.</li>
+            <li>Klicken Sie auf die Schaltfläche <b>Ablehnen</b> <div class = "icon icon-review_reject"></div> der Änderungssprechblase.</li>
         </ul>
-        <p>Um alle Änderungen direkt abzulehnen, klicken Sie auf den Abwärtspfeil unter der Schaltfläche <img alt="Ablehnen" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> und wählen Sie die Option <b>Alle Änderungen ablehnen</b>.</p>
+        <p>Um alle Änderungen direkt abzulehnen, klicken Sie auf den Abwärtspfeil unter der Schaltfläche <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> und wählen Sie die Option <b>Alle Änderungen ablehnen</b>.</p>
         <p>Wenn Sie eine Änderung annehmen oder ablehnen müssen, klicken Sie mit der rechten Maustaste darauf und wählen Sie im Kontextmenü <b>Änderung annehmen</b> oder <b>Änderung ablehnen</b>.</p>
         <p><img alt="Accept/Reject Drop-Down Menü" src="../images/acceptreject_dropdown.png" /></p>
-        <p class="note">Wenn Sie das Dokument überprüfen, stehen Ihnen die Optionen <b>Annehmen</b> und <b>Ablehnen</b> nicht zur Verfügung. Sie können Ihre Änderungen mit dem Symbol <img alt="Änderung löschen" src="../images/review_delete.png" /> innerhalb der Änderungssprechblase löschen.</p>
+        <p class="note">Wenn Sie das Dokument überprüfen, stehen Ihnen die Optionen <b>Annehmen</b> und <b>Ablehnen</b> nicht zur Verfügung. Sie können Ihre Änderungen mit dem Symbol <div class = "icon icon-review_delete"></div> innerhalb der Änderungssprechblase löschen.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/de/HelpfulHints/Search.htm

@@ -15,13 +15,13 @@
 				<input id="search" class="searchBar" placeholder="Suche" type="text" onkeypress="doSearch(event)">
 			</div>
 			<h1>Suchen und Ersetzen</h1>
-			<p>Um nach den erforderlichen Zeichen, Wörtern oder Ausdrücken zu suchen, die im aktuell bearbeiteten Dokument verwendet werden, klicken Sie auf das Symbol <img alt="Suchsymbol" src="../images/searchicon.png" /> in der linken Seitenleiste des <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditors</b></a> oder verwenden Sie die Tastenkombination <em>Strg+F</em>.</p>
+			<p>Um nach den erforderlichen Zeichen, Wörtern oder Ausdrücken zu suchen, die im aktuell bearbeiteten Dokument verwendet werden, klicken Sie auf das Symbol <div class = "icon icon-searchicon"></div> in der linken Seitenleiste des <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditors</b></a> oder verwenden Sie die Tastenkombination <em>Strg+F</em>.</p>
 			<p>Das Fenster <b>Suchen und Ersetzen</b> wird geöffnet:</p>
 			<p><img alt="Suchen und Ersetzen Fenster" src="../images/search_window.png" /></p>
 			<ol>
 				<li>Geben Sie Ihre Anfrage in das entsprechende Dateneingabefeld ein.</li>
 				<li>
-					Geben Sie Suchparameter an, indem Sie auf das Symbol <img alt="Suchoptionen Symbol" src="../images/search_options.png" /> klicken und die erforderlichen Optionen aktivieren:
+					Geben Sie Suchparameter an, indem Sie auf das Symbol <div class = "icon icon-search_options"></div> klicken und die erforderlichen Optionen aktivieren:
 					<ul>
 						<li><b>Groß-/Kleinschreibung beachten</b> wird verwendet, um nur die Vorkommen zu finden, die in der gleichen Groß-/Kleinschreibung wie Ihre Anfrage eingegeben wurden (z. B. wenn Ihre Anfrage „Editor“ lautet und diese Option aktiviert ist, werden Wörter wie „editor“ oder „EDITOR“ usw. nicht gefunden). Um diese Option zu deaktivieren, klicken Sie erneut darauf.</li>
 						<li><b>Ergebnisse hervorheben</b> wird verwendet, um alle gefundenen Vorkommen hervorzuheben. Um diese Option zu deaktivieren und die Hervorhebung zu entfernen, klicken Sie erneut auf die Option.</li>
@@ -29,7 +29,7 @@
 				</li>
 				<li>
 					Klicken Sie auf eine der <b>Pfeilschaltflächen</b> unten rechts im Fenster.
-					Die Suche wird entweder am Anfang des Dokuments (wenn Sie auf die Schaltfläche <img alt="Linker Pfeil" src="../images/searchupbutton.png" /> klicken) oder am Ende des Dokuments (wenn Sie an der aktuellen Position auf die Schaltfläche <img alt="Rechtspfeil" src="../images/searchdownbutton.png" /> klicken) durchgeführt.
+					Die Suche wird entweder am Anfang des Dokuments (wenn Sie auf die Schaltfläche <div class = "icon icon-searchupbutton"></div> klicken) oder am Ende des Dokuments (wenn Sie an der aktuellen Position auf die Schaltfläche <div class = "icon icon-searchdownbutton"></div> klicken) durchgeführt.
 					<p class="note">Wenn die Option <b>Ergebnisse hervorheben</b> aktiviert ist, verwenden Sie diese Schaltflächen, um durch die hervorgehobenen Ergebnisse zu navigieren.</p>
 				</li>
 			</ol>

apps/documenteditor/main/resources/help/de/HelpfulHints/VersionHistory.htm

@@ -4,6 +4,7 @@
     <title>Versionshistorie</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tipps zur gemeinsamen Bearbeitung" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -24,7 +25,7 @@
                 <p>oder</p>
             </li>
             <li>Öffnen Sie die Registerkarte <b>Zusammenarbeit</b>.</li>
-            <li>Öffnen Sie die Versionshistorie mithilfe des Symbols <img alt="Versionshistorie" src="../images/versionhistoryicon.png" /> <b>Versionshistorie</b> in der oberen Symbolleiste.</li>
+            <li>Öffnen Sie die Versionshistorie mithilfe des Symbols <div class = "icon icon-versionhistoryicon"></div> <b>Versionshistorie</b> in der oberen Symbolleiste.</li>
         </ul>
         <p>Sie sehen die Liste der Dokumentversionen und -revisionen mit Angabe des Autors jeder Version/Revision sowie Erstellungsdatum und -zeit. Bei Dokumentversionen wird auch die Versionsnummer angegeben (z. B. <em>ver. 2</em>).</p>
         <p><b>Versionen anzeigen:</b></p>

apps/documenteditor/main/resources/help/de/HelpfulHints/Viewer.htm

@@ -4,6 +4,7 @@
         <title>ONLYOFFICE Document Viewer</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Die Beschreibung der Navigationstools von ONLYOFFICE Document Viewer" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -37,28 +38,28 @@
             <ol>
                 <li>
                     Die obere Symbolleiste zeigt die Registerkarten <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">Datei</a> und <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a> und die folgenden Symbole an:
-                    <p><img alt="Drucken" src="../images/print.png" /> <b>Drucken</b> ermöglicht das Ausdrucken einer Datei;</p>
-                    <p><img alt="Herunterladen" src="../images/downloadicon.png" /> <b>Herunterladen</b> ermöglicht das Herunterladen einer Datei auf Ihren Computer;</p>
-                    <p><img alt="Dateispeicherort öffnen" src="../images/gotodocuments.png" /> <b>Dateispeicherort öffnen</b> in der <em>Desktop-Version</em> ermöglicht das Öffnen des Ordners, in dem die Datei gespeichert ist, im Fenster <b>Datei-Explorer</b>. In der <em>Online-Version</em> ermöglicht es das Öffnen des Ordners des Moduls <b>Dokumente</b>, in dem die Datei gespeichert ist, in einem neuen Browser-Tab;</p>
-                    <p><img alt="Favoriten" src="../images/favorites_icon.png" /> <b>Als Favorit kennzeichnen / Aus Favoriten entfernen</b>. Klicken Sie auf den leeren Stern, um eine Datei zu den Favoriten hinzuzufügen, damit sie leichter zu finden ist, oder klicken Sie auf den gefüllten Stern, um die Datei aus den Favoriten zu entfernen. Die hinzugefügte Datei ist nur eine Verknüpfung, sodass die Datei selbst an ihrem ursprünglichen Speicherort gespeichert bleibt. Durch das Löschen einer Datei aus den Favoriten wird die Datei nicht von ihrem ursprünglichen Speicherort entfernt;</p>
-                    <p><img alt="Ansichts-Einstellungen" src="../images/viewsettingsicon.png" /> <b>Ansichts-Einstellungen</b> ermöglicht das Anpassen der <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Ansichtseinstellungen</a> und den Zugriff auf <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterte Einstellungen</a> des Editors;</p>
-                    <p><img alt="Benutzer" src="../images/usericon.png" /> <b>Benutzer</b> zeigt den Namen des Benutzers an, wenn Sie den Mauszeiger darüber bewegen.</p>
+                    <p><div class = "icon icon-print"></div> <b>Drucken</b> ermöglicht das Ausdrucken einer Datei;</p>
+                    <p><div class = "icon icon-downloadicon"></div> <b>Herunterladen</b> ermöglicht das Herunterladen einer Datei auf Ihren Computer;</p>
+                    <p><div class = "icon icon-gotodocuments"></div> <b>Dateispeicherort öffnen</b> in der <em>Desktop-Version</em> ermöglicht das Öffnen des Ordners, in dem die Datei gespeichert ist, im Fenster <b>Datei-Explorer</b>. In der <em>Online-Version</em> ermöglicht es das Öffnen des Ordners des Moduls <b>Dokumente</b>, in dem die Datei gespeichert ist, in einem neuen Browser-Tab;</p>
+                    <p><div class = "icon icon-favorites_icon"></div> <b>Als Favorit kennzeichnen / Aus Favoriten entfernen</b>. Klicken Sie auf den leeren Stern, um eine Datei zu den Favoriten hinzuzufügen, damit sie leichter zu finden ist, oder klicken Sie auf den gefüllten Stern, um die Datei aus den Favoriten zu entfernen. Die hinzugefügte Datei ist nur eine Verknüpfung, sodass die Datei selbst an ihrem ursprünglichen Speicherort gespeichert bleibt. Durch das Löschen einer Datei aus den Favoriten wird die Datei nicht von ihrem ursprünglichen Speicherort entfernt;</p>
+                    <p><div class = "icon icon-viewsettingsicon"></div> <b>Ansichts-Einstellungen</b> ermöglicht das Anpassen der <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Ansichtseinstellungen</a> und den Zugriff auf <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterte Einstellungen</a> des Editors;</p>
+                    <p><div class = "icon icon-usericon"></div> <b>Benutzer</b> zeigt den Namen des Benutzers an, wenn Sie den Mauszeiger darüber bewegen.</p>
                 </li>
                 <li>
                     Die <b>Statusleiste</b> am unteren Rand des <b>ONLYOFFICE Document Viewer</b>-Fensters zeigt die Seitenzahl und die Hintergrundstatusbenachrichtigungen an. Sie enthält auch die folgenden Tools:
-                    <p><img alt="Auswählen Tool" src="../images/selectiontool.png" /> Mit dem Tool <b>Select</b> können Sie Text oder Objekte in einer Datei auswählen.</p>
-                    <p><img alt="Hand Tool" src="../images/handtool.png" /> Mit dem Tool <b>Hand</b> können Sie die Seite ziehen und scrollen.</p>
-                    <p><img alt="Seite anpassen" src="../images/fitpage.png" /> Mit dem Tool <b>Seite anpassen</b> können Sie die Seite so skalieren, dass der Bildschirm die ganze Seite anzeigt.</p>
-                    <p><img alt="Breite anpassen" src="../images/fitwidth.png" /> Mit dem Tool <b>Breite anpassen</b> können Sie die Seite so skalieren, dass sie an die Breite des Bildschirms angepasst wird.</p>
+                    <p><div class = "icon icon-selectiontool"></div> Mit dem Tool <b>Select</b> können Sie Text oder Objekte in einer Datei auswählen.</p>
+                    <p><div class = "icon icon-handtool"></div> Mit dem Tool <b>Hand</b> können Sie die Seite ziehen und scrollen.</p>
+                    <p><div class = "icon icon-fitpage"></div> Mit dem Tool <b>Seite anpassen</b> können Sie die Seite so skalieren, dass der Bildschirm die ganze Seite anzeigt.</p>
+                    <p><div class = "icon icon-fitwidth"></div> Mit dem Tool <b>Breite anpassen</b> können Sie die Seite so skalieren, dass sie an die Breite des Bildschirms angepasst wird.</p>
                     <p><img alt="Zoom" src="../images/zoomadjusting.png" /> Mit dem Tool <a href="../HelpfulHints/Navigation.htm#navigationtools" onclick="onhyperlinkclick(this)"><b>Zoom</b></a> können Sie die Seite vergrößern und verkleinern.</p>
                 </li>
                 <li>
                     Die <b>linke Seitenleiste</b> enthält die folgenden Symbole:
                     <ul>
-                        <li><img alt="Suchen Symbol" src="../images/searchicon.png" /> - ermöglicht die Verwendung des Tools <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Suchen und Ersetzen</a>,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Chat Symbol" src="../images/chaticon.png" /> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Öffnen des <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a>-Panels,</li>
+                        <li><div class = "icon icon-searchicon"></div> - ermöglicht die Verwendung des Tools <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Suchen und Ersetzen</a>,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-chaticon"></div> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Öffnen des <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a>-Panels,</li>
                         <li>
-                            <img alt="Navigation Symbol" src="../images/navigationicon.png" /> - ermöglicht das Öffnen des Bereichs <b>Navigation</b>, der die Liste aller Überschriften mit den entsprechenden Ebenen anzeigt. Klicken Sie auf die Überschrift, um direkt zu einer bestimmten Seite zu springen.
+                            <div class = "icon icon-navigationicon"></div> - ermöglicht das Öffnen des Bereichs <b>Navigation</b>, der die Liste aller Überschriften mit den entsprechenden Ebenen anzeigt. Klicken Sie auf die Überschrift, um direkt zu einer bestimmten Seite zu springen.
                             <p><img alt="NavigationPanel" src="../images/navigationpanel_viewer.png" />
                             <p>Klicken Sie mit der rechten Maustaste auf die Überschrift in der Liste und verwenden Sie eine der verfügbaren Optionen aus dem Menü:</p>
                             <ul>
@@ -67,19 +68,19 @@
                                 <li><b>Auf Ebene erweitern</b> - um die Überschriftenstruktur auf die ausgewählte Ebene zu erweitern. Z.B. wenn Sie <em>Ebene 3</em> auswählen, werden die Ebenen 1, 2 und 3 erweitert, während Ebene 4 und alle darunter liegenden Ebenen reduziert werden.</li>
                             </ul>
                             <p>Um separate Überschriftenebenen manuell zu erweitern oder zu reduzieren, verwenden Sie die Pfeile links neben den Überschriften.</p>
-                            <p>Klicken Sie zum Schließen des Panels <b>Navigation</b> auf das Symbol <img alt="Navigationssymbol" src="../images/navigationicon.png" /> <b>Navigation</b> in der linken Seitenleiste noch einmal.</p>
+                            <p>Klicken Sie zum Schließen des Panels <b>Navigation</b> auf das Symbol <div class = "icon icon-navigationicon"></div> <b>Navigation</b> in der linken Seitenleiste noch einmal.</p>
                         </li>
                         <li>
-                            <img alt="Miniaturansichten" src="../images/pagethumbnails.png" /> - ermöglicht die Anzeige von Seiten-Thumbnails für eine schnelle Navigation. Klicken Sie auf <img alt="Thumbnail-Einstellungen" src="../images/search_options.png" /> im Bereich <b>Miniaturansichten</b>, um auf <b>Thumbnail-Einstellungen</b> zuzugreifen:
+                            <div class = "icon icon-pagethumbnails"></div> - ermöglicht die Anzeige von Seiten-Thumbnails für eine schnelle Navigation. Klicken Sie auf <div class = "icon icon-search_options"></div> im Bereich <b>Miniaturansichten</b>, um auf <b>Thumbnail-Einstellungen</b> zuzugreifen:
                             <p><img alt="Miniaturansichten Einstellungen" src="../images/pagethumbnails_settings.png" /></p>
                             <ul>
                                 <li>Ziehen Sie den Schieberegler, um die Größe der Miniaturansicht festzulegen.</li>
                                 <li>Die Option <b>Sichtbaren Teil der Seite hervorheben</b> ist standardmäßig aktiv, um den auf dem Bildschirm angezeigten Bereich anzuzeigen. Klicken Sie darauf, um diese Option zu deaktivieren.</li>
                             </ul>
-                            <p>Klicken Sie zum Schließen des Panels <b>Miniaturansichten</b> auf das Symbol <img alt="Miniaturansichten" src="../images/pagethumbnails.png" /> <b>Miniaturansichten</b> in der linken Seitenleiste noch einmal.</p>
+                            <p>Klicken Sie zum Schließen des Panels <b>Miniaturansichten</b> auf das Symbol <div class = "icon icon-pagethumbnails"></div> <b>Miniaturansichten</b> in der linken Seitenleiste noch einmal.</p>
                         </li>
-                        <li><img alt="Feedback und Support Symbol" src="../images/feedbackicon.png" /> - kontaktieren Sie unser Support-Team,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Über das Produkt Symbol" src="../images/abouticon.png" /> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Anzeigen von Informationen über das Programm.</li>
+                        <li><div class = "icon icon-feedbackicon"></div> - kontaktieren Sie unser Support-Team,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-abouticon"></div> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Anzeigen von Informationen über das Programm.</li>
                     </ul>
                 </li>
             </ol>            

apps/documenteditor/main/resources/help/de/ProgramInterface/FormsTab.htm

@@ -4,6 +4,7 @@
     <title>Registerkarte Formulare</title>
     <meta charset="utf-8" />
     <meta name="description" content="Einführung in die Benutzeroberfläche des Dokumenteneditors – Registerkarte Formulare" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/de/ProgramInterface/ProgramInterface.htm

@@ -32,24 +32,24 @@
                     <p><img alt="Symbole in der Kopfzeile des Editors" src="../images/interface/leftpart.png" /></p>
                     <p>Auf der rechten Seite der <b>Editor-Kopfzeile</b> werden zusammen mit dem Benutzernamen die folgenden Symbole angezeigt:</p>
                     <ul>
-                        <li><img alt="Dateispeicherort öffnen" src="../images/gotodocuments.png" /> <b>Dateispeicherort öffnen</b> - <span class="desktopDocumentFeatures">In der <em>Desktiop-Version</em> können Sie den Ordner öffnen in dem die Datei gespeichert ist; nutzen Sie dazu das Fenster <b>Datei-Explorer</b>.</span> <span class="onlineDocumentFeatures">In der <em>Online-Version</em> haben Sie außerdem die Möglichkeit den Ordner des Moduls <b>Dokumente</b>, in dem die Datei gespeichert ist, in einem neuen Browser-Fenster zu öffnen.</span></li>
-                        <li><img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> - hier können Sie die <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Ansichtseinstellungen</a> anpassen und auf die <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterten Einstellungen</a> des Editors zugreifen.</li>
-                        <li class="onlineDocumentFeatures"><img alt="Zugriffsrechte verwalten" src="../images/access_rights.png" /> <b>Zugriffsrechte</b> verwalten (nur in der <em>Online-Version</em> verfügbar - <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Zugriffsrechte</a> für die in der Cloud gespeicherten Dokumente festlegen.</li>
-                        <li><img alt="Favorit Symbol" src="../images/favorites_icon.png" /> <b>Als Favorit kennzeichnen</b> - klicken Sie auf den Stern, um eine Datei zu den Favoriten hinzuzufügen, damit Sie sie leichter finden können. Die hinzugefügte Datei ist nur eine Verknüpfung, sodass die Datei selbst am ursprünglichen Speicherort gespeichert bleibt. Durch das Löschen einer Datei aus den Favoriten wird die Datei nicht an ihrem ursprünglichen Speicherort entfernt.</li>
+                        <li><div class = "icon icon-gotodocuments"></div> <b>Dateispeicherort öffnen</b> - <span class="desktopDocumentFeatures">In der <em>Desktiop-Version</em> können Sie den Ordner öffnen in dem die Datei gespeichert ist; nutzen Sie dazu das Fenster <b>Datei-Explorer</b>.</span> <span class="onlineDocumentFeatures">In der <em>Online-Version</em> haben Sie außerdem die Möglichkeit den Ordner des Moduls <b>Dokumente</b>, in dem die Datei gespeichert ist, in einem neuen Browser-Fenster zu öffnen.</span></li>
+                        <li><div class = "icon icon-viewsettingsicon"></div> - hier können Sie die <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Ansichtseinstellungen</a> anpassen und auf die <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterten Einstellungen</a> des Editors zugreifen.</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-access_rights"></div> <b>Zugriffsrechte</b> verwalten (nur in der <em>Online-Version</em> verfügbar - <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Zugriffsrechte</a> für die in der Cloud gespeicherten Dokumente festlegen.</li>
+                        <li><div class = "icon icon-favorites_icon"></div> <b>Als Favorit kennzeichnen</b> - klicken Sie auf den Stern, um eine Datei zu den Favoriten hinzuzufügen, damit Sie sie leichter finden können. Die hinzugefügte Datei ist nur eine Verknüpfung, sodass die Datei selbst am ursprünglichen Speicherort gespeichert bleibt. Durch das Löschen einer Datei aus den Favoriten wird die Datei nicht an ihrem ursprünglichen Speicherort entfernt.</li>
                     </ul>
                 </li>
                 <li>Abhängig von der ausgewählten Registerkarte werden in der <b>oberen Symbolleiste</b> eine Reihe von Bearbeitungsbefehlen angezeigt. Aktuell stehen die folgenden Registerkarten zur Verfügung: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">Datei</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Start</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Einfügen</a>, <a href="../ProgramInterface/LayoutTab.htm" onclick="onhyperlinkclick(this)">Layout</a>, <a href="../ProgramInterface/ReferencesTab.htm" onclick="onhyperlinkclick(this)">Referenzen</a>, <a href="../ProgramInterface/ReviewTab.htm" onclick="onhyperlinkclick(this)">Zusammenarbeit</a>, <span class="desktopDocumentFeatures">Schützen</span>, <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plug-ins</a>.
-                <p>Die Befehle <img alt="Kopieren" src="../images/copy.png" /> <b>Kopieren</b> und <img alt="Einfügen" src="../images/paste.png" /> <b>Einfügen</b> stehen unabhängig von der ausgewählten Registerkarte jederzeit im linken Teil der <b>oberen Menüleiste</b> zur Verfügung.</p>
+                <p>Die Befehle <div class = "icon icon-copy"></div> <b>Kopieren</b> und <div class = "icon icon-paste"></div> <b>Einfügen</b> stehen unabhängig von der ausgewählten Registerkarte jederzeit im linken Teil der <b>oberen Menüleiste</b> zur Verfügung.</p>
                 </li>
                 <li>Die <b>Statusleiste</b> am unteren Rand des Editorfensters zeigt die Seitennummer und einige Benachrichtigungen an (z. B. „Alle Änderungen gespeichert“, „Verbindung unterbrochen“, wenn keine Verbindung besteht und der Editor versucht, die Verbindung wiederherzustellen usw.). Es ermöglicht auch <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">das Festlegen der Textsprache, das Aktivieren der Rechtschreibprüfung</a>, das Einschalten des <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">Modus "Änderungen verfolgen"</a> und Anpassen des <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Zooms</a>.</li>
                 <li>Symbole in der <b>linken Seitenleiste</b>:
                 <ul>
-                    <li><img alt="Suche" src="../images/searchicon.png" /> - die Funktion <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Suchen und Ersetzen</a>,</li>
-                    <li><img alt="Kommentare" src="../images/commentsicon.png" /> - <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Kommentarfunktion öffnen</a>,</li>
-                    <li><img alt="Navigation" src="../images/navigationicon.png" /> - <a href="../UsageInstructions/CreateTableOfContents.htm#navigation" onclick="onhyperlinkclick(this)">Navigationsfenster</a> aufrufen, um Überschriften zu verwalten,</li>
-                    <li class="onlineDocumentFeatures"><img alt="Chat" src="../images/chaticon.png" /> (nur in der <em>Online-Version</em> verfügbar) - hier können Sie das <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chatfenster</a> öffnen, unser Support-Team kontaktieren und die Programminformationen einsehen.</li>
-                    <li class="onlineDocumentFeatures"><img alt="Feedback und Support Symbol" src="../images/feedbackicon.png" /> - (nur in der <em>Online-Version</em> verfügbar) kontaktieren Sie unser Support-Team,</li>
-                    <li class="onlineDocumentFeatures"><img alt="Über das Produkt Symbol" src="../images/abouticon.png" /> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Anzeigen von Informationen über das Programm.</li>
+                    <li><div class = "icon icon-searchicon"></div> - die Funktion <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Suchen und Ersetzen</a>,</li>
+                    <li><div class = "icon icon-commentsicon"></div> - <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Kommentarfunktion öffnen</a>,</li>
+                    <li><div class = "icon icon-navigationicon"></div> - <a href="../UsageInstructions/CreateTableOfContents.htm#navigation" onclick="onhyperlinkclick(this)">Navigationsfenster</a> aufrufen, um Überschriften zu verwalten,</li>
+                    <li class="onlineDocumentFeatures"><div class = "icon icon-chaticon"></div> (nur in der <em>Online-Version</em> verfügbar) - hier können Sie das <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chatfenster</a> öffnen, unser Support-Team kontaktieren und die Programminformationen einsehen.</li>
+                    <li class="onlineDocumentFeatures"><div class = "icon icon-feedbackicon"></div> - (nur in der <em>Online-Version</em> verfügbar) kontaktieren Sie unser Support-Team,</li>
+                    <li class="onlineDocumentFeatures"><div class = "icon icon-abouticon"></div> - (nur in der <em>Online-Version</em> verfügbar) ermöglicht das Anzeigen von Informationen über das Programm.</li>
                 </ul>
                 </li>
                 <li>Über die rechte <b>Seitenleiste</b> können zusätzliche Parameter von verschiedenen Objekten angepasst werden. Wenn Sie im Text ein bestimmtes Objekt auswählen, wird das entsprechende Symbol in der rechten Seitenleiste aktiviert. Klicken Sie auf dieses Symbol, um die rechte Seitenleiste zu erweitern.</li>

apps/documenteditor/main/resources/help/de/ProgramInterface/ViewTab.htm

@@ -4,6 +4,7 @@
 		<title>Registerkarte Ansicht</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Einführung in die Benutzeroberfläche des Dokumenteneditors – die Registerkarte Ansicht" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/de/UsageInstructions/CommunicationPlugins.htm

@@ -4,6 +4,7 @@
     <title>Kommunikation während der Bearbeitung</title>
     <meta charset="utf-8" />
     <meta name="description" content="Im ONLYOFFICE Dokumenteneditor können Sie immer mit Kollegen in Kontakt bleiben und beliebte Online-Messenger wie Telegram und Rainbow nutzen" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -19,7 +20,7 @@
         <h2>Telegram</h2>
         <p>Um mit dem Chatten im Telegram-Plugin zu beginnen,</p>
         <ul>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und klicken Sie auf <img alt="Telegram Symbol" src="../images/telegram_icon.png" /> <b>Telegram</b>.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und klicken Sie auf <div class = "icon icon-telegram_icon"></div> <b>Telegram</b>.</li>
             <li>Geben Sie Ihre Telefonnummer in das entsprechende Feld ein.</li>
             <li>Aktivieren Sie das Kontrollkästchen <b>Keep me signed in</b>, wenn Sie die Anmeldeinformationen für die aktuelle Sitzung speichern möchten, und klicken Sie auf die Schaltfläche <b>Next</b>.</li>
             <li>
@@ -36,7 +37,7 @@
         <h2>Rainbow</h2>
         <p>Um mit dem Chatten im Rainbow-Plugin zu beginnen,</p>
         <ol>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und klicken Sie auf <img alt="Rainbow icon" src="../images/rainbow_icon.png" /> <b>Rainbow</b>.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und klicken Sie auf <div class = "icon icon-rainbow_icon"></div> <b>Rainbow</b>.</li>
             <li>Registrieren Sie ein neues Konto, indem Sie auf die Schaltfläche <b>Sign up</b> klicken, oder melden Sie sich bei einem bereits erstellten Konto an. Geben Sie dazu Ihre E-Mail in das entsprechende Feld ein und klicken Sie auf <b>Continue</b>.</li>
             <li>Geben Sie dann Ihr Kontopasswort ein.</li>
             <li>Aktivieren Sie das Kontrollkästchen <b>Keep my session alive</b>, wenn Sie die Anmeldeinformationen für die aktuelle Sitzung speichern möchten, und klicken Sie auf die Schaltfläche <b>Connect</b>.</li>

apps/documenteditor/main/resources/help/de/UsageInstructions/CopyPasteUndoRedo.htm

@@ -19,8 +19,8 @@
             <p>Um Textpassagen und eingefügte Objekte (AutoFormen, Bilder, Diagramme) innerhalb des aktuellen Dokuments auszuschneiden im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, zu kopieren und einzufügen, verwenden Sie die entsprechenden Optionen aus dem Rechtsklickmenü oder die Symbole, die auf jeder Registerkarte der oberen Symbolleiste verfügbar sind:</p>
             <ul>
                 <li><b>Ausschneiden</b> - wählen Sie eine Textpassage oder ein Objekt aus und nutzen Sie die Option <b>Ausschneiden</b> im Rechtsklickmenü, um die Auswahl zu löschen und in der Zwischenablage des Rechners zu speichern. <span class="onlineDocumentFeatures">Die ausgeschnittenen Daten können später an einer anderen Stelle im selben Dokument wieder eingefügt werden.</span></li>
-                <li><b>Kopieren</b> – wählen Sie eine Textpassage oder ein Objekt aus und nutzen Sie die Option <b>Kopieren</b> im Rechtsklickmenü oder das Symbol <b>Kopieren</b> <img alt="Kopieren" src="../images/copy.png" /> in der oberen Symbolleiste, um die Auswahl in der Zwischenablage des Rechners zu speichern. <span class="onlineDocumentFeatures">Die kopierten Daten können später an einer anderen Stelle im selben Dokument wieder eingefügt werden.</span></li>
-                <li><b>Einfügen</b> – platzieren Sie den Cursor an der Stelle im Dokument, an der Sie den zuvor kopierten Text/das Objekt einfügen möchten und wählen Sie im Rechtsklickmenü die Option <b>Einfügen</b> oder klicken Sie in der oberen Symbolleiste auf <b>Einfügen</b> <img alt="Einfügen" src="../images/paste.png" />. Der Text/das Objekt wird an der aktuellen Cursorposition eingefügt. <span class="onlineDocumentFeatures">Die Daten können vorher aus demselben Dokument kopiert werden oder auch aus einem anderen Dokument oder Programm oder von einer Webseite.</span></li>
+                <li><b>Kopieren</b> – wählen Sie eine Textpassage oder ein Objekt aus und nutzen Sie die Option <b>Kopieren</b> im Rechtsklickmenü oder das Symbol <b>Kopieren</b> <div class = "icon icon-copy"></div> in der oberen Symbolleiste, um die Auswahl in der Zwischenablage des Rechners zu speichern. <span class="onlineDocumentFeatures">Die kopierten Daten können später an einer anderen Stelle im selben Dokument wieder eingefügt werden.</span></li>
+                <li><b>Einfügen</b> – platzieren Sie den Cursor an der Stelle im Dokument, an der Sie den zuvor kopierten Text/das Objekt einfügen möchten und wählen Sie im Rechtsklickmenü die Option <b>Einfügen</b> oder klicken Sie in der oberen Symbolleiste auf <b>Einfügen</b> <div class = "icon icon-paste"></div>. Der Text/das Objekt wird an der aktuellen Cursorposition eingefügt. <span class="onlineDocumentFeatures">Die Daten können vorher aus demselben Dokument kopiert werden oder auch aus einem anderen Dokument oder Programm oder von einer Webseite.</span></li>
             </ul>
             <p><span class="onlineDocumentFeatures">In der <em>Online-Version</em> können nur die folgenden Tastenkombinationen zum Kopieren oder Einfügen von Daten aus/in ein anderes Dokument oder ein anderes Programm verwendet werden.</span> <span class="desktopDocumentFeatures">In der <em>Desktop-Version</em> können sowohl die entsprechenden Schaltflächen/Menüoptionen als auch Tastenkombinationen für alle Kopier-/Einfügevorgänge verwendet werden:</span></p>
             <ul>
@@ -31,7 +31,7 @@
             <p class="note"><b>Hinweis</b>: Anstatt Text innerhalb desselben Dokuments auszuschneiden und einzufügen, können Sie die erforderliche Textpassage einfach auswählen und an die gewünschte Position ziehen und ablegen.</p>
             <h3>Inhalte einfügen mit Optionen</h3>
             <p class="note"><b>Hinweis</b>: Für die gemeinsame Bearbeitung ist die Option <b>Spezielles Einfügen</b> ist nur im Co-Editing-Modus <b>Formal</b> verfügbar.</p>
-            <p>Nachdem der kopierte Text eingefügt wurde, erscheint neben der eingefügten Textpassage das Menü <b>Einfügeoptionen</b> <img alt="Einfügen mit Sonderoptionen" src="../images/pastespecialbutton.png" />. Klicken Sie auf diese Schaltfläche, um die gewünschte Einfügeoption auszuwählen.</p>
+            <p>Nachdem der kopierte Text eingefügt wurde, erscheint neben der eingefügten Textpassage das Menü <b>Einfügeoptionen</b> <div class = "icon icon-pastespecialbutton"></div>. Klicken Sie auf diese Schaltfläche, um die gewünschte Einfügeoption auszuwählen.</p>
             <p>Zum Einfügen von Textsegmenten oder Text in Verbindung mit AutoFormen sind folgende Optionen verfügbar:</p>
             <ul>
                 <li><em>Ursprüngliche Formatierung beibehalten</em> - der kopierte Text wird in Originalformatierung eingefügt.</li>

apps/documenteditor/main/resources/help/de/UsageInstructions/CreateFillableForms.htm

@@ -4,6 +4,7 @@
     <title>Ausfüllbare Formulare erstellen</title>
     <meta charset="utf-8" />
     <meta name="description" content="Erstellen Sie ausfüllbare Formulare für eine erweiterte Formularinteraktion" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -32,7 +33,7 @@
                     <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                     <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                     <li>
-                        klicken Sie auf das Symbol <img alt="Textfeld Symbol" src="../images/text_field_icon.png" /> <b>Textfeld</b>.
+                        klicken Sie auf das Symbol <div class = "icon icon-text_field_icon"></div> <b>Textfeld</b>.
                     </li>
                 </ol>
                 <p><img alt="Textfeld eingefügt" src="../images/text_field_inserted.png" /></p>
@@ -56,8 +57,8 @@
                             <ul>
                                 <li><b>Zeilenbreite</b>: Geben Sie den gewünschten Wert ein oder verwenden Sie die Pfeile rechts, um die Breite des eingefügten Textfelds einzustellen. Der Text darin wird entsprechend ausgerichtet.</li>
                             </ul>
-                                <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder des eingefügten Textfelds festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                                <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um dem eingefügten Textfeld eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                                <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder des eingefügten Textfelds festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                                <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um dem eingefügten Textfeld eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                                 <li><b>Automatisch anpassen</b>: Diese Option kann aktiviert werden, wenn die Einstellung <b>Feste Feldgröße</b> ausgewählt ist. Aktivieren Sie diese Option, um die Schriftgröße automatisch an die Feldgröße anzupassen.</li>
                                 <li><b>Mehrzeiliges Feld</b>: Diese Option kann aktiviert werden, wenn die Einstellung <b>Feste Feldgröße</b> ausgewählt ist. Aktivieren Sie diese Option, um ein Formularfeld mit mehreren Zeilen zu erstellen, andernfalls nimmt der Text eine einzelne Zeile ein.</li>
                     </ul>
@@ -77,7 +78,7 @@
                     <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                     <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                     <li>
-                        klicken Sie auf das Symbol <img alt="Combobox Symbol" src="../images/combo_box_icon.png" /> <b>Combobox</b>.
+                        klicken Sie auf das Symbol <div class = "icon icon-combo_box_icon"></div> <b>Combobox</b>.
                     </li>
                 </ol>
                 <p><img alt="Combobox eingefügt" src="../images/combo_box_inserted.png" /></p>
@@ -91,13 +92,13 @@
                             <b>Tipp</b>: Geben Sie den Text ein, der als Tipp angezeigt werden soll, wenn ein Benutzer den Mauszeiger über die Combobox bewegt.
                             <br /> <img alt="Tipp eingefügt" src="../images/combo_box_tip.png" />
                         </li>
-                        <li><b>Optionen von Werten</b>: <img alt="Werte hinzufügen" src="../images/combo_add_values.png" />Fügen Sie neue Werte hinzu, <img alt="Werte löschen" src="../images/combo_delete_values.png" />löschen Sie sie oder verschieben Sie sie nach oben<img alt="Werte nach oben" src="../images/combo_values_up.png" /> oder <img alt="Werte nach unten" src="../images/combo_values_down.png" />unten in der Liste.</li>
+                        <li><b>Optionen von Werten</b>: <div class = "icon icon-combo_add_values"></div>Fügen Sie neue Werte hinzu, <div class = "icon icon-combo_delete_values"></div>löschen Sie sie oder verschieben Sie sie nach oben<div class = "icon icon-combo_values_up"></div> oder <div class = "icon icon-combo_values_down"></div>unten in der Liste.</li>
                         <li>
                             <b>Feste Feldgröße</b>: Aktivieren Sie dieses Kontrollkästchen, um ein Feld mit einer festen Größe zu erstellen.<br />
                             Ein Feld mit fester Größe sieht wie eine Autoform aus. Sie können einen Umbruchstil dafür festlegen und die Position anpassen.
                         </li>
-                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder der eingefügten Combobox festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um der eingefügten Combobox eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder der eingefügten Combobox festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um der eingefügten Combobox eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                     </ul>
                 </p>
                 <p>Sie können auf die Pfeilschaltfläche im rechten Teil der hinzugefügten <b>Combobox</b> klicken, um die Elementliste zu öffnen und das erforderliche Element auszuwählen. Sobald das erforderliche Element ausgewählt ist, können Sie den angezeigten Text ganz oder teilweise bearbeiten, indem Sie ihn durch Ihren Text ersetzen.</p>
@@ -116,7 +117,7 @@
                     <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                     <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                     <li>
-                        klicken Sie auf das Symbol <img alt="Dropdown-Liste Symbol" src="../images/dropdown_list_icon.png" /> <b>Dropdown</b>.
+                        klicken Sie auf das Symbol <div class = "icon icon-dropdown_list_icon"></div> <b>Dropdown</b>.
                     </li>
                 </ol>
                 <p><img alt="Dropdown-Liste eingefügt" src="../images/combo_box_inserted.png" /></p>
@@ -130,13 +131,13 @@
                             <b>Tipp</b>: Geben Sie den Text ein, der als Tipp angezeigt werden soll, wenn ein Benutzer den Mauszeiger über die Dropdown-Liste bewegt.
                             <br /> <img alt="Tipp eingefügt" src="../images/dropdown_tip.png" />
                         </li>
-                        <li><b>Optionen von Werten</b>: <img alt="Werte hinzufügen" src="../images/combo_add_values.png" />Fügen Sie neue Werte hinzu, <img alt="Werte löschen" src="../images/combo_delete_values.png" />löschen Sie sie oder verschieben Sie sie nach oben<img alt="Werte nach oben" src="../images/combo_values_up.png" /> oder <img alt="Werte nach unten" src="../images/combo_values_down.png" />unten in der Liste.</li>
+                        <li><b>Optionen von Werten</b>: <div class = "icon icon-combo_add_values"></div>Fügen Sie neue Werte hinzu, <div class = "icon icon-combo_delete_values"></div>löschen Sie sie oder verschieben Sie sie nach oben<div class = "icon icon-combo_values_up"></div> oder <div class = "icon icon-combo_values_down"></div>unten in der Liste.</li>
                         <li>
                             <b>Feste Feldgröße</b>: Aktivieren Sie dieses Kontrollkästchen, um ein Feld mit einer festen Größe zu erstellen.<br />
                             Ein Feld mit fester Größe sieht wie eine Autoform aus. Sie können einen Umbruchstil dafür festlegen und die Position anpassen.
                         </li>
-                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder der eingefügten Dropdown-Liste festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um der eingefügten Dropdown-Liste eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder der eingefügten Dropdown-Liste festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um der eingefügten Dropdown-Liste eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                     </ul>
                 </p>
                 <p>Sie können auf die Pfeilschaltfläche im rechten Teil des hinzugefügten Formularfelds <b>Dropdown-Liste</b> klicken, um die Elementliste zu öffnen und die erforderliche Elemente auszuwählen.</p>
@@ -154,10 +155,10 @@
                     <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                     <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                     <li>
-                        klicken Sie auf das Symbol <img alt="Kontrollkästchen Symbol" src="../images/checkbox_icon.png" /> <b>Kontrollkästchen</b>.
+                        klicken Sie auf das Symbol <div class = "icon icon-checkbox_icon"></div> <b>Kontrollkästchen</b>.
                     </li>
                 </ol>
-                <p><img alt="Kontrollkästchen eingefügt" src="../images/checkbox_inserted.png" /></p>
+                <p><div class = "big big-checkbox_inserted"></div></p>
                 <p>Das Formularfeld erscheint an der Einfügemarke innerhalb der bestehenden Textzeile. Das Menü <b>Einstellungen des Formulars</b> wird rechts geöffnet.</p>
                 <p id="checkbox_settings">
                     <img class="floatleft" alt="Kontrollkästchen Einstellungen" src="../images/checkbox_settings.png" />
@@ -171,12 +172,12 @@
                             <b>Feste Feldgröße</b>: Aktivieren Sie dieses Kontrollkästchen, um ein Feld mit einer festen Größe zu erstellen.<br />
                             Ein Feld mit fester Größe sieht wie eine Autoform aus. Sie können einen Umbruchstil dafür festlegen und die Position anpassen.
                         </li>
-                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder des eingefügten Kontrollkästchens festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um dem eingefügten Kontrollkästchen eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                        <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder des eingefügten Kontrollkästchens festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                        <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um dem eingefügten Kontrollkästchen eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                     </ul>
                 </p>
                 <p>Um das Kontrollkästchen zu aktivieren, klicken Sie einmal darauf.</p>
-                <p><img alt="Kontrollkästchens aktiviert" src="../images/checkbox_checked.png" /></p>
+                <p><div class = "big big-checkbox_checked"></div></p>
             </details>
         </div>
 
@@ -190,10 +191,10 @@
                         <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                         <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                         <li>
-                            klicken Sie auf das Symbol <img alt="Radiobutton Symbol" src="../images/radio_button_icon.png" /> <b>Radiobutton</b>.
+                            klicken Sie auf das Symbol <div class = "icon icon-radio_button_icon"></div> <b>Radiobutton</b>.
                         </li>
                     </ol>
-                    <p><img alt="Radiobutton eingefügt" src="../images/radio_button_inserted.png" /></p>
+                    <p><div class = "big big-radio_button_inserted"></div></p>
                     <p>Das Formularfeld erscheint an der Einfügemarke innerhalb der bestehenden Textzeile. Das Menü <b>Einstellungen des Formulars</b> wird rechts geöffnet.</p>
                     <p id="radio_button_settings">
                         <img class="floatleft" alt="Radiobutton Einstellungen" src="../images/radio_button_settings.png" />
@@ -207,12 +208,12 @@
                                 <b>Feste Feldgröße</b>: Aktivieren Sie dieses Kontrollkästchen, um ein Feld mit einer festen Größe zu erstellen.<br />
                                 Ein Feld mit fester Größe sieht wie eine Autoform aus. Sie können einen Umbruchstil dafür festlegen und die Position anpassen.
                             </li>
-                            <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder des eingefügten Radiobuttons festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                            <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um dem eingefügten Radiobutton eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                            <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder des eingefügten Radiobuttons festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                            <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um dem eingefügten Radiobutton eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                         </ul>
                     </p>
                     <p>Um den Radiobutton zu aktivieren, klicken Sie einmal darauf.</p>
-                    <p><img alt="Radiobutton aktiviert" src="../images/radio_button_checked.png" /></p>
+                    <p><div class = "big big-radio_button_checked"></div></p>
                 </details>
             </div>
 
@@ -226,10 +227,10 @@
                         <li>positionieren Sie die Einfügemarke innerhalb einer Textzeile an der Stelle, an der das Feld hinzugefügt werden soll,</li>
                         <li>wechseln Sie zur Registerkarte <b>Formulare</b> der oberen Symbolleiste,</li>
                         <li>
-                            klicken Sie auf das Symbol <img alt="Bild symbol" src="../images/image_form_icon.png" /> <b>Bild</b>.
+                            klicken Sie auf das Symbol <div class = "icon icon-image_form_icon"></div> <b>Bild</b>.
                         </li>
                     </ol>
-                    <p><img alt="Bild eingefügt" src="../images/image_form_inserted.png" /></p>
+                    <p><div class = "big big-image_form_inserted"></div></p>
                     <p>Das Formularfeld erscheint an der Einfügemarke innerhalb der bestehenden Textzeile. Das Menü <b>Einstellungen des Formulars</b> wird rechts geöffnet.</p>
                     <p id="image_form_settings">
                         <img class="floatleft" alt="Bild Einstellungen" src="../images/image_form_settings.png" />
@@ -242,11 +243,11 @@
                             <li><b>Wann skalieren</b>: Klicken Sie auf das Dropdown-Menü und wählen Sie eine geeignete Bildskalierungsoption: <b>Immer</b>, <b>Nie</b>, <b>Das Bild ist zu groß</b> oder <b>Das Bild ist zu klein</b>. Das ausgewählte Bild wird innerhalb des Felds entsprechend skaliert.</li>
                             <li><b>Seitenverhältnis sperren</b>: Aktivieren Sie dieses Kontrollkästchen, um das Bildseitenverhältnis ohne Verzerrung beizubehalten. Wenn das Kontrollkästchen aktiviert ist, verwenden Sie den vertikalen und den horizontalen Schieberegler, um das Bild innerhalb des eingefügten Felds zu positionieren. Die Positionierungsschieber sind inaktiv, wenn das Kontrollkästchen deaktiviert ist.</li>
                             <li><b>Bild auswählen</b>: Klicken Sie auf diese Schaltfläche, um ein Bild entweder <b>Aus einer Datei</b>, <b>Aus einer URL</b> oder <b>Aus dem Speicher</b> hochzuladen.</li>
-                            <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um die Farbe für die Ränder der eingefügten Bild festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
-                            <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <img alt="Keine Füllung" src="../images/nofill.png" />, um der eingefügten Bild eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
+                            <li><b>Rahmenfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um die Farbe für die Ränder der eingefügten Bild festzulegen. Wählen Sie die bevorzugte Rahmenfarbe aus der Palette. Sie können bei Bedarf <b>eine neue benutzerdefinierte Farbe hinzufügen</b>.</li>
+                            <li><b>Hintergrundfarbe</b>: Klicken Sie auf das Symbol <div class = "icon icon-nofill"></div>, um der eingefügten Bild eine Hintergrundfarbe zuzuweisen. Wählen Sie die bevorzugte Farbe aus <b>Designfarben</b>, <b>Standardfarben</b> oder fügen Sie bei Bedarf <b>eine neue benutzerdefinierte Farbe</b> hinzu.</li>
                         </ul>
                     </p>
-                    <p>Um das Bild zu ersetzen, klicken Sie auf das <img alt="Bild Symbol" src="../images/image.png" /> Bildsymbol über dem Rahmen des Formularfelds und wählen Sie ein anderes Bild aus.</p>
+                    <p>Um das Bild zu ersetzen, klicken Sie auf das <div class = "icon icon-image"></div> Bildsymbol über dem Rahmen des Formularfelds und wählen Sie ein anderes Bild aus.</p>
                     <p>Um die Bildeinstellungen <b>anzupassen</b>, öffnen Sie die Registerkarte <b>Bildeinstellungen</b> in der rechten Symbolleiste. Um mehr zu erfahren, lesen Sie bitte die Anleitung zu <a href="../UsageInstructions/InsertImages.htm">Bildeinstellungen</a>.</p>
                 </details>
             </div>
@@ -276,7 +277,7 @@
         <p class="note">
             <b>Hinweis</b>: Sobald Sie den Modus <b>Formular anzeigen</b> aktiviert haben, stehen alle Bearbeitungsoptionen nicht mehr zur Verfügung.
         </p>
-        <p>Klicken Sie auf die Schaltfläche <img alt="Formular anzeigen" src="../images/view_form_icon.png" /> <b>Formular anzeigen</b> auf der Registerkarte <b>Formulare</b> der oberen Symbolleiste, um zu sehen, wie alle eingefügten Formulare in Ihrem Dokument angezeigt werden.</p>
+        <p>Klicken Sie auf die Schaltfläche <div class = "icon icon-view_form_icon"></div> <b>Formular anzeigen</b> auf der Registerkarte <b>Formulare</b> der oberen Symbolleiste, um zu sehen, wie alle eingefügten Formulare in Ihrem Dokument angezeigt werden.</p>
         <p><img alt="Formular anzeigen - Aktiviert" src="../images/view_form_active2.png" /></p>
         <p>Um den Anzeigemodus <b>zu verlassen</b>, klicken Sie erneut auf dasselbe Symbol.</p>
 
@@ -289,21 +290,21 @@
         <p>Um ein Feld <b>obligatorisch zu machen</b>, aktivieren Sie die Option <b>Erforderlich</b>. Die Pflichtfelder werden mit rotem Strich markiert.<!--Das Formular kann erst abgeschickt werden, wenn alle Pflichtfelder ausgefüllt sind.--></p>
 
         <h2>Sperren von Formfeldern</h2>
-        <p>Um die <b>weitere Bearbeitung</b> des eingefügten Formularfelds zu verhindern, klicken Sie auf das Symbol <img alt="Form sperren Symbol" src="../images/lock_form_icon.png" /> <b>Sperren</b>. Das Ausfüllen der Felder bleibt verfügbar.</p>
+        <p>Um die <b>weitere Bearbeitung</b> des eingefügten Formularfelds zu verhindern, klicken Sie auf das Symbol <div class = "icon icon-lock_form_icon"></div> <b>Sperren</b>. Das Ausfüllen der Felder bleibt verfügbar.</p>
 
         <h2>Löschen von Formularfeldern</h2>
-        <p>Um alle eingefügten Felder und alle Werte zu löschen, klicken Sie auf die Schaltfläche <img alt="Alle Felder löschen Symbol" src="../images/clear_fields_icon.png" /> <b>Alle Felder löschen</b> auf der Registerkarte <b>Formulare</b> in der oberen Symbolleiste.</p>
+        <p>Um alle eingefügten Felder und alle Werte zu löschen, klicken Sie auf die Schaltfläche <div class = "icon icon-clear_fields_icon"></div> <b>Alle Felder löschen</b> auf der Registerkarte <b>Formulare</b> in der oberen Symbolleiste.</p>
 
         <h2>Navigieren, Anzeigen und Speichern eines Formulars</h2>
         <p><img alt="Formularfeld ausfüllen" src="../images/fill_form.png" /></p>
         <p>Gehen Sie zur Registerkarte <b>Formulare</b> in der oberen Symbolleiste.</p>
-        <p>Navigieren Sie durch die Formularfelder mit den Schaltflächen <img alt="Vorheriges Feld Symbol" src="../images/previous_field_icon.png" /> <b>Vorheriges Feld</b> und <img alt="Nächstes Feld Symbol" src="../images/next_field_icon.png" /> <b>Nächstes Feld</b> in der oberen Symbolleiste.</p>
-        <p>Wenn Sie fertig sind, klicken Sie in der oberen Symbolleiste auf die Schaltfläche <img alt="Formular speichern" src="../images/save_form_icon.png" /> <b>Als OFORM speichern</b>, um das Formular als eine zum Ausfüllen bereite <b>OFORM</b>-Datei zu speichern. Sie können beliebig viele <b>OFORM</b>-Dateien speichern.</p>
-        <!--<p>To clear all fields and reset the form, click the <img alt="Clear fields icon" src="../images/clear_fields_icon.png" /> <b>Clear fields</b> button at the top toolbar.</p>
-        <p>When you are finished, click the <img alt="Submit form" src="../images/submit_form_icon.png" /> <b>Submit</b> button at the top toolbar to send the form for further processing. Please note that this action cannot be undone.</p>
+        <p>Navigieren Sie durch die Formularfelder mit den Schaltflächen <div class = "icon icon-previous_field_icon"></div> <b>Vorheriges Feld</b> und <div class = "icon icon-next_field_icon"></div> <b>Nächstes Feld</b> in der oberen Symbolleiste.</p>
+        <p>Wenn Sie fertig sind, klicken Sie in der oberen Symbolleiste auf die Schaltfläche <div class = "icon icon-save_form_icon"></div> <b>Als OFORM speichern</b>, um das Formular als eine zum Ausfüllen bereite <b>OFORM</b>-Datei zu speichern. Sie können beliebig viele <b>OFORM</b>-Dateien speichern.</p>
+        <!--<p>To clear all fields and reset the form, click the <div class = "icon icon-clear_fields_icon"></div> <b>Clear fields</b> button at the top toolbar.</p>
+        <p>When you are finished, click the <div class = "icon icon-submit_form_icon"></div> <b>Submit</b> button at the top toolbar to send the form for further processing. Please note that this action cannot be undone.</p>
     <p class="note">If you are using the server version of ONLYOFFICE Docs, the presence of the <b>Submit</b> button depends on the configuration. Read <a href="https://api.onlyoffice.com/editors/config/editor/customization">this article</a> to learn more.</p>-->
         <h2>Entfernen von Formularfeldern</h2>
-        <p>Um ein Formularfeld zu entfernen und seinen gesamten Inhalt beizubehalten, wählen Sie es aus und klicken Sie auf das Symbol <img alt="Form löschen Symbol" src="../images/combo_delete_values.png" /> <b>Löschen</b> (stellen Sie sicher, dass das Feld nicht gesperrt ist) oder drücken Sie die Taste <b>Löschen</b> auf der Tastatur.</p>
+        <p>Um ein Formularfeld zu entfernen und seinen gesamten Inhalt beizubehalten, wählen Sie es aus und klicken Sie auf das Symbol <div class = "icon icon-combo_delete_values"></div> <b>Löschen</b> (stellen Sie sicher, dass das Feld nicht gesperrt ist) oder drücken Sie die Taste <b>Löschen</b> auf der Tastatur.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/de/UsageInstructions/CreateTableOfContents.htm

@@ -43,13 +43,13 @@
                 <li><b>Erweitern auf Ebene</b> - um die Überschriftenstruktur auf die ausgewählte Ebene zu erweitern. Wenn Sie z. B. <em>Ebene 3</em> wählen, werden die Level 1, 2 und 3 erweitert, während Level 4 und alle niedrigeren Level ausgeblendet werden.</li>
             </ul>
             <p>Um separate Überschriftenebenen manuell zu erweitern oder auszublenden, verwenden Sie die Pfeile links von den Überschriften.</p>
-            <p>Um die <b>Navigationsleiste</b> zu schließen, klicken Sie in der linken Seitenleiste erneut auf <img alt="Navigation" src="../images/navigationicon.png" /> <b>Navigation</b>.</p>
+            <p>Um die <b>Navigationsleiste</b> zu schließen, klicken Sie in der linken Seitenleiste erneut auf <div class = "icon icon-navigationicon"></div> <b>Navigation</b>.</p>
             <h2>Inhaltsverzeichnis in Ihr aktuelles Dokument einfügen</h2>
             <p>Ein Inhaltsverzeichnis in Ihr aktuelles Dokument einfügen:</p>
             <ol>
                 <li>Platzieren Sie die Einfügemarke an der Stelle, an der Sie ein Inhaltsverzeichnis hinzufügen möchten.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Referenzen</b>.</li>
-                <li>Klicken Sie auf das Symbol <img alt="Inhaltsverzeichnis" src="../images/tocicon.png" /> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste oder<br /> klicken Sie auf das Pfeilsymbol neben diesem Symbol und wählen Sie die gewünschte Layout-Option aus dem Menü aus. Sie haben die Wahl zwischen einem Inhaltsverzeichnis, das Überschriften, Seitenzahlen und Leader anzeigt oder nur Überschriften.<p><img alt="Inhaltsverzeichnis - Optionen" src="../images/tociconmenu.png" /></p>
+                <li>Klicken Sie auf das Symbol <div class = "icon icon-tocicon"></div> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste oder<br /> klicken Sie auf das Pfeilsymbol neben diesem Symbol und wählen Sie die gewünschte Layout-Option aus dem Menü aus. Sie haben die Wahl zwischen einem Inhaltsverzeichnis, das Überschriften, Seitenzahlen und Leader anzeigt oder nur Überschriften.<p><img alt="Inhaltsverzeichnis - Optionen" src="../images/tociconmenu.png" /></p>
                     <p class="note">Die Formatierung des Inhaltsverzeichnisses kann später über die Einstellungen des Inhaltsverzeichnisses angepasst werden.</p>
                 </li>
             </ol>

apps/documenteditor/main/resources/help/de/UsageInstructions/FillingOutForm.htm

@@ -4,6 +4,7 @@
     <title>Formular ausfüllen</title>
     <meta charset="utf-8" />
     <meta name="description" content="Formularvorlage ausfüllen" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -21,11 +22,11 @@
                         Öffnen Sie die OFORM-Datei.
                         <p><img alt="oform" src="../images/oform.png" /><p>
                         </li>
-                    <li>Füllen Sie alle erforderlichen Felder aus. Die Pflichtfelder sind mit rotem Strich gekennzeichnet. Verwenden Sie <img alt="Pfeile für Ausfüllen" src="../images/arrows_formfilling.png" /> oder <img alt="Nächst - Ausfüllen" src="../images/next_formfilling.png" /> auf dem obere Symbolleiste, um zwischen den Feldern zu navigieren, oder klicken Sie auf das Feld, das Sie ausfüllen möchten.
+                    <li>Füllen Sie alle erforderlichen Felder aus. Die Pflichtfelder sind mit rotem Strich gekennzeichnet. Verwenden Sie <div class = "icon icon-arrows_formfilling"></div> oder <img alt="Nächst - Ausfüllen" src="../images/next_formfilling.png" /> auf dem obere Symbolleiste, um zwischen den Feldern zu navigieren, oder klicken Sie auf das Feld, das Sie ausfüllen möchten.
                     <li>Verwenden Sie die Schaltfläche <img alt="Alle Felder löschen" src="../images/clearall_formfilling.png" /> <b>Alle Felder leeren</b>, um alle Eingabefelder zu leeren.</li>
                     <li>Nachdem Sie alle Felder ausgefüllt haben, klicken Sie auf die Schaltfläche <b>Als PDF speichern</b>, um das Formular als PDF-Datei auf Ihrem Computer zu speichern.</li> 
                     <li>
-                        Klicken Sie auf <img alt="Schaltfläche Mehr" src="../images/morebutton.png" /> in der oberen rechten Ecke der Symbolleiste, um zusätzliche Optionen anzuzeigen. Sie können das Formular <b>Drucken</b>, <b>Als DOCX herunterladen</b> oder <b>Als PDF herunterladen</b>.
+                        Klicken Sie auf <div class = "icon icon-morebutton"></div> in der oberen rechten Ecke der Symbolleiste, um zusätzliche Optionen anzuzeigen. Sie können das Formular <b>Drucken</b>, <b>Als DOCX herunterladen</b> oder <b>Als PDF herunterladen</b>.
                         <p><img alt="Mehr OFORM" src="../images/more_oform.png" /></p>
                         <p>Sie können auch das Thema der <b>Benutzeroberfläche</b> des Formulars ändern, indem Sie <b>Hell</b>, <b>Klassisch Hell</b> oder <b>Dunkel</b> auswählen. Sobald das Thema <b>Dunkelmodus</b> aktiviert ist, wird der <b>Dunkelmodus</b> verfügbar</p>
                         <p><img alt="Dunkelmodus - Formular" src="../images/darkmode_oform.png" /></p>

apps/documenteditor/main/resources/help/de/UsageInstructions/HTML.htm

@@ -4,6 +4,7 @@
     <title>HTML bearbeiten</title>
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des HTML-Plugins für ONLYOFFICE-Editoren, mit dem der HTML-Code des Textes bearbeitet werden kann" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm

@@ -19,7 +19,7 @@
 			<p>So fügen Sie Ihrem Dokument eine automatische Form hinzu im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>:</p>
 			<ol>
                 <li>Wechseln Sie zur Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.</li>
-				<li>Klicken Sie auf das <b>Formsymbol</b> <img alt="Form" src="../images/insertautoshape.png" /> in der oberen Symbolleiste.</li>
+				<li>Klicken Sie auf das <b>Formsymbol</b> <div class = "icon icon-insertautoshape"></div> in der oberen Symbolleiste.</li>
 				<li>Wählen Sie eine der verfügbaren Autoshape-Gruppen aus der <b>Formengalerie</b> aus: <em>Zuletzt verwendet</em>, <em>Standardformen</em>, <em>Geformte Pfeile</em>, <em>Mathematik</em>, <em>Diagramme</em>, <em>Sterne und Bänder</em>, <em>Legenden</em>, <em>Buttons</em>, <em>Rechtecke</em>, <em>Linien</em>.</li>
 				<li>Klicken Sie auf die erforderliche automatische Form innerhalb der ausgewählten Gruppe.</li>
 				<li>Platzieren Sie den Mauszeiger an der Stelle, an der die Form plaziert werden soll.</li>
@@ -30,15 +30,15 @@
 			</ol>
 			<p>Es ist auch möglich, der automatischen Form eine Beschriftung hinzuzufügen. Weitere Informationen zum Arbeiten mit Untertiteln für Autoformen finden Sie in <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">diesem Artikel</a>.</p>
             <h3>Verschieben und ändern Sie die Größe von Autoformen</h3>
-            <p id ="shape_resize"><img class="floatleft" alt="Form einer AutoForm ändern" src="../images/reshaping.png" />Um die Größe der automatischen Form zu ändern, ziehen Sie kleine Quadrate <img alt="Quadrat" src="../images/resize_square.png" /> an den Formkanten. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen der ausgewählten automatischen Form während der Größenänderung beizubehalten.</p>
-			<p>Wenn Sie einige Formen ändern, z. B. abgebildete Pfeile oder Beschriftungen, ist auch das gelbe rautenförmige Symbol <img alt="Gelber Diamant" src="../images/yellowdiamond.png" /> verfügbar. Hier können Sie einige Aspekte der Form anpassen, z. B. die Länge der Pfeilspitze.</p>
+            <p id ="shape_resize"><div class = "big big-reshaping"></div>Um die Größe der automatischen Form zu ändern, ziehen Sie kleine Quadrate <div class = "icon icon-resize_square"></div> an den Formkanten. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen der ausgewählten automatischen Form während der Größenänderung beizubehalten.</p>
+			<p>Wenn Sie einige Formen ändern, z. B. abgebildete Pfeile oder Beschriftungen, ist auch das gelbe rautenförmige Symbol <div class = "icon icon-yellowdiamond"></div> verfügbar. Hier können Sie einige Aspekte der Form anpassen, z. B. die Länge der Pfeilspitze.</p>
 			<p>
-				Verwenden Sie zum Ändern der Position der automatischen Form das Symbol <img alt="Pfeil" src="../images/arrow.png" />, das angezeigt wird, nachdem Sie den Mauszeiger über die automatische Form bewegt haben. Ziehen Sie die Autoform an die gewünschte Position, ohne die Maustaste loszulassen.
+				Verwenden Sie zum Ändern der Position der automatischen Form das Symbol <div class = "icon icon-arrow"></div>, das angezeigt wird, nachdem Sie den Mauszeiger über die automatische Form bewegt haben. Ziehen Sie die Autoform an die gewünschte Position, ohne die Maustaste loszulassen.
 				Wenn Sie die automatische Form verschieben, werden die Hilfslinien angezeigt, damit Sie das Objekt präzise auf der Seite positionieren können (wenn der ausgewählte Umbruchstil nicht „Inline“ ist).
 				Um die automatische Form in Ein-Pixel-Schritten zu verschieben, halten Sie die <b>Strg</b>-Taste gedrückt und verwenden Sie die Pfeiltasten.
 				Um die automatische Form streng horizontal/vertikal zu verschieben und zu verhindern, dass sie sich in eine senkrechte Richtung bewegt, halten Sie beim Ziehen die <b>Umschalttaste</b> gedrückt.
 			</p>
-			<p>Um die automatische Form zu drehen, bewegen Sie den Mauszeiger über den Drehgriff <img alt="Drehpunkt" src="../images/greencircle.png" /> und ziehen Sie ihn im oder gegen den Uhrzeigersinn. Halten Sie die <b>Umschalttaste</b> gedrückt, um den Drehwinkel auf Schritte von 15 Grad zu beschränken.</p>
+			<p>Um die automatische Form zu drehen, bewegen Sie den Mauszeiger über den Drehgriff <div class = "icon icon-greencircle"></div> und ziehen Sie ihn im oder gegen den Uhrzeigersinn. Halten Sie die <b>Umschalttaste</b> gedrückt, um den Drehwinkel auf Schritte von 15 Grad zu beschränken.</p>
             <p class="note">
 				Die Liste der Tastaturkürzel, die beim Arbeiten mit Objekten verwendet werden können, finden Sie <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">hier</a>.
 			</p>
@@ -65,7 +65,7 @@
 				</li>
 				<li><b>Anordnen</b> wird verwendet, um die ausgewählte automatische Form in den Vordergrund zu bringen, in den Hintergrund zu senden, vorwärts oder rückwärts zu bewegen sowie Formen zu gruppieren oder die Gruppierung aufzuheben, um Operationen mit mehreren von ihnen gleichzeitig auszuführen. Weitere Informationen zum Anordnen von Objekten finden Sie auf <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">dieser Seite</a>.</li>
 				<li><b>Ausrichten</b> wird verwendet, um die Form links, mittig, rechts, oben, Mitte, unten auszurichten. Weitere Informationen zum Ausrichten von Objekten finden Sie auf <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">dieser Seite</a>.</li>
-				<li>Der <b>Umbruchstil</b> wird verwendet, um einen Textumbruchstil aus den verfügbaren auszuwählen - inline, quadratisch, eng, durch, oben und unten, vorne, hinten - oder um die <b>Umbruchgrenze</b> zu bearbeiten. Die Option Wrap-Grenze bearbeiten ist nur verfügbar, wenn Sie einen anderen Wrap-Stil als Inline auswählen. Ziehen Sie die Umbruchpunkte, um die Grenze anzupassen. Um einen neuen Umbruchpunkt zu erstellen, klicken Sie auf eine beliebige Stelle auf der roten Linie und ziehen Sie sie an die gewünschte Position. <img alt="Umbruchgrenze bearbeiten" src="../images/wrap_boundary.png" /></li>
+				<li>Der <b>Umbruchstil</b> wird verwendet, um einen Textumbruchstil aus den verfügbaren auszuwählen - inline, quadratisch, eng, durch, oben und unten, vorne, hinten - oder um die <b>Umbruchgrenze</b> zu bearbeiten. Die Option Wrap-Grenze bearbeiten ist nur verfügbar, wenn Sie einen anderen Wrap-Stil als Inline auswählen. Ziehen Sie die Umbruchpunkte, um die Grenze anzupassen. Um einen neuen Umbruchpunkt zu erstellen, klicken Sie auf eine beliebige Stelle auf der roten Linie und ziehen Sie sie an die gewünschte Position. <div class = "big big-wrap_boundary"></div></li>
 				<li><b>Drehen</b> wird verwendet, um die Form um 90 Grad im oder gegen den Uhrzeigersinn zu drehen sowie um die Form horizontal oder vertikal zu drehen.</li>
 				<li>Mit den <b>Erweiterten Einstellungen der Form</b> wird das Fenster "Form - Erweiterte Einstellungen" geöffnet.</li>
 			</ul>
@@ -93,7 +93,7 @@
 						<li>
 							<b>Punkt des Farbverlaufs</b> ist ein bestimmter Punkt für den Verlauf von einer Farbe zur anderen.
 							<ul>
-								<li>Verwenden Sie die Schaltfläche <img alt="Punkt des Farbverlaufs einfügen" src="../images/addgradientpoint.png" /> <b>Punkt des Farbverlaufs einfügen</b> oder den Schieberegler, um einen Punkt des Verlaufs einzufügen. Sie können bis zu 10 Punkte einfügen. Jeder nächste eingefügte Punkt des Farbverlaufs beeinflusst in keiner Weise die aktuelle Darstellung der Farbverlaufsfüllung. Verwenden Sie die Schaltfläche <img alt="Punkt des Farbverlaufs entfernen" src="../images/removegradientpoint.png" /> <b>Punkt des Farbverlaufs entfernen</b>, um den bestimmten Punkt zu löschen.</li>
+								<li>Verwenden Sie die Schaltfläche <div class = "icon icon-addgradientpoint"></div> <b>Punkt des Farbverlaufs einfügen</b> oder den Schieberegler, um einen Punkt des Verlaufs einzufügen. Sie können bis zu 10 Punkte einfügen. Jeder nächste eingefügte Punkt des Farbverlaufs beeinflusst in keiner Weise die aktuelle Darstellung der Farbverlaufsfüllung. Verwenden Sie die Schaltfläche <div class = "icon icon-removegradientpoint"></div> <b>Punkt des Farbverlaufs entfernen</b>, um den bestimmten Punkt zu löschen.</li>
 								<li>Verwenden Sie den Schieberegler, um die Position des Farbverlaufspunkts zu ändern, oder geben Sie <b>Position</b> in Prozent an, um eine genaue Position zu erhalten.</li>
 								<li>Um eine Farbe auf einen Verlaufspunkt anzuwenden, klicken Sie auf einen Punkt im Schieberegler und dann auf <b>Farbe</b>, um die gewünschte Farbe auszuwählen.</li>
 							</ul>
@@ -140,10 +140,10 @@
 			</li>
             <li>Die <b>Drehung</b> wird verwendet, um die Form um 90 Grad im oder gegen den Uhrzeigersinn zu drehen sowie um die Form horizontal oder vertikal zu drehen. Klicken Sie auf eine der Schaltflächen:
 				<ul>
-                    <li><img alt="Gegen den Uhrzeigersinn drehen" src="../images/rotatecounterclockwise.png" /> um die Form um 90 Grad gegen den Uhrzeigersinn zu drehen</li>
-                    <li><img alt="Im Uhrzeigersinn drehen" src="../images/rotateclockwise.png" /> um die Form um 90 Grad im Uhrzeigersinn zu drehen</li>
-                    <li><img alt="Horizontal spiegeln" src="../images/fliplefttoright.png" /> um die Form horizontal zu drehen (von links nach rechts)</li>
-                    <li><img alt="Vertikal spiegeln" src="../images/flipupsidedown.png" /> um die Form vertikal zu drehen (verkehrt herum)</li>
+                    <li><div class = "icon icon-rotatecounterclockwise"></div> um die Form um 90 Grad gegen den Uhrzeigersinn zu drehen</li>
+                    <li><div class = "icon icon-rotateclockwise"></div> um die Form um 90 Grad im Uhrzeigersinn zu drehen</li>
+                    <li><div class = "icon icon-fliplefttoright"></div> um die Form horizontal zu drehen (von links nach rechts)</li>
+                    <li><div class = "icon icon-flipupsidedown"></div> um die Form vertikal zu drehen (verkehrt herum)</li>
                 </ul>
             </li>
 			<li><b>Umbruchstil</b> - Verwenden Sie diesen Abschnitt, um einen Textumbruchstil aus den verfügbaren auszuwählen - inline, quadratisch, eng, durch, oben und unten, vorne, hinten (weitere Informationen finden Sie in der Beschreibung der erweiterten Einstellungen unten).</li>
@@ -181,15 +181,15 @@
 			<ul>
 				<li><b>Umbruchstil</b> - Verwenden Sie diese Option, um die Position der Form relativ zum Text zu ändern: Sie ist entweder Teil des Textes (falls Sie den Inline-Stil auswählen) oder wird von allen Seiten umgangen (wenn Sie einen auswählen) die anderen Stile).
 				<ul>
-				    <li><p><img alt="Textumbruch - Mit Text verschieben" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - Die Form wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch die Form. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
+				    <li><p><div class = "icon icon-wrappingstyle_inline"></div> <b>Inline</b> - Die Form wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch die Form. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
 				    <p>Wenn einer der folgenden Stile ausgewählt ist, kann die Form unabhängig vom Text verschoben und genau auf der Seite positioniert werden:</p>
 				    </li>
-				    <li><p><img alt="Textumbruch - Quadrat" src="../images/wrappingstyle_square.png" /> <b>Quadratisch</b> - Der Text umschließt das rechteckige Feld, das die Form begrenzt.</p></li>
-				    <li><p><img alt="Textumbruch - Eng" src="../images/wrappingstyle_tight.png" /> <b>Eng</b> - Der Text umschließt die tatsächlichen Formkanten.</p></li>
-				    <li><p><img alt="Textumbruch - Transparent" src="../images/wrappingstyle_through.png" /> <b>Durch</b> - Der Text wird um die Formkanten gewickelt und füllt den offenen weißen Bereich innerhalb der Form aus. Verwenden Sie die Option <b>Umbruchgrenze bearbeiten</b> im Kontextmenü, damit der Effekt angezeigt wird.</p></li>
-				    <li><p><img alt="Textumbruch - Oben und unten" src="../images/wrappingstyle_topandbottom.png" /> <b>Oben und unten</b> - der Text befindet sich nur über und unter der Form.</p></li>
-				    <li><p><img alt="Textumbruch - Vorne" src="../images/wrappingstyle_infront.png" /> <b>Vorne</b> - die Form überlappt den Text.</p></li>
-				    <li><p><img alt="Textumbruch - Hinten" src="../images/wrappingstyle_behind.png" /> <b>Dahinter</b> - der Text überlappt die Form.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_square"></div> <b>Quadratisch</b> - Der Text umschließt das rechteckige Feld, das die Form begrenzt.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_tight"></div> <b>Eng</b> - Der Text umschließt die tatsächlichen Formkanten.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_through"></div> <b>Durch</b> - Der Text wird um die Formkanten gewickelt und füllt den offenen weißen Bereich innerhalb der Form aus. Verwenden Sie die Option <b>Umbruchgrenze bearbeiten</b> im Kontextmenü, damit der Effekt angezeigt wird.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_topandbottom"></div> <b>Oben und unten</b> - der Text befindet sich nur über und unter der Form.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_infront"></div> <b>Vorne</b> - die Form überlappt den Text.</p></li>
+				    <li><p><div class = "icon icon-wrappingstyle_behind"></div> <b>Dahinter</b> - der Text überlappt die Form.</p></li>
 				</ul>
 				</li>
 			</ul>

apps/documenteditor/main/resources/help/de/UsageInstructions/InsertCharts.htm

@@ -331,8 +331,8 @@
             </ol>
             <hr />
             <h3>Verschieben und Ändern der Größe von Diagrammen</h3>
-            <p><img class="floatleft" alt="Diagramm verschieben" src="../images/moving_chart.png" />Sobald das Diagramm hinzugefügt wurde, können Sie seine Größe und Position ändern. Um die Diagrammgröße zu ändern, ziehen Sie kleine Quadrate <img alt="Quadrat" src="../images/resize_square.png" /> an den Rändern. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen des ausgewählten Diagramms während der Größenänderung beizubehalten.</p>
-            <p>Verwenden Sie zum Ändern der Diagrammposition das Symbol <img alt="Pfeil" src="../images/arrow.png" />, das angezeigt wird, nachdem Sie den Mauszeiger über das Diagramm bewegt haben. Ziehen Sie das Diagramm an die gewünschte Position, ohne die Maustaste loszulassen. Wenn Sie das Diagramm verschieben, werden Hilfslinien angezeigt, mit denen Sie das Objekt präzise auf der Seite positionieren können (wenn ein anderer Umbruchstil als Inline ausgewählt ist).</p>
+            <p><img class="floatleft" alt="Diagramm verschieben" src="../images/moving_chart.png" />Sobald das Diagramm hinzugefügt wurde, können Sie seine Größe und Position ändern. Um die Diagrammgröße zu ändern, ziehen Sie kleine Quadrate <div class = "icon icon-resize_square"></div> an den Rändern. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen des ausgewählten Diagramms während der Größenänderung beizubehalten.</p>
+            <p>Verwenden Sie zum Ändern der Diagrammposition das Symbol <div class = "icon icon-arrow"></div>, das angezeigt wird, nachdem Sie den Mauszeiger über das Diagramm bewegt haben. Ziehen Sie das Diagramm an die gewünschte Position, ohne die Maustaste loszulassen. Wenn Sie das Diagramm verschieben, werden Hilfslinien angezeigt, mit denen Sie das Objekt präzise auf der Seite positionieren können (wenn ein anderer Umbruchstil als Inline ausgewählt ist).</p>
             <p class="note">
                 Die Liste der Tastaturkürzel, die beim Arbeiten mit Objekten verwendet werden können, finden Sie <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">hier</a>.
             </p>
@@ -340,16 +340,16 @@
             <h3>Diagrammelemente bearbeiten</h3>
             <p>Um den <b>Diagrammtitel</b> zu bearbeiten, wählen Sie den Standardtext mit der Maus aus und geben Sie stattdessen Ihren eigenen ein.</p>
             <p>Um die Schriftformatierung in Textelementen wie Diagrammtitel, Achsentiteln, Legendeneinträgen, Datenbeschriftungen usw. zu ändern, wählen Sie das gewünschte Textelement aus, indem Sie mit der linken Maustaste darauf klicken. Verwenden Sie dann die Symbole auf der Registerkarte Start der oberen Symbolleiste, um den <a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">Schrifttyp, die Größe, die Farbe</a> oder den <a href="../UsageInstructions/DecorationStyles.htm" onclick="onhyperlinkclick(this)">Dekorationsstil</a> zu ändern.</p>
-            <p>Wenn das Diagramm ausgewählt ist, ist rechts auch das Symbol für die <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> verfügbar, da eine Form als Hintergrund für das Diagramm verwendet wird. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Form <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Füll-</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strich</b></a>- und <b>Umhüllungsstil</b> anzupassen. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
+            <p>Wenn das Diagramm ausgewählt ist, ist rechts auch das Symbol für die <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> verfügbar, da eine Form als Hintergrund für das Diagramm verwendet wird. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Form <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Füll-</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strich</b></a>- und <b>Umhüllungsstil</b> anzupassen. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
             <p>
                 Über die Registerkarte <b>Formeinstellungen</b> im rechten Bereich können Sie nicht nur den Diagrammbereich selbst anpassen, sondern auch die Diagrammelemente wie <em>Plotbereich</em>, <em>Datenreihen</em>, <em>Diagrammtitel</em>, <em>Legende</em> usw. ändern und verschiedene Füllarten auf sie anwenden. Wählen Sie das Diagrammelement aus, indem Sie mit der linken Maustaste darauf klicken, und wählen Sie den bevorzugten Fülltyp aus: <em>Volltonfarbe</em>, <em>Verlauf</em>, <em>Textur</em> oder <em>Bild</em>, <em>Muster</em>. Geben Sie die Füllparameter an und legen Sie gegebenenfalls die <em>Deckkraftstufe</em> fest.
                 Wenn Sie eine vertikale oder horizontale Achse oder Gitterlinien auswählen, sind die Stricheinstellungen nur auf der Registerkarte <b>Formeinstellungen</b> verfügbar: <em>Farbe, Breite und Typ</em>. Weitere Informationen zum Arbeiten mit Formfarben, Füllungen und Strichen finden Sie auf <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">dieser Seite</a>.
             </p>
             <p class="note">Die Option <b>Schatten</b> anzeigen ist auch auf der Registerkarte <b>Formeinstellungen</b> verfügbar, für Diagrammelemente jedoch deaktiviert.</p>
-            <p>Wenn Sie die Größe von Diagrammelementen ändern möchten, klicken Sie mit der linken Maustaste, um das gewünschte Element auszuwählen, und ziehen Sie eines der 8 weißen Quadrate <img alt="Quadrat Symbol" src="../images/resize_square.png" /> entlang des Umfangs von das Element.</p>
-            <p><img alt="Größe von Diagrammelementen ändern" src="../images/resizeelement.png" /></p>
-            <p>Um die Position des Elements zu ändern, klicken Sie mit der linken Maustaste darauf, vergewissern Sie sich, so dass sich Ihr Cursor in <img alt="Pfeil" src="../images/arrow.png" /> geändert hat, halten Sie die linke Maustaste gedrückt und ziehen Sie das Element in die benötigte Position.</p>
-            <p><img alt="Position des Elements ändern" src="../images/moveelement.png" /></p>
+            <p>Wenn Sie die Größe von Diagrammelementen ändern möchten, klicken Sie mit der linken Maustaste, um das gewünschte Element auszuwählen, und ziehen Sie eines der 8 weißen Quadrate <div class = "icon icon-resize_square"></div> entlang des Umfangs von das Element.</p>
+            <p><div class = "big big-resizeelement"></div></p>
+            <p>Um die Position des Elements zu ändern, klicken Sie mit der linken Maustaste darauf, vergewissern Sie sich, so dass sich Ihr Cursor in <div class = "icon icon-arrow"></div> geändert hat, halten Sie die linke Maustaste gedrückt und ziehen Sie das Element in die benötigte Position.</p>
+            <p><div class = "big big-moveelement"></div></p>
             <p>Um ein Diagrammelement zu löschen, wählen Sie es mit der linken Maustaste aus und drücken Sie die <b>Entf</b>-Taste auf der Tastatur.</p>
             <p>Sie können 3D-Diagramme auch mit der Maus drehen. Klicken Sie mit der linken Maustaste in den Plotbereich und halten Sie die Maustaste gedrückt. Ziehen Sie den Zeiger, ohne die Maustaste loszulassen, um die Ausrichtung des 3D-Diagramms zu ändern.</p>
             <p><img alt="3D-Diagramm" src="../images/3dchart.png" /></p>

apps/documenteditor/main/resources/help/de/UsageInstructions/InsertImages.htm

@@ -21,7 +21,7 @@
 			<ol>
 				<li>Plazieren Sie den Zeiger an der Stelle, an der das Bild platziert werden soll.</li>
 				<li>Wechseln Sie zur Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.</li>
-				<li>Klicken Sie auf das <img alt="Bild" src="../images/image.png" /> <b>Bildsymbol</b> in der oberen Symbolleiste.</li>
+				<li>Klicken Sie auf das <div class = "icon icon-image"></div> <b>Bildsymbol</b> in der oberen Symbolleiste.</li>
 				<li>Wählen Sie eine der folgenden Optionen, um das Bild zu laden:
 					<ul>
 						<li>Die Option <b>Bild aus Datei</b> öffnet das Standarddialogfenster für die Dateiauswahl. Durchsuchen Sie das Festplattenlaufwerk Ihres Computers nach der erforderlichen Date und klicken Sie auf die Schaltfläche <b>Öffnen</b>.
@@ -35,19 +35,19 @@
 			</ol>
 			<p>Es ist auch möglich, dem Bild eine Beschriftung hinzuzufügen. Weitere Informationen zum Arbeiten mit Bildunterschriften finden Sie in <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">diesem Artikel</a>.</p>
 			<h3>Die Größe von Bildern ändern und Bilder verschieben</h3>
-			<p>Um die <img class="floatleft" alt="Bild verschieben" src="../images/moving_image.png" />Bildgröße zu ändern, ziehen Sie kleine Quadrate <img alt="Quadrat" src="../images/resize_square.png" /> an den Rändern. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen des ausgewählten Bilds während der Größenänderung beizubehalten.</p>
-			<p>Verwenden Sie zum Ändern der Bildposition das Symbol <img alt="Pfeil" src="../images/arrow.png" />, das angezeigt wird, nachdem Sie den Mauszeiger über das Bild bewegt haben. Ziehen Sie das Bild an die gewünschte Position, ohne die Maustaste loszulassen.</p>
+			<p>Um die <img class="floatleft" alt="Bild verschieben" src="../images/moving_image.png" />Bildgröße zu ändern, ziehen Sie kleine Quadrate <div class = "icon icon-resize_square"></div> an den Rändern. Halten Sie die <b>Umschalttaste</b> gedrückt und ziehen Sie eines der Eckensymbole, um die ursprünglichen Proportionen des ausgewählten Bilds während der Größenänderung beizubehalten.</p>
+			<p>Verwenden Sie zum Ändern der Bildposition das Symbol <div class = "icon icon-arrow"></div>, das angezeigt wird, nachdem Sie den Mauszeiger über das Bild bewegt haben. Ziehen Sie das Bild an die gewünschte Position, ohne die Maustaste loszulassen.</p>
 			<p>Wenn Sie das Bild verschieben, werden Hilfslinien angezeigt, mit denen Sie das Objekt präzise auf der Seite positionieren können (wenn ein anderer Umbruchstil als Inline ausgewählt ist).</p>
-			<p>Um das Bild zu drehen, bewegen Sie den Mauszeiger über den Drehgriff <img alt="Drehpunkt" src="../images/greencircle.png" /> und ziehen Sie ihn im oder gegen den Uhrzeigersinn. Halten Sie die Umschalttaste gedrückt, um den Drehwinkel auf Schritte von 15 Grad zu beschränken.</p>
+			<p>Um das Bild zu drehen, bewegen Sie den Mauszeiger über den Drehgriff <div class = "icon icon-greencircle"></div> und ziehen Sie ihn im oder gegen den Uhrzeigersinn. Halten Sie die Umschalttaste gedrückt, um den Drehwinkel auf Schritte von 15 Grad zu beschränken.</p>
 			<p class="note">
 				Die Liste der Tastaturkürzel, die beim Arbeiten mit Objekten verwendet werden können, finden Sie <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">hier</a>.
 			</p>
 			<hr />
 			<h3>Die Bildeinstellungen anpassen</h3>
-			<p><img class="floatleft" alt="Registerkarte Bildeinstellungen" src="../images/right_image.png" />Einige der Bildeinstellungen können über die Registerkarte <b>Bildeinstellungen</b> in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf das Bild und wählen Sie rechts das Symbol <b>Bildeinstellungen</b> <img alt="Bildeinstellungen" src="../images/image_settings_icon.png" />. Hier können Sie folgende Eigenschaften ändern:</p>
+			<p><img class="floatleft" alt="Registerkarte Bildeinstellungen" src="../images/right_image.png" />Einige der Bildeinstellungen können über die Registerkarte <b>Bildeinstellungen</b> in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf das Bild und wählen Sie rechts das Symbol <b>Bildeinstellungen</b> <div class = "icon icon-image_settings_icon"></div>. Hier können Sie folgende Eigenschaften ändern:</p>
 			<ul style="margin-left: 280px;">
 				<li><b>Größe</b> wird verwendet, um die aktuelle <b>Bildbreite</b> und <b>-höhe</b> anzuzeigen. Bei Bedarf können Sie die tatsächliche Bildgröße wiederherstellen, indem Sie auf die Schaltfläche <b>Tatsächliche Größe</b> klicken. Mit der Schaltfläche <b>An Rand anpassen</b> können Sie die Größe des Bilds so ändern, dass es den gesamten Abstand zwischen dem linken und rechten Seitenrand einnimmt.
-				<p>Mit der Schaltfläche <b>Zuschneiden</b> können Sie das Bild zuschneiden. Klicken Sie auf die Schaltfläche <b>Zuschneiden</b>, um die Beschneidungsgriffe zu aktivieren, die an den Bildecken und in der Mitte jeder Seite angezeigt werden. Ziehen Sie die Ziehpunkte manuell, um den Zuschneidebereich festzulegen. Sie können den Mauszeiger über den Rand des Zuschneidebereichs bewegen, sodass er zum <img alt="Pfeil" src="../images/arrow.png" /> Symbol wird, und den Bereich ziehen.</p>
+				<p>Mit der Schaltfläche <b>Zuschneiden</b> können Sie das Bild zuschneiden. Klicken Sie auf die Schaltfläche <b>Zuschneiden</b>, um die Beschneidungsgriffe zu aktivieren, die an den Bildecken und in der Mitte jeder Seite angezeigt werden. Ziehen Sie die Ziehpunkte manuell, um den Zuschneidebereich festzulegen. Sie können den Mauszeiger über den Rand des Zuschneidebereichs bewegen, sodass er zum <div class = "icon icon-arrow"></div> Symbol wird, und den Bereich ziehen.</p>
 					<ul>
 						<li>Um eine einzelne Seite zuzuschneiden, ziehen Sie den Griff in der Mitte dieser Seite.</li>
 						<li>Ziehen Sie einen der Eckgriffe, um zwei benachbarte Seiten gleichzeitig zuzuschneiden.</li>
@@ -64,10 +64,10 @@
 				</li>
 				<li>Durch <b>Drehen</b> wird das Bild um 90 Grad im oder gegen den Uhrzeigersinn gedreht sowie das Bild horizontal oder vertikal gespiegelt. Klicken Sie auf eine der Schaltflächen:
 				<ul>
-					<li><img alt="Gegen den Uhrzeigersinn drehen" src="../images/rotatecounterclockwise.png" /> um das Bild um 90 Grad gegen den Uhrzeigersinn zu drehen</li>
-					<li><img alt="Im Uhrzeigersinn drehen" src="../images/rotateclockwise.png" /> um das Bild um 90 Grad im Uhrzeigersinn zu drehen</li>
-					<li><img alt="Horizontal spiegeln" src="../images/fliplefttoright.png" /> um das Bild horizontal zu drehen  (von links nach rechts)</li>
-					<li><img alt="Vertikal spiegeln" src="../images/flipupsidedown.png" /> um das Bild vertikal zu drehen (verkehrt herum)</li>
+					<li><div class = "icon icon-rotatecounterclockwise"></div> um das Bild um 90 Grad gegen den Uhrzeigersinn zu drehen</li>
+					<li><div class = "icon icon-rotateclockwise"></div> um das Bild um 90 Grad im Uhrzeigersinn zu drehen</li>
+					<li><div class = "icon icon-fliplefttoright"></div> um das Bild horizontal zu drehen  (von links nach rechts)</li>
+					<li><div class = "icon icon-flipupsidedown"></div> um das Bild vertikal zu drehen (verkehrt herum)</li>
 				</ul>
 				</li>
 				<li>Der <b>Umbruchstil</b> wird verwendet, um einen Textumbruchstil aus den verfügbaren auszuwählen - Inline, Quadrat, Eng, Durch, Oben und Unten, vorne, hinten (weitere Informationen finden Sie in der Beschreibung der erweiterten Einstellungen unten).</li>
@@ -85,7 +85,7 @@
 				<li><b>Bild ersetzen</b> wird verwendet, um das aktuelle Bild zu ersetzen, das ein anderes <b>aus Datei</b> oder <b>Von URL</b> lädt.</li>
 				<li>Mit den <b>Erweiterte Einstellungen des Bildes</b> wird das Fenster "Bild - Erweiterte Einstellungen" geöffnet.</li>
 			</ul>
-			<p><img class="floatleft" alt="Registerkarte Formeinstellungen" src="../images/right_image_shape.png" /> Wenn das Bild ausgewählt ist, ist rechts auch das Symbol für die <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> verfügbar. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Form anzupassen. <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strichart</b></a>, -größe und -farbe sowie den Formtyp ändern, indem Sie im Menü <b>Autoshape</b> ändern eine andere Form auswählen. Die Form des Bildes ändert sich entsprechend.</p>
+			<p><img class="floatleft" alt="Registerkarte Formeinstellungen" src="../images/right_image_shape.png" /> Wenn das Bild ausgewählt ist, ist rechts auch das Symbol für die <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> verfügbar. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Form anzupassen. <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strichart</b></a>, -größe und -farbe sowie den Formtyp ändern, indem Sie im Menü <b>Autoshape</b> ändern eine andere Form auswählen. Die Form des Bildes ändert sich entsprechend.</p>
 			<p>Auf der Registerkarte <b>Formeinstellungen</b> können Sie auch die Option <b>Schatten anzeigen</b> verwenden, um dem Bild einen Schatten hinzuzufügen.</p>
 			<hr />
 			<h3>Die erweiterten Bildeinstellungen anpassen</h3>
@@ -106,15 +106,15 @@
 			<ul>
 				<li>
 					<b>Umbruchstil</b> - Verwenden Sie diese Option, um die Position des Bilds relativ zum Text zu ändern: Es ist entweder Teil des Textes (falls Sie den Inline-Stil auswählen) oder wird von allen Seiten umgangen (wenn Sie einen auswählen) die anderen Stile).<ul>
-						<li><p><img alt="Textumbruch - Mit Text verschieben" src="../images/wrappingstyle_inline.png" /> <b>Inline </b> - Das Bild wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch das Bild. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
+						<li><p><div class = "icon icon-wrappingstyle_inline"></div> <b>Inline </b> - Das Bild wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch das Bild. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
 							<p>Wenn einer der folgenden Stile ausgewählt ist, kann das Bild unabhängig vom Text verschoben und genau auf der Seite positioniert werden:</p>
 						</li>
-						<li><p><img alt="Textumbruch - Quadrat" src="../images/wrappingstyle_square.png" /> <b>Quadratisch</b> - Der Text umschließt das rechteckige Feld, das das Bild begrenzt.</p></li>
-						<li><p><img alt="Textumbruch - Eng" src="../images/wrappingstyle_tight.png" /> <b>Eng</b> - Der Text umschließt die eigentlichen Bildkanten.</p></li>
-						<li><p><img alt="Textumbruch - Transparent" src="../images/wrappingstyle_through.png" /> <b>Durch</b> - Der Text wird um die Bildränder gewickelt und füllt den offenen weißen Bereich innerhalb des Bildes aus. Verwenden Sie die Option <b>Umbruchgrenze bearbeiten</b> im Kontextmenü, damit der Effekt angezeigt wird.</p></li>
-						<li><p><img alt="Textumbruch - Oben und unten" src="../images/wrappingstyle_topandbottom.png" /> <b>Oben und unten</b> - der Text befindet sich nur über und unter dem Bild.</p></li>
-						<li><p><img alt="Textumbruch - Vorne" src="../images/wrappingstyle_infront.png" /> <b>Vorne</b> - das Bild überlappt den Text.</p></li>
-						<li><p><img alt="Textumbruch - Hinten" src="../images/wrappingstyle_behind.png" /> <b>Dahinter</b> - der Text überlappt das Bild.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_square"></div> <b>Quadratisch</b> - Der Text umschließt das rechteckige Feld, das das Bild begrenzt.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_tight"></div> <b>Eng</b> - Der Text umschließt die eigentlichen Bildkanten.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_through"></div> <b>Durch</b> - Der Text wird um die Bildränder gewickelt und füllt den offenen weißen Bereich innerhalb des Bildes aus. Verwenden Sie die Option <b>Umbruchgrenze bearbeiten</b> im Kontextmenü, damit der Effekt angezeigt wird.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_topandbottom"></div> <b>Oben und unten</b> - der Text befindet sich nur über und unter dem Bild.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_infront"></div> <b>Vorne</b> - das Bild überlappt den Text.</p></li>
+						<li><p><div class = "icon icon-wrappingstyle_behind"></div> <b>Dahinter</b> - der Text überlappt das Bild.</p></li>
 					</ul>
 				</li>
 			</ul>

apps/documenteditor/main/resources/help/de/UsageInstructions/Jitsi.htm

@@ -4,6 +4,7 @@
     <title>Audio- und Videoanrufe durchführen</title>
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Jitsi-Plugins für ONLYOFFICE-Editoren, das Audio- und Videoanrufe sofort über den Dokumenteneditor zugänglich macht." />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -31,7 +32,7 @@
         <img class="gif" alt="Youtube plugin gif" src="../images/jitsi_plugin.gif" width="600" />
         <p>Die Elemente der Benutzeroberfläche von <b>Jitsi Meet iframe</b> vor dem Start eines Meetings:</p>
         <p>
-            <img alt="Jitsi Micro" src="../images/jitsi_micro.png" />
+            <div class = "icon icon-jitsi_micro"></div>
             <b>Audioeinstellungen und Stumm/Stumm aufheben</b>
         </p>
         <ul>
@@ -39,7 +40,7 @@
             <li>Klicken Sie auf das Mikro, um Ihr Mikrofon stumm zu schalten/die Stummschaltung aufzuheben.</li>
         </ul>
         <p>
-            <img alt="Jitsi Camera" src="../images/jitsi_camera.png" />
+            <div class = "icon icon-jitsi_camera"></div>
             <b>Videoeinstellungen und Start/Stop</b>
         </p>
         <ul>
@@ -47,7 +48,7 @@
             <li>Klicken Sie auf die Kamera, um Ihr Video zu starten/stoppen.</li>
         </ul>
         <p>
-            <img alt="Jitsi Invite" src="../images/jitsi_invite.png" />
+            <div class = "icon icon-jitsi_invite"></div>
             <b>Personen einladen</b>
         </p>
         <ul>
@@ -60,7 +61,7 @@
             <li>Verwenden Sie eine der verfügbaren Einwahlnummern, um am Meeting teilzunehmen.</li>
         </ul>
         <p>
-            <img alt="Jitsi Background" src="../images/jitsi_background.png" />
+            <div class = "icon icon-jitsi_background"></div>
             <b>Hintergrund auswählen</b>
         </p>
         <ul>
@@ -68,7 +69,7 @@
             <li>Geben Sie Ihren Desktop frei, indem Sie die entsprechende Option auswählen: <b>Screen</b>,<b> Window</b> oder <b>Tab</b>.</li>
         </ul>
         <p>
-            <img alt="Jitsi Background" src="../images/jitsi_background.png" />
+            <div class = "icon icon-jitsi_background"></div>
             <b>Einstellungen</b>
         </p>
         <p>Konfigurieren Sie erweiterte Einstellungen, die in den folgenden Kategorien organisiert sind:</p>
@@ -91,21 +92,21 @@
             Der Timer oben im Iframe zeigt die Meetingsdauer an.
         </p>
         <p>
-            <img alt="Jitsi Open Chat" src="../images/jitsi_openchat.png" />
+            <div class = "icon icon-jitsi_openchat"></div>
             <b>Chat öffnen</b>
         </p>
         <ul>
             <li>Geben Sie eine Textnachricht ein oder erstellen Sie eine Umfrage.</li>
         </ul>
         <p>
-            <img alt="Jitsi Participants" src="../images/jitsi_participants.png" />
+            <div class = "icon icon-jitsi_participants"></div>
             <b>Teilnehmer</b>
         </p>
         <ul>
             <li>Zeigen Sie die Liste der Meetingsteilnehmer an, laden Sie weitere Teilnehmer ein und suchen Sie einen Teilnehmer.</li>
         </ul>
         <p>
-            <img alt="Jitsi More Actions" src="../images/jitsi_more.png" />
+            <div class = "icon icon-jitsi_more"></div>
             <b>Mehr Aktionen</b>
         </p>
         <ul>
@@ -141,7 +142,7 @@
             </ul>
         </details>
         <p>
-            <img alt="Jitsi Leave" src="../images/jitsi_leave.png" />
+            <div class = "icon icon-jitsi_leave"></div>
             <b>Leave the meeting | Meeting verlassen</b>
         </p>
         <ul>

apps/documenteditor/main/resources/help/de/UsageInstructions/OpenCreateNew.htm

@@ -28,7 +28,7 @@
                 <p><em>Desktop-Editor</em></p>
                 <ol>
                     <li>Wählen Sie im Hauptfenster des Programms das Menü <b>Dokument</b> im Abschnitt <b>Neu erstellen</b> der linken Seitenleiste aus - eine neue Datei wird in einer neuen Registerkarte geöffnet.</li>
-                    <li>Wenn Sie alle gewünschten Änderungen durchgeführt haben, klicken Sie auf das Symbol <b>Speichern</b> <img alt="Speichern" src="../images/save.png" /> in der oberen linken Ecke oder wechseln Sie in die Registerkarte <b>Datei</b> und wählen Sie das Menü <b>Speichern als</b> aus.</li>
+                    <li>Wenn Sie alle gewünschten Änderungen durchgeführt haben, klicken Sie auf das Symbol <b>Speichern</b> <div class = "icon icon-save"></div> in der oberen linken Ecke oder wechseln Sie in die Registerkarte <b>Datei</b> und wählen Sie das Menü <b>Speichern als</b> aus.</li>
                     <li>Wählen Sie im Fenster Dateiverwaltung den Speicherort, geben Sie den Namen an, wählen Sie das Format aus in dem Sie das Dokument speichern möchten (DOCX, DOCXF, OFORM, Dokumentvorlage (DOTX), ODT, OTT, RTF, TXT, PDF oder PDFA) und klicken Sie auf die Schaltfläche <b>Speichern</b>.</li>
                 </ol>
             </div>

apps/documenteditor/main/resources/help/de/UsageInstructions/SupportSmartArt.htm

@@ -4,6 +4,7 @@
         <title>Unterstützung von SmartArt im ONLYOFFICE-Dokumenteneditor</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Bearbeiten Sie SmartArt-Grafiken, die mit Editoren von Drittanbietern hinzugefügt wurden"/>
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/de/UsageInstructions/Typograf.htm

@@ -4,6 +4,7 @@
     <title>Typografie korrigieren</title>
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Typograf-Plugins für ONLYOFFICE-Editoren, mit dem die Typografie des Textes korrigiert werden kann" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/de/UsageInstructions/UseMailMerge.htm

@@ -24,7 +24,7 @@
                         <li>Eine für den Seriendruck verwendete Datenquelle muss eine <b>.xlsx</b>-Tabelle sein, die in Ihrem Portal gespeichert ist. Öffnen Sie eine vorhandene Tabelle oder erstellen Sie eine neue Tabelle und stellen Sie sicher, dass sie die folgenden Anforderungen erfüllt.
                         <li>Die Tabelle sollte eine Kopfzeile mit den Spaltentiteln haben, da die Werte in der ersten Zelle jeder Spalte Briefvorlagenfelder bezeichnen (d. h. Variablen, die Sie in den Text einfügen können). Jede Spalte sollte eine Reihe von tatsächlichen Werten für eine Variable enthalten. Jede Zeile in der Tabelle sollte einem separaten Datensatz entsprechen (d. h. einer Reihe von Werten, die einem bestimmten Empfänger gehören). Während des Zusammenführungsprozesses wird für jeden Datensatz eine Kopie des Hauptdokuments erstellt und jedes in den Haupttext eingefügte Zusammenführungsfeld wird durch einen tatsächlichen Wert aus der entsprechenden Spalte ersetzt. Wenn Sie Ergebnisse per E-Mail senden möchten, muss die Tabelle auch eine Spalte mit den E-Mail-Adressen der Empfänger enthalten.</li>
                         <li>
-                            Öffnen Sie ein vorhandenes Textdokument oder erstellen Sie ein neues Dokument. Es muss den Haupttext enthalten, der für jede Version des zusammengeführten Dokuments gleich ist. Klicken Sie auf das Symbol <b>Serienbrief</b> <img alt="Serienbrief-Symbol" src="../images/mailmergeicon.png" /> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie den Speicherort der Datenquelle: <b>Aus Datei</b>, <b>Aus URL</b> oder <b>Aus dem Speicher</b>.
+                            Öffnen Sie ein vorhandenes Textdokument oder erstellen Sie ein neues Dokument. Es muss den Haupttext enthalten, der für jede Version des zusammengeführten Dokuments gleich ist. Klicken Sie auf das Symbol <b>Serienbrief</b> <div class = "icon icon-mailmergeicon"></div> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie den Speicherort der Datenquelle: <b>Aus Datei</b>, <b>Aus URL</b> oder <b>Aus dem Speicher</b>.
                         </li>
                         <li>
                             Wählen Sie die erforderliche Datei aus oder fügen Sie eine URL ein und klicken Sie auf <b>OK</b>.
@@ -43,15 +43,15 @@
                 </li>
                 <li>
                     Hier können Sie bei Bedarf neue Informationen hinzufügen bzw. vorhandene Daten bearbeiten oder löschen. Um das Arbeiten mit Daten zu vereinfachen, können Sie die Symbole oben im Fenster verwenden:<ul>
-                        <li><img alt="Kopieren" src="../images/copy.png" /> und <img alt="Einfügen" src="../images/paste.png" /> - zum Kopieren und Einfügen der kopierten Daten.</li>
-                        <li><img alt="Rückgängig machen" src="../images/undo1.png" /> und <img alt="Wiederholen" src="../images/redo1.png" /> - um Aktionen rückgängig zu machen und zu wiederholen.</li>
-                        <li><img alt="Aufsteigend sortieren" src="../images/sortatoz.png" /> und <img alt="Absteigend sortieren" src="../images/sortztoa.png" /> - um Ihre Daten in einem Zellenbereich in aufsteigender oder absteigender Reihenfolge zu sortieren.</li>
-                        <li><img alt="Filter" src="../images/sortandfilter.png" /> - um den Filter für den zuvor ausgewählten Zellenbereich zu aktivieren oder den aktuellen Filter zu entfernen.</li>
+                        <li><div class = "icon icon-copy"></div> und <div class = "icon icon-paste"></div> - zum Kopieren und Einfügen der kopierten Daten.</li>
+                        <li><div class = "icon icon-undo1"></div> und <div class = "icon icon-redo1"></div> - um Aktionen rückgängig zu machen und zu wiederholen.</li>
+                        <li><div class = "icon icon-sortatoz"></div> und <div class = "icon icon-sortztoa"></div> - um Ihre Daten in einem Zellenbereich in aufsteigender oder absteigender Reihenfolge zu sortieren.</li>
+                        <li><div class = "icon icon-sortandfilter"></div> - um den Filter für den zuvor ausgewählten Zellenbereich zu aktivieren oder den aktuellen Filter zu entfernen.</li>
                         <li>
-                            <img alt="Filter löschen" src="../images/clearfilter.png" /> - um alle angewendeten Filterparameter zu löschen.<p class="note"><b>Hinweis</b>: Weitere Informationen zur Verwendung des Filters finden Sie im Abschnitt <b>Sortieren und Filtern von Daten</b> im Hilfemenü des <b>Tabelleneditors</b>.</p>
+                            <div class = "icon icon-clearfilter"></div> - um alle angewendeten Filterparameter zu löschen.<p class="note"><b>Hinweis</b>: Weitere Informationen zur Verwendung des Filters finden Sie im Abschnitt <b>Sortieren und Filtern von Daten</b> im Hilfemenü des <b>Tabelleneditors</b>.</p>
                         </li>
                         <li>
-                            <img alt="Suche" src="../images/searchicon.png" /> - um nach einem bestimmten Wert zu suchen und ihn gegebenenfalls durch einen anderen zu ersetzen.<p class="note"><b>Hinweis</b>: Weitere Informationen zur Verwendung des Werkzeugs <b>Suchen und Ersetzen</b> finden Sie im Abschnitt <b>Suchen und Ersetzen von Funktionen</b> im Hilfemenü des <b>Tabelleneditors</b>.</p>
+                            <div class = "icon icon-searchicon"></div> - um nach einem bestimmten Wert zu suchen und ihn gegebenenfalls durch einen anderen zu ersetzen.<p class="note"><b>Hinweis</b>: Weitere Informationen zur Verwendung des Werkzeugs <b>Suchen und Ersetzen</b> finden Sie im Abschnitt <b>Suchen und Ersetzen von Funktionen</b> im Hilfemenü des <b>Tabelleneditors</b>.</p>
                         </li>
                     </ul>
                 </li>

apps/documenteditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm

@@ -17,21 +17,21 @@
         <h1>Co-editing documents in real time</h1>
         <p>The <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> allows you to maintain constant team-wide approach to work flow: <a href="https://helpcenter.onlyoffice.com/userguides/groups-guides-documents-share-documents.aspx">share</a> files and folders, <a href="../HelpfulHints/Communicating.htm" onclick="onhyperlinkclick(this)">communicate</a> right in the editor, <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">comment</a> certain parts of your documents that require additional third-party input, save <a href="../HelpfulHints/VersionHistory.htm" onclick="onhyperlinkclick(this)">document versions</a> for future use, <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">review</a> documents and add your changes without actually editing the file, <a href="../HelpfulHints/Comparison.htm" onclick="onhyperlinkclick(this)">compare and merge</a> documents to facilitate processing and editing.</p>
         <p>In <b>Document Editor</b> you can collaborate on documents in real time using two modes: <b>Fast</b> or <b>Strict</b>.</p>
-        <p>The modes can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>. It's also possible to choose the required mode using the <img alt="Co-editing Mode icon" src="../images/coeditingmode.png" /> <b>Co-editing Mode</b> icon on the <b>Collaboration</b> tab of the top toolbar:</p>
+        <p>The modes can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>. It's also possible to choose the required mode using the <div class = "icon icon-coeditingmode"></div> <b>Co-editing Mode</b> icon on the <b>Collaboration</b> tab of the top toolbar:</p>
         <p><img alt="Co-editing Mode menu" src="../images/coeditingmodemenu.png" /></p>
-        <p>The number of users who are working on the current document is displayed on the right side of the editor header - <img alt="Number of users icon" src="../images/usersnumber.png" />. If you want to see who exactly is editing the file now, you can click this icon or open the <b>Chat</b> panel with the full list of the users.</p>
+        <p>The number of users who are working on the current document is displayed on the right side of the editor header - <div class = "icon icon-usersnumber"></div>. If you want to see who exactly is editing the file now, you can click this icon or open the <b>Chat</b> panel with the full list of the users.</p>
         <h3>Fast mode</h3>
         <p>The <b>Fast</b> mode is used by default and shows the changes made by other users in real time. When you co-edit a document in this mode, the possibility to <b>Redo</b> the last undone operation is not available. This mode will show the actions and the names of the co-editors when they are editing the text.</p>
         <p>By hovering the mouse cursor over one of the edited passages, the name of the user who is editing it at the moment is displayed.</p>
         <p><img alt="Fast mode" src="../images/fastmode.png" /></p>
         <h3>Strict mode</h3>
-        <p>The <b>Strict</b> mode is selected to hide changes made by other users until you click the <b>Save</b> <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon to save your changes and accept the changes made by co-authors. When a document is being edited by several users simultaneously in this mode, the edited text passages are marked with dashed lines of different colors.</p>
+        <p>The <b>Strict</b> mode is selected to hide changes made by other users until you click the <b>Save</b> <div class = "icon icon-savewhilecoediting"></div> icon to save your changes and accept the changes made by co-authors. When a document is being edited by several users simultaneously in this mode, the edited text passages are marked with dashed lines of different colors.</p>
         <p><img alt="Strict mode" src="../images/strictmode.png" /></p>
-        <p>As soon as one of the users saves their changes by clicking the <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
+        <p>As soon as one of the users saves their changes by clicking the <div class = "icon icon-savewhilecoediting"></div> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <div class = "icon icon-saveupdate"></div> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
         <p>You can specify what changes you want to be highlighted during co-editing if you click the <b>File</b> tab on the top toolbar, select the <b>Advanced Settings...</b> option and choose one of the three options:</p>
         <ul>
             <li><b>View all</b> - all the changes made during the current session will be highlighted.</li>
-            <li><b>View last</b> - only the changes made since you last time clicked the <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted.</li>
+            <li><b>View last</b> - only the changes made since you last time clicked the <div class = "icon icon-saveupdate"></div> icon will be highlighted.</li>
             <li><b>View None</b> - changes made during the current session will not be highlighted.</li>
         </ul>
         <h3>Anonymous</h3>

apps/documenteditor/main/resources/help/en/HelpfulHints/Commenting.htm

@@ -4,6 +4,7 @@
     <title>Commenting documents</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tips on collaborative editing" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -21,15 +22,15 @@
         <ol>
             <li>select a text passage where you think there is an error or problem,</li>
             <li>
-                switch to the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar and click the <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Comment</b> button, or<br />
-                use the <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar to open the <b>Comments</b> panel and click the <b>Add Comment to Document</b> link, or<br />
+                switch to the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar and click the <div class = "icon icon-comment_toptoolbar"></div> <b>Comment</b> button, or<br />
+                use the <div class = "icon icon-commentsicon"></div> icon on the left sidebar to open the <b>Comments</b> panel and click the <b>Add Comment to Document</b> link, or<br />
                 right-click the selected text passage and select the <b>Add Сomment</b> option from the contextual menu,
             </li>
             <li>enter the required text,</li>
             <li>click the <b>Add Comment/Add</b> button.</li>
         </ol>
         <p>The comment will be seen on the <b>Comments</b> panel on the left. Any other user can answer the added comment asking questions or reporting on the work they have done. For this purpose, click the <b>Add Reply</b> link situated under the comment, type in your reply in the entry field and press the <b>Reply</b> button.</p>
-        <p>If you are using the <b>Strict</b> co-editing mode, new comments added by other users will become visible only after you click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar.</p>
+        <p>If you are using the <b>Strict</b> co-editing mode, new comments added by other users will become visible only after you click the <div class = "icon icon-saveupdate"></div> icon in the left upper corner of the top toolbar.</p>
         <h3>Disabling display of comments</h3>
         <p>The text passage you commented will be highlighted in the document. To view the comment, just click within the passage. To disable this feature,</p>
         <ol>
@@ -37,12 +38,12 @@
             <li>select the <b>Advanced Settings...</b> option,</li>
             <li>uncheck the <b>Turn on display of the comments</b> box.</li>
         </ol>
-        <p>Now the commented passages will be highlighted only if you click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon.</p>
+        <p>Now the commented passages will be highlighted only if you click the <div class = "icon icon-commentsicon"></div> icon.</p>
         <h3>Managing comments</h3>
         <p>You can manage the added comments using the icons in the comment balloon or on the <b>Comments</b> panel on the left:</p>
         <ul>
             <li>
-                sort the added comments by clicking the <img alt="Sort icon" src="../images/sortcommentsicon.png" /> icon:
+                sort the added comments by clicking the <div class = "icon icon-sortcommentsicon"></div> icon:
                 <ul>
                     <li>by date: <b>Newest</b> or <b>Oldest</b>. This is the sort order by default.</li>
                     <li>by author: <b>Author from A to Z</b> or <b>Author from Z to A</b>.</li>
@@ -51,9 +52,9 @@
                     <p><img alt="Sort comments" src="../images/sortcomments.png" /></p>
                     </li>
                 </ul>
-            <li>edit the currently selected comment by clicking the <img alt="Edit icon" src="../images/editcommenticon.png" /> icon,</li>
-            <li>delete the currently selected comment by clicking the <img alt="Delete icon" src="../images/deletecommenticon.png" /> icon,</li>
-            <li>close the currently selected discussion by clicking the <img alt="Resolve icon" src="../images/resolveicon.png" /> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <img alt="Open again icon" src="../images/resolvedicon.png" /> icon. If you want to hide resolved comments, click the <b>File</b> tab on the top toolbar, select the <b>Advanced Settings...</b> option, uncheck the <b>Turn on display of the resolved comments</b> box and click <b>Apply</b>. In this case the resolved comments will be highlighted only if you click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon,</li>
+            <li>edit the currently selected comment by clicking the <div class = "icon icon-editcommenticon"></div> icon,</li>
+            <li>delete the currently selected comment by clicking the <div class = "icon icon-deletecommenticon"></div> icon,</li>
+            <li>close the currently selected discussion by clicking the <div class = "icon icon-resolveicon"></div> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <div class = "icon icon-resolvedicon"></div> icon. If you want to hide resolved comments, click the <b>File</b> tab on the top toolbar, select the <b>Advanced Settings...</b> option, uncheck the <b>Turn on display of the resolved comments</b> box and click <b>Apply</b>. In this case the resolved comments will be highlighted only if you click the <div class = "icon icon-commentsicon"></div> icon,</li>
             <li>if you want to manage comments in a bunch, open the <b>Resolve</b> drop-down menu on the <b>Collaboration</b> tab. Select one of the options for resolving comments: <b>resolve current comments</b>, <b>resolve my comments</b> or <b>resolve all comments</b> in the document.</li>
         </ul>
         <h3>Adding mentions</h3>
@@ -69,7 +70,7 @@
         <h3>Removing comments</h3>
         <p>To remove comments,</p>
         <ol>
-            <li>click the <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Remove</b> button on the <b>Collaboration</b> tab of the top toolbar,</li>
+            <li>click the <div class = "icon icon-removecomment_toptoolbar"></div> <b>Remove</b> button on the <b>Collaboration</b> tab of the top toolbar,</li>
             <li>
                 select the necessary option from the menu:
                 <ul>
@@ -79,7 +80,7 @@
                 </ul>
             </li>
         </ol>
-        <p>To close the panel with comments, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar once again.</p>
+        <p>To close the panel with comments, click the <div class = "icon icon-commentsicon"></div> icon on the left sidebar once again.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/en/HelpfulHints/Communicating.htm

@@ -4,6 +4,7 @@
     <title>Communicating in real time</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tips on collaborative editing" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -19,15 +20,15 @@
         <p>To access the <b>Chat</b> tool and leave a message for other users,</p>
         <ol>
             <li>
-                click the <img alt="Chat icon" src="../images/chaticon.png" /> icon on the left sidebar, or <br />
-                switch to the <b>Collaboration</b> tab of the top toolbar and click the <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b> button,
+                click the <div class = "icon icon-chaticon"></div> icon on the left sidebar, or <br />
+                switch to the <b>Collaboration</b> tab of the top toolbar and click the <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b> button,
             </li>
             <li>enter your text into the corresponding field below,</li>
             <li>press the <b>Send</b> button.</li>
         </ol>
         <p class="note">The chat messages are stored during one session only. To discuss the document content, it is better to <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">use comments</a> which are stored until they are deleted.</p>
-        <p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
-        <p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon on the left sidebar or the <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b> button at the top toolbar once again.</p>
+        <p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <div class = "icon icon-chaticon_new"></div>.</p>
+        <p>To close the panel with chat messages, click the <div class = "icon icon-chaticon"></div> icon on the left sidebar or the <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b> button at the top toolbar once again.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/en/HelpfulHints/Password.htm

@@ -25,7 +25,7 @@
 				<li>choose the <b>Protect</b> option,</li>
 				<li>click the <b>Add password</b> button,</li>
                 <li>
-                    set a password in the <b>Password</b> field and repeat it in the <b>Repeat password</b> field below, then click <b>OK</b>. Click <img alt="Show password icon" src="../images/show_password.png" /> to show or hide password characters when entered.
+                    set a password in the <b>Password</b> field and repeat it in the <b>Repeat password</b> field below, then click <b>OK</b>. Click <div class = "icon icon-show_password"></div> to show or hide password characters when entered.
                     <p><img alt="setting password" src="../images/setpassword.png" /></p>
                 </li>
 			</ul>

apps/documenteditor/main/resources/help/en/HelpfulHints/Review.htm

@@ -22,9 +22,9 @@
         <h3>Enable the Track Changes feature</h3>
         <p>To see changes suggested by a reviewer, enable the <b>Track Changes</b> option in one of the following ways:</p>
         <ul>
-            <li>click the <img alt="Track changes button" src="../images/trackchangesstatusbar.png" /> button in the right lower corner on the status bar, or</li>
+            <li>click the <div class = "icon icon-trackchangesstatusbar"></div> button in the right lower corner on the status bar, or</li>
             <li>
-                switch to the <b>Collaboration</b> tab on the top toolbar and press the <img alt="Track Changes button" src="../images/trackchangestoptoolbar.png" /> <b>Track Changes</b> button.
+                switch to the <b>Collaboration</b> tab on the top toolbar and press the <div class = "icon icon-trackchangestoptoolbar"></div> <b>Track Changes</b> button.
                 <p class="note">It is not necessary for the reviewer to enable the <b>Track Changes</b> option. It is enabled by default and cannot be disabled when the document is shared with review only access rights.</p>
             </li>
             <li>
@@ -72,10 +72,10 @@
             <li>click the downward arrow below the <b>Reject</b> button and select the <b>Reject Current Change</b> option (in this case, the change will be rejected and you will move on to the next available change), or</li>
             <li>click the <b>Reject</b> <div class = "icon icon-review_reject"></div> button of the change balloon.</li>
         </ul>
-        <p>To quickly reject all the changes, click the downward arrow below the <img alt="Reject button" src="../images/review_rejecttoptoolbar.png" /> <b>Reject</b> button and select the <b>Reject All Changes</b> option.</p>
+        <p>To quickly reject all the changes, click the downward arrow below the <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Reject</b> button and select the <b>Reject All Changes</b> option.</p>
         <p>If you need to accept or reject one change, right-click it and choose <b>Accept Change</b> or <b>Reject Change</b> from the context menu.</p>
         <p><img alt="Accept/Reject dropdowm menu" src="../images/acceptreject_dropdown.png" /></p>
-        <p class="note">If you review the document, the <b>Accept</b> and <b>Reject</b> options are not available for you. You can delete your changes using the <img alt="Delete change button" src="../images/review_delete.png" /> icon within the change balloon.</p>
+        <p class="note">If you review the document, the <b>Accept</b> and <b>Reject</b> options are not available for you. You can delete your changes using the <div class = "icon icon-review_delete"></div> icon within the change balloon.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/en/HelpfulHints/Search.htm

@@ -15,13 +15,13 @@
 				<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
 			</div>
 			<h1>Search and Replace Function</h1>
-			<p>To search for the required characters, words or phrases used in the currently edited document, click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated on the left sidebar of the <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> or use the <em>Ctrl+F</em> key combination.</p>
+			<p>To search for the required characters, words or phrases used in the currently edited document, click the <div class = "icon icon-searchicon"></div> icon situated on the left sidebar of the <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> or use the <em>Ctrl+F</em> key combination.</p>
 			<p>The <b>Find and Replace</b> window will open:</p>
 			<p><img alt="Find and Replace Window" src="../images/search_window.png" /></p>
 			<ol>
 				<li>Type in your inquiry into the corresponding data entry field.</li>
 				<li>
-					Specify search parameters by clicking the <img alt="Search options icon" src="../images/search_options.png" /> icon and checking the necessary options:
+					Specify search parameters by clicking the <div class = "icon icon-search_options"></div> icon and checking the necessary options:
 					<ul>
 						<li><b>Case sensitive</b> - is used to find only the occurrences typed in the same case as your inquiry (e.g. if your inquiry is 'Editor' and this option is selected, such words as 'editor' or 'EDITOR' etc. will not be found). To disable this option, click it once again.</li>
 						<li><b>Highlight results</b> - is used to highlight all found occurrences at once. To disable this option and remove the highlight, click the option once again.</li>
@@ -29,7 +29,7 @@
 				</li>
 				<li>
 					Click one of the <b>arrow buttons</b> at the bottom right corner of the window.
-					The search will be performed either towards the beginning of the document (if you click the <img alt="Left arrow button" src="../images/searchupbutton.png" /> button) or towards the end of the document (if you click the <img alt="Right arrow button" src="../images/searchdownbutton.png" /> button) from the current position.
+					The search will be performed either towards the beginning of the document (if you click the <div class = "icon icon-searchupbutton"></div> button) or towards the end of the document (if you click the <div class = "icon icon-searchdownbutton"></div> button) from the current position.
 					<p class="note"><b>Note</b>: when the <b>Highlight results</b> option is enabled, use these buttons to navigate through the highlighted results.</p>
 				</li>
 			</ol>

apps/documenteditor/main/resources/help/en/HelpfulHints/VersionHistory.htm

@@ -4,6 +4,7 @@
     <title>Version history</title>
     <meta charset="utf-8" />
     <meta name="description" content="Tips on collaborative editing" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -23,7 +24,7 @@
             <li>select the <b>Version History</b> option at the left sidebar
             <p>or</p></li>
             <li>go to the <b>Collaboration</b> tab,</li>
-            <li>open the history of versions using the <img alt="Version history" src="../images/versionhistoryicon.png" /> <b>Version History</b> icon at the top toolbar.</li>
+            <li>open the history of versions using the <div class = "icon icon-versionhistoryicon"></div> <b>Version History</b> icon at the top toolbar.</li>
         </ul>
         <p>You'll see the list of the document versions and revisions with the indication of each version/revision author and creation date and time. For document versions, the version number is also specified (e.g. <em>ver. 2</em>).</p>
         <p><b>Viewing versions:</b></p>

apps/documenteditor/main/resources/help/en/HelpfulHints/Viewer.htm

@@ -4,6 +4,7 @@
 		<title>ONLYOFFICE Document Viewer</title>
 		<meta charset="utf-8" />
         <meta name="description" content="The description of ONLYOFFICE Document Viewer navigation tools" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -53,28 +54,28 @@
             <ol>
                 <li>
                     The Top toolbar provides access to <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a> and <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a> tabs, and the following icons:
-                    <p><img alt="Print" src="../images/print.png" /> <b>Print</b> allows to print out the file;</p>
-                    <p><img alt="Download" src="../images/downloadicon.png" /> <b>Download</b> allows to download a file to your computer;</p>
-                    <p><img alt="Manage document access rights icon" src="../images/access_rights.png" /><b> Manage document access rights</b> (available in the <em>online version</em> only) allows you to manage the users who have access to the file right from the document: invite new users giving them permissions to edit, read, comment, fill forms or review the document, or deny some users access rights to the file.</p>
-                    <p><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> in the <em>desktop version</em> allows opening the folder, where the file is stored, in the <b>File explorer</b> window. In the <em>online version</em>, it allows opening the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab;</p>
-                    <p><img alt="Favorites" src="../images/favorites_icon.png" /> <b>Mark as favorite / Remove from favorites</b> (available in the <em>online version</em> only) click the empty star to add a file to favorites as to make it easy to find, or click the filled star to remove the file from favorites. The added file is just a shortcut so the file itself remains stored in its original location. Deleting a file from favorites does not remove the file from its original location;</p>
-                    <p><img alt="View Settings" src="../images/viewsettingsicon.png" /> <b>View settings</b> allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and access the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> of the editor;</p>
-                    <p><img alt="User" src="../images/usericon.png" /> <b>User</b>  displays the user’s name when you hover the mouse over it.</p>
+                    <p><div class = "icon icon-print"></div> <b>Print</b> allows to print out the file;</p>
+                    <p><div class = "icon icon-downloadicon"></div> <b>Download</b> allows to download a file to your computer;</p>
+                    <p><div class = "icon icon-access_rights"></div><b> Manage document access rights</b> (available in the <em>online version</em> only) allows you to manage the users who have access to the file right from the document: invite new users giving them permissions to edit, read, comment, fill forms or review the document, or deny some users access rights to the file.</p>
+                    <p><div class = "icon icon-gotodocuments"></div> <b>Open file location</b> in the <em>desktop version</em> allows opening the folder, where the file is stored, in the <b>File explorer</b> window. In the <em>online version</em>, it allows opening the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab;</p>
+                    <p><div class = "icon icon-favorites_icon"></div> <b>Mark as favorite / Remove from favorites</b> (available in the <em>online version</em> only) click the empty star to add a file to favorites as to make it easy to find, or click the filled star to remove the file from favorites. The added file is just a shortcut so the file itself remains stored in its original location. Deleting a file from favorites does not remove the file from its original location;</p>
+                    <p><div class = "icon icon-viewsettingsicon"></div> <b>View settings</b> allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and access the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> of the editor;</p>
+                    <p><div class = "icon icon-usericon"></div> <b>User</b>  displays the user’s name when you hover the mouse over it.</p>
                 </li>
                 <li>The <b>Status bar</b> located at the bottom of the <b>ONLYOFFICE Document Viewer</b> window indicates the page number and displays the background status notifications. It also contains the following tools:
-                    <p><img alt="Selection tool" src="../images/selectiontool.png" /> <b>Selection</b> tool allows to select text in a file.</p>
-                    <p><img alt="Handtool" src="../images/handtool.png" /> <b>Hand</b> tool allows to drag and scroll the page.</p>
-                    <p><img alt="Fit to page" src="../images/fitpage.png" /> <b>Fit to page</b> allows to resize the page so that the screen displays the whole page.</p>
-                    <p><img alt="Fit to width" src="../images/fitwidth.png" /> <b>Fit to width</b> allows to resize the page so that the page scales to fit the width of the screen.</p>
+                    <p><div class = "icon icon-selectiontool"></div> <b>Selection</b> tool allows to select text in a file.</p>
+                    <p><div class = "icon icon-handtool"></div> <b>Hand</b> tool allows to drag and scroll the page.</p>
+                    <p><div class = "icon icon-fitpage"></div> <b>Fit to page</b> allows to resize the page so that the screen displays the whole page.</p>
+                    <p><div class = "icon icon-fitwidth"></div> <b>Fit to width</b> allows to resize the page so that the page scales to fit the width of the screen.</p>
                     <p><img alt="Zoom" src="../images/zoomadjusting.png" /> <a href="../HelpfulHints/Navigation.htm#navigationtools" onclick="onhyperlinkclick(this)"><b>Zoom</b></a> adjusting tool allows to zoom in and zoom out the page.</p>
                 </li>
                 <li>
                     The <b>Left sidebar</b> contains the following icons:
                     <ul>
-                        <li><img alt="Search icon" src="../images/searchicon.png" /> - allows to use the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Chat icon" src="../images/chaticon.png" /> - (available in the <em>online version</em> only) allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
+                        <li><div class = "icon icon-searchicon"></div> - allows to use the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-chaticon"></div> - (available in the <em>online version</em> only) allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
                         <li>
-                            <img alt="Navigation icon" src="../images/navigationicon.png" /> - allows to open the <b>Navigation</b> panel that displays the list of all headings with corresponding nesting levels. Click the heading to jump directly to a specific page.
+                            <div class = "icon icon-navigationicon"></div> - allows to open the <b>Navigation</b> panel that displays the list of all headings with corresponding nesting levels. Click the heading to jump directly to a specific page.
                             <p><img alt="NavigationPanel" src="../images/navigationpanel_viewer.png" />
                             <p>Right-click the heading on the list and use one of the available options from the menu:</p>
                             <ul>
@@ -83,19 +84,19 @@
                                 <li><b>Expand to level</b> - to expand the heading structure to the selected level. E.g. if you select <em>level 3</em>, then levels 1, 2 and 3 will be expanded, while level 4 and all lower levels will be collapsed.</li>
                             </ul>
                             <p>To manually expand or collapse separate heading levels, use the arrows to the left of the headings.</p>
-                            <p>To close the <b>Navigation</b> panel, click the <img alt="Navigation icon" src="../images/navigationicon.png" /> <b>Navigation</b> icon on the left sidebar once again.</p>
+                            <p>To close the <b>Navigation</b> panel, click the <div class = "icon icon-navigationicon"></div> <b>Navigation</b> icon on the left sidebar once again.</p>
                         </li>
                         <li>
-                            <img alt="Page thumbnails" src="../images/pagethumbnails.png" /> - allows to display page thumbnails for quick navigation. Click <img alt="Thumbnail settings" src="../images/search_options.png" /> on the <b>Page Thumbnails</b> panel to access the <b>Thumbnails Settings</b>:
+                            <div class = "icon icon-pagethumbnails"></div> - allows to display page thumbnails for quick navigation. Click <div class = "icon icon-search_options"></div> on the <b>Page Thumbnails</b> panel to access the <b>Thumbnails Settings</b>:
                             <p><img alt="Page thumbnails settings" src="../images/pagethumbnails_settings.png" /></p>
                             <ul>
                                 <li>Drag the slider to set the thumbnail size,</li>
                                 <li>The <b>Highlight visible part of page</b> is active by default to indicate the area that is currently on screen. Click it to disable.</li>
                             </ul>
-                            <p>To close the <b>Page Thumbnails panel</b>, click the <img alt="Page thumbnails" src="../images/pagethumbnails.png" /> <b>Page Thumbnails</b> icon on the left sidebar once again.</p>
+                            <p>To close the <b>Page Thumbnails panel</b>, click the <div class = "icon icon-pagethumbnails"></div> <b>Page Thumbnails</b> icon on the left sidebar once again.</p>
                         </li>
-                        <li><img alt="Feedback and Support icon" src="../images/feedbackicon.png" /> - allows to contact our support team,</li>
-                        <li class="onlineDocumentFeatures"><img alt="About icon" src="../images/abouticon.png" /> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
+                        <li><div class = "icon icon-feedbackicon"></div> - allows to contact our support team,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-abouticon"></div> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
                     </ul>
                 </li>
             </ol>            

apps/documenteditor/main/resources/help/en/ProgramInterface/ViewTab.htm

@@ -4,6 +4,7 @@
 		<title>View tab</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Document Editor user interface - View tab" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/en/UsageInstructions/CopyPasteUndoRedo.htm

@@ -33,7 +33,7 @@
             <p class="note"><b>Note</b>: instead of cutting and pasting text fragments in the same document, you can just select the required text passage and drag and drop it to the necessary position.</p>
             <h3>Use the Paste Special feature</h3>
             <p class="note"><b>Note</b>: For collaborative editing, the <b>Paste Special</b> feature is available in the <b>Strict</b> co-editing mode only.</p>
-            <p>Once the copied text is pasted, the <b>Paste Special</b> <img alt="Paste Special" src="../images/pastespecialbutton.png" /> button appears next to the inserted text passage. Click this button to select the necessary paste option. </p>
+            <p>Once the copied text is pasted, the <b>Paste Special</b> <div class = "icon icon-pastespecialbutton"></div> button appears next to the inserted text passage. Click this button to select the necessary paste option. </p>
             <p>When pasting a text paragraph or some text within autoshapes, the following options are available:</p>
             <ul>
                 <li><em>Paste</em> - allows pasting the copied text keeping its original formatting.</li>

apps/documenteditor/main/resources/help/en/UsageInstructions/Drawio.htm

@@ -4,6 +4,7 @@
     <title>Create and insert diagrams</title>
     <meta charset="utf-8" />
     <meta name="description" content="If you need to create a lot of various and complex diagrams, ONLYOFFICE Document Editor provides you with a draw.io plugin that can create and configure such diagrams" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -17,7 +18,7 @@
         <p>If you need to create a lot of various and complex diagrams, ONLYOFFICE <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> provides you with a draw.io plugin that can create and configure such diagrams.</p>
         <ol>
             <li>Select the place on the page where you want to insert a diagram.</li>
-            <li>Switch to the <b>Plugins</b> tab and click <img alt="Draw io plugin icon" src="../images/drawio.png" /> <b>draw.io</b>.</li>
+            <li>Switch to the <b>Plugins</b> tab and click <div class = "icon icon-drawio"></div> <b>draw.io</b>.</li>
             <li>
                 <b>draw io</b> window will open containing the following sections:
                 <ul>

apps/documenteditor/main/resources/help/en/UsageInstructions/FillingOutForm.htm

@@ -22,11 +22,11 @@
                     Open an OFORM file.
                     <p><img alt="oform" src="../images/oform.png" /><p>
                 </li>
-                <li>Fill in all the required fields. The mandatory fields are marked with red stroke. Use <img alt="Arrows form filling" src="../images/arrows_formfilling.png" /> or <img alt="Next form filling" src="../images/next_formfilling.png" /> on the top toolbar to navigate between fields, or click the field you wish to fill in.
+                <li>Fill in all the required fields. The mandatory fields are marked with red stroke. Use <div class = "icon icon-arrows_formfilling"></div> or <img alt="Next form filling" src="../images/next_formfilling.png" /> on the top toolbar to navigate between fields, or click the field you wish to fill in.
                 <li>Use the <b>Clear All Fields</b> button <img alt="Clear all form filling" src="../images/clearall_formfilling.png" /> to empty all input fields.</li>
                 <li>After you have filled in all the fields, click the <b>Safe as PDF</b> button to save the form to your computer as a PDF file.</li>
                 <li>
-                    Click <img alt="More button" src="../images/morebutton.png" /> in the top right corner of the toolbar for additional options. You can <b>Print</b>, <b>Download as docx</b>, or <b>Download as pdf</b>.
+                    Click <div class = "icon icon-morebutton"></div> in the top right corner of the toolbar for additional options. You can <b>Print</b>, <b>Download as docx</b>, or <b>Download as pdf</b>.
                     <p><img alt="More OFORM" src="../images/more_oform.png" /></p>
                     <p>You can also change the form <b>Interface</b> theme by choosing <b>Light</b>, <b>Classic Light</b> or <b>Dark</b>. Once the <b>Dark interface theme</b> is enabled, the <b>Dark mode</b> becomes available</p>
                     <p><img alt="Dark Mode Form" src="../images/darkmode_oform.png" /></p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm

@@ -19,7 +19,7 @@
 			<p>To add an autoshape in the <a href="https://www.onlyoffice.com/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a>,</p>
 			<ol>
 				<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-				<li>click the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the top toolbar,</li>
+				<li>click the <div class = "icon icon-insertautoshape"></div> <b>Shape</b> icon on the top toolbar,</li>
 				<li>select one of the available autoshape groups from the <b>Shape Gallery</b>: <em>Recently Used</em>, <em>Basic Shapes</em>, <em>Figured Arrows</em>, <em>Math</em>, <em>Charts</em>, <em>Stars & Ribbons</em>, <em>Callouts</em>, <em>Buttons</em>, <em>Rectangles</em>, <em>Lines</em>,</li>
 				<li>click the necessary autoshape within the selected group,</li>
 				<li>place the mouse cursor where the shape should be added,</li>
@@ -65,7 +65,7 @@
 				</li>
 				<li><b>Arrange</b> is used to bring the selected autoshape to foreground, send it to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once. To learn more on how to arrange objects, please refer to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">this page</a>.</li>
 				<li><b>Align</b> is used to align the shape to the left, in the center, to the right, at the top, in the middle, at the bottom. To learn more on how to align objects, please refer to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">this page</a>.</li>
-				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <div class = "big big-wrap_boundary"></div></li>
 				<li><b>Rotate</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically.</li>
 				<li><b>Shape Advanced Settings</b> is used to open the 'Shape - Advanced Settings' window.</li>
 			</ul>

apps/documenteditor/main/resources/help/en/UsageInstructions/Jitsi.htm

@@ -4,6 +4,7 @@
     <title>Make Audio and Video Calls</title>
     <meta charset="utf-8" />
     <meta name="description" content="The description of Jitsi plugin for ONLYOFFICE editors, which makes audio and video calls accessible immediately from the Document Editor." />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -31,7 +32,7 @@
         <img class="gif" alt="Youtube plugin gif" src="../images/jitsi_plugin.gif" width="600" />
         <p>The <b>Jitsi Meet iframe</b> interface elements before launching a meeting:</p>
         <p>
-            <img alt="Jitsi Micro" src="../images/jitsi_micro.png" />
+            <div class = "icon icon-jitsi_micro"></div>
             <b>Audio settings and Mute/Unmute</b>
         </p>
         <ul>
@@ -39,7 +40,7 @@
             <li>Click the micro to mute/unmute your microphone.</li>
         </ul>
         <p>
-            <img alt="Jitsi Camera" src="../images/jitsi_camera.png" />
+            <div class = "icon icon-jitsi_camera"></div>
             <b>Video settings and Start/Stop</b>
         </p>
         <ul>
@@ -47,7 +48,7 @@
             <li>Click the camera to start/stop your video.</li>
         </ul>
         <p>
-            <img alt="Jitsi Invite" src="../images/jitsi_invite.png" />
+            <div class = "icon icon-jitsi_invite"></div>
             <b>Invite people</b>
         </p>
         <ul>
@@ -60,7 +61,7 @@
             <li>Use one of the available dial-in numbers to join the meeting.</li>
         </ul>
         <p>
-            <img alt="Jitsi Background" src="../images/jitsi_background.png" />
+            <div class = "icon icon-jitsi_background"></div>
             <b>Select background</b>
         </p>
         <ul>
@@ -68,7 +69,7 @@
             <li>Share your desktop by choosing the appropriate option: <b>Screen</b>,<b> Window</b> or <b>Tab</b>.</li>
         </ul>
         <p>
-            <img alt="Jitsi Background" src="../images/jitsi_background.png" />
+            <div class = "icon icon-jitsi_background"></div>
             <b>Select background</b>
         </p>
         <ul>
@@ -76,7 +77,7 @@
             <li>Share your desktop by choosing the appropriate option: <b>Screen</b>,<b> Window</b> or <b>Tab</b>.</li>
         </ul>
         <p>
-            <img alt="Jitsi Background" src="../images/jitsi_background.png" />
+            <div class = "icon icon-jitsi_background"></div>
             <b>Settings</b>
         </p>
         <p>Configure advanced settings that are organized in the following categories:</p>
@@ -97,21 +98,21 @@
             The timer at the iframe top shows the meeting duration.
         </p>
         <p>
-            <img alt="Jitsi Open Chat" src="../images/jitsi_openchat.png" />
+            <div class = "icon icon-jitsi_openchat"></div>
             <b>Open chat</b>
         </p>
         <ul>
             <li>Type a text message or create a poll.</li>
         </ul>
         <p>
-            <img alt="Jitsi Participants" src="../images/jitsi_participants.png" />
+            <div class = "icon icon-jitsi_participants"></div>
             <b>Participants</b>
         </p>
         <ul>
             <li>View the list of the meeting participants, invite more participants and search a participant.</li>
         </ul>
         <p>
-            <img alt="Jitsi More Actions" src="../images/jitsi_more.png" />
+            <div class = "icon icon-jitsi_more"></div>
             <b>More Actions</b>
         </p>
         <ul>
@@ -147,7 +148,7 @@
             </ul>
         </details>
         <p>
-            <img alt="Jitsi Leave" src="../images/jitsi_leave.png" />
+            <div class = "icon icon-jitsi_leave"></div>
             <b>Leave the meeting</b>
         </p>
         <ul>

apps/documenteditor/main/resources/help/en/UsageInstructions/SupportSmartArt.htm

@@ -4,6 +4,7 @@
         <title>Support of SmartArt in ONLYOFFICE Document Editor</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Edit SmartArt graphics that were added using third-party editors"/>
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/fr/HelpfulHints/AdvancedSettings.htm

@@ -21,8 +21,8 @@
             <li>
                 Affichage des commentaires sert à activer/désactiver les commentaires en temps réel.
                 <ul>
-                    <li><b>Activer l'affichage des commentaires</b> - si cette option est désactivée, les passages commentés seront mis en surbrillance uniquement si vous cliquez sur l'icône <img alt="L'icône Commentaires" src="../images/commentsicon.png" /> de la barre latérale gauche.</li>
-                    <li><b>Activer l'affichage des commentaires résolus</b> - cette fonction est désactivée par défaut pour que les commentaires résolus soient cachés dans le texte du document. Vous ne pourrez voir ces commentaires que si vous cliquez sur l'icône <b>Commentaires</b> <img alt="L'icône Commentaires" src="../images/commentsicon.png" /> dans la barre latérale de gauche. Activez cette option si vous voulez afficher les commentaires résolus dans le texte du document.</li>
+                    <li><b>Activer l'affichage des commentaires</b> - si cette option est désactivée, les passages commentés seront mis en surbrillance uniquement si vous cliquez sur l'icône <div class = "icon icon-commentsicon"></div> de la barre latérale gauche.</li>
+                    <li><b>Activer l'affichage des commentaires résolus</b> - cette fonction est désactivée par défaut pour que les commentaires résolus soient cachés dans le texte du document. Vous ne pourrez voir ces commentaires que si vous cliquez sur l'icône <b>Commentaires</b> <div class = "icon icon-commentsicon"></div> dans la barre latérale de gauche. Activez cette option si vous voulez afficher les commentaires résolus dans le texte du document.</li>
                 </ul>
             </li>
             <li>

apps/documenteditor/main/resources/help/fr/HelpfulHints/CollaborativeEditing.htm

@@ -32,18 +32,18 @@
             <p><b>Document Editor</b> permet de sélectionner l'un des deux modes de co-édition disponibles:</p>
             <ul>
                 <li><b>Rapide</b> est utilisé par défaut et affiche les modifications effectuées par d'autres utilisateurs en temps réel.</li>
-                <li><b>Strict</b> est sélectionné pour masquer les modifications des autres utilisateurs jusqu'à ce que vous cliquiez sur l'icône <b>Enregistrer</b> <img alt="L'icône Enregistrer" src="../images/saveupdate.png" /> .</li>
+                <li><b>Strict</b> est sélectionné pour masquer les modifications des autres utilisateurs jusqu'à ce que vous cliquiez sur l'icône <b>Enregistrer</b> <div class = "icon icon-saveupdate"></div> .</li>
             </ul>
-            <p>Le mode peut être sélectionné dans les <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Paramètres avancés</a>. Il est également possible de choisir le mode voulu à l'aide de l'icône <b>Mode de coédition</b> <img alt="L'icône Mode de co-édition" src="../images/coeditingmode.png" /> dans l'onglet <b>Collaboration</b> de la barre d'outils supérieure:</p>
+            <p>Le mode peut être sélectionné dans les <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Paramètres avancés</a>. Il est également possible de choisir le mode voulu à l'aide de l'icône <b>Mode de coédition</b> <div class = "icon icon-coeditingmode"></div> dans l'onglet <b>Collaboration</b> de la barre d'outils supérieure:</p>
             <p><img alt="Menu Mode de co-édition" src="../images/coeditingmodemenu.png" /></p>
             <p class="note">
                 <b>Remarque</b>: lorsque vous co-éditez un document en mode <b>Rapide</b>, la possibilité de <b>Rétablir</b> la dernière opération annulée n'est pas disponible.
             </p>
             <p>Lorsqu'un document est en cours de modification par plusieurs utilisateurs simultanément dans le mode <b>Strict</b>, les passages de texte modifiés sont marqués avec des lignes pointillées de couleurs différentes. Pour voir qui est en train d'éditer le fichier au présent, placez le curseur de la souris sur cette icône - les noms des utilisateurs seront affichés dans la fenêtre contextuelle. Le mode <b>Rapide</b> affichera les actions et les noms des co-éditeurs tandis qu'ils modifient le texte.</p>
-            <p>Le nombre d'utilisateurs qui travaillent sur le document actuel est spécifié sur le côté droit de l'en-tête de l'éditeur -  <img alt="L'icône Nombre d'utilisateurs" src="../images/usersnumber.png" />. Pour afficher les personnes qui travaillent sur le fichier, cliquez sur cette icône pour ouvrir le panneau <b>Chat</b> avec la liste complète affichée.</p>
-            <p>Quand aucun utilisateur ne consulte ou ne modifie le fichier, l'icône dans l'en-tête de l'éditeur aura cette apparence <img alt="L'icône Gérer les droits d'accès au document" src="../images/access_rights.png" /> vous permettant de gérer les utilisateurs qui ont accès au fichier directement à partir du document : inviter de nouveaux utilisateurs leur donnant les permissions de <em>modifier</em>, <em>lire</em>, <em>commenter</em>, <em>remplir des formulaires</em> ou <em>réviser</em> le document, ou refuser à certains utilisateurs des droits d'accès au fichier. Cliquez sur cette icône pour gérer l'accès au fichier; cela peut être fait aussi bien lorsqu'il n'y a pas d'autres utilisateurs qui voient ou co-éditent le document pour le moment que quand il y a d'autres utilisateurs. L'icône ressemble à ceci <img alt="L'icône Nombre d'utilisateurs" src="../images/usersnumber.png" />. Il est également possible de choisir le mode voulu à l'aide de l'icône <b>Mode de coédition</b> <img alt="L'icône Partage" src="../images/sharingicon.png" /> dans l'onglet <b>Collaboration</b> de la barre d'outils supérieure.</p>
-            <p>Dès que l'un des utilisateurs enregistre ses modifications en cliquant sur l'icône    <img alt="L'icône Enregistrer" src="../images/savewhilecoediting.png" />, les autres verront une note dans la barre d'état indiquant qu'il y a des mises à jour. Pour enregistrer les changements effectués et récupérer les mises à jour de vos co-éditeurs cliquez sur l'icône <img alt="L'icône Enregistrer" src="../images/saveupdate.png" /> dans le coin supérieur gauche de la barre supérieure. Les mises à jour seront marquées pour vous aider à contrôler ce qui a été exactement modifié.</p>
-            <p>Vous pouvez spécifier les modifications que vous souhaitez mettre en surbrillance pendant la co-édition si vous cliquez sur l'onglet <b>Fichier</b> dans la barre d'outils supérieure, sélectionnez l'option <b>Paramètres avancés...</b> et choisissez entre <b>aucune</b>, <b>toutes</b> et <b>récentes</b> modifications de collaboration en temps réel. Quand l'option <b>Afficher toutes les modifications</b> est sélectionnée, toutes les modifications effectuées au cours de la session seront mises en surbrillance. En sélectionnant <b>Afficher les modifications récentes</b>, seules les modifications effectuées depuis la dernière fois que vous avez cliqué sur l'icône <img alt="L'icône Enregistrer" src="../images/saveupdate.png" /> seront mises en surbrillance. En sélectionnant <b>N'afficher aucune modification</b>, aucune des modifications effectuées au cours de la session ne sera mise en surbrillance.</p>
+            <p>Le nombre d'utilisateurs qui travaillent sur le document actuel est spécifié sur le côté droit de l'en-tête de l'éditeur -  <div class = "icon icon-usersnumber"></div>. Pour afficher les personnes qui travaillent sur le fichier, cliquez sur cette icône pour ouvrir le panneau <b>Chat</b> avec la liste complète affichée.</p>
+            <p>Quand aucun utilisateur ne consulte ou ne modifie le fichier, l'icône dans l'en-tête de l'éditeur aura cette apparence <div class = "icon icon-access_rights"></div> vous permettant de gérer les utilisateurs qui ont accès au fichier directement à partir du document : inviter de nouveaux utilisateurs leur donnant les permissions de <em>modifier</em>, <em>lire</em>, <em>commenter</em>, <em>remplir des formulaires</em> ou <em>réviser</em> le document, ou refuser à certains utilisateurs des droits d'accès au fichier. Cliquez sur cette icône pour gérer l'accès au fichier; cela peut être fait aussi bien lorsqu'il n'y a pas d'autres utilisateurs qui voient ou co-éditent le document pour le moment que quand il y a d'autres utilisateurs. L'icône ressemble à ceci <div class = "icon icon-usersnumber"></div>. Il est également possible de choisir le mode voulu à l'aide de l'icône <b>Mode de coédition</b> <div class = "icon icon-sharingicon"></div> dans l'onglet <b>Collaboration</b> de la barre d'outils supérieure.</p>
+            <p>Dès que l'un des utilisateurs enregistre ses modifications en cliquant sur l'icône    <div class = "icon icon-savewhilecoediting"></div>, les autres verront une note dans la barre d'état indiquant qu'il y a des mises à jour. Pour enregistrer les changements effectués et récupérer les mises à jour de vos co-éditeurs cliquez sur l'icône <div class = "icon icon-saveupdate"></div> dans le coin supérieur gauche de la barre supérieure. Les mises à jour seront marquées pour vous aider à contrôler ce qui a été exactement modifié.</p>
+            <p>Vous pouvez spécifier les modifications que vous souhaitez mettre en surbrillance pendant la co-édition si vous cliquez sur l'onglet <b>Fichier</b> dans la barre d'outils supérieure, sélectionnez l'option <b>Paramètres avancés...</b> et choisissez entre <b>aucune</b>, <b>toutes</b> et <b>récentes</b> modifications de collaboration en temps réel. Quand l'option <b>Afficher toutes les modifications</b> est sélectionnée, toutes les modifications effectuées au cours de la session seront mises en surbrillance. En sélectionnant <b>Afficher les modifications récentes</b>, seules les modifications effectuées depuis la dernière fois que vous avez cliqué sur l'icône <div class = "icon icon-saveupdate"></div> seront mises en surbrillance. En sélectionnant <b>N'afficher aucune modification</b>, aucune des modifications effectuées au cours de la session ne sera mise en surbrillance.</p>
             <h3>Utilisateurs anonymes</h3>
             <p>Les utilisateurs du portail qui ne sont pas enregistrés et n'ont pas de profil sont les utilisateurs anonymes qui quand même peuvent collaborer sur les documents. Pour affecter un nom à un utilisateur anonyme, ce dernier doit saisir le nom préféré dans le coin supérieur droit de l'écran lorsque l'on accède au document pour la première fois. Activez l'option Ne plus poser cette question pour enregistrer ce nom-ci.</p>
             <p><img alt="Collaboration anonyme" src="../images/anonymous_collab.png" /></p>
@@ -78,7 +78,7 @@
         <p>Vous pouvez gérer les commentaires ajoutés en utilisant les icônes de la bulle de commentaire ou sur le panneau gauche <b>Commentaires</b>:</p>
         <ul>
             <li>
-                trier les commentaires ajoutés en cliquant sur l'icône <img alt="L'icône de tri" src="../images/sortcommentsicon.png" /> :
+                trier les commentaires ajoutés en cliquant sur l'icône <div class = "icon icon-sortcommentsicon"></div> :
                 <ul>
                     <li>par date: <b>Plus récent</b> ou <b>Plus ancien</b>. C'est 'ordre de tri par défaut.</li>
                     <li>par auteur: <b>Auteur de A à Z</b> ou <b>Auteur de Z à A</b></li>
@@ -88,9 +88,9 @@
                     </li>
                 </ul>
             </li>
-            <li>modifier le commentaire sélectionné en appuyant sur l'icône <img alt="L'icône Modifier" src="../images/editcommenticon.png" /> ,</li>
-            <li>supprimer le commentaire sélectionné en appuyant sur l'icône <img alt="L'icône Supprimer" src="../images/deletecommenticon.png" /> ,</li>
-            <li>fermez la discussion actuelle en cliquant sur l'icône <img alt="L'icône Résoudre" src="../images/resolveicon.png" /> si la tâche ou le problème décrit dans votre commentaire est résolu, après quoi la discussion ouverte par votre commentaire reçoit le statut résolu. Pour l'ouvrir à nouveau, cliquez sur l'icône <img alt="L'icône Ouvrir à nouveau" src="../images/resolvedicon.png" /> . Si vous souhaitez masquer les commentaires résolus, cliquez sur l'onglet <b>Fichier</b> dans la barre d'outils supérieure, sélectionnez l'option <b>Paramètres avancés...</b>, décochez la case <b>Activer l'affichage des commentaires résolus</b> puis cliquez sur <b>Appliquer</b>. Dans ce cas, les commentaires résolus ne seront ne seront mis en évidence que si vous cliquez sur l'icône <img alt="L'icône Commentaires" src="../images/commentsicon.png" />.</li>
+            <li>modifier le commentaire sélectionné en appuyant sur l'icône <div class = "icon icon-editcommenticon"></div> ,</li>
+            <li>supprimer le commentaire sélectionné en appuyant sur l'icône <div class = "icon icon-deletecommenticon"></div> ,</li>
+            <li>fermez la discussion actuelle en cliquant sur l'icône <div class = "icon icon-resolveicon"></div> si la tâche ou le problème décrit dans votre commentaire est résolu, après quoi la discussion ouverte par votre commentaire reçoit le statut résolu. Pour l'ouvrir à nouveau, cliquez sur l'icône <div class = "icon icon-resolvedicon"></div> . Si vous souhaitez masquer les commentaires résolus, cliquez sur l'onglet <b>Fichier</b> dans la barre d'outils supérieure, sélectionnez l'option <b>Paramètres avancés...</b>, décochez la case <b>Activer l'affichage des commentaires résolus</b> puis cliquez sur <b>Appliquer</b>. Dans ce cas, les commentaires résolus ne seront ne seront mis en évidence que si vous cliquez sur l'icône <div class = "icon icon-commentsicon"></div>.</li>
             <li>si vous souhaitez gérer plusieurs commentaires à la fois, ouvrez le menu contextuel <b>Résoudre</b> sous l'onglet <b>Collaboration</b>. Sélectionnez l'une des options disponibles: <b>résoudre les commentaires actuels</b>, <b>marquer mes commentaires comme résolus</b> ou <b>marquer tous les commentaires comme résolus</b> dans le document.</li>
          </ul>
         <h3>Ajouter des mentions</h3>

apps/documenteditor/main/resources/help/fr/HelpfulHints/Navigation.htm

@@ -21,7 +21,7 @@
 			</p>
 			<ul>
 				<li>
-					<b>Masquer la barre d'outils</b> sert à masquer la barre d'outils supérieure contenant les commandes pendant que les onglets restent visibles. Lorsque cette option est activée, vous pouvez cliquer sur n'importe quel onglet pour afficher la barre d'outils. La barre d'outils est affichée jusqu'à ce que vous cliquiez n'importe où à l'extérieur.<br />Pour désactiver ce mode, cliquez sur l'icône <b>Paramètres d'affichage</b> <img alt="L'icône Paramètres d'affichage" src="../images/viewsettingsicon.png" /> et cliquez à nouveau sur l'option <b>Masquer la barre d'outils</b>. La barre d'outils supérieure sera affichée tout le temps.
+					<b>Masquer la barre d'outils</b> sert à masquer la barre d'outils supérieure contenant les commandes pendant que les onglets restent visibles. Lorsque cette option est activée, vous pouvez cliquer sur n'importe quel onglet pour afficher la barre d'outils. La barre d'outils est affichée jusqu'à ce que vous cliquiez n'importe où à l'extérieur.<br />Pour désactiver ce mode, cliquez sur l'icône <b>Paramètres d'affichage</b> <div class = "icon icon-viewsettingsicon"></div> et cliquez à nouveau sur l'option <b>Masquer la barre d'outils</b>. La barre d'outils supérieure sera affichée tout le temps.
 					<p class="note"><b>Remarque</b>: vous pouvez également double-cliquer sur un onglet pour masquer la barre d'outils supérieure ou l'afficher à nouveau.</p>
 				</li>
 				<li><b>Masquer la barre d'état</b> sert à masquer la barre qui se situe tout en bas avec les boutons <b>Affichage des numéros de page</b> et <b>Zoom</b>. Pour afficher la <b>Barre d'état</b> masquée cliquez sur cette option encore une fois.</li>
@@ -39,7 +39,7 @@
             <h3 id="navigationtools">Utiliser les outils de navigation</h3>
 			<p>Pour naviguer à travers votre document, utilisez les outils suivants:</p>
 			<p>
-				Les boutons <b>Zoom</b> sont situés en bas à droite et sont utilisés pour faire un zoom avant et arrière dans le document actif. Pour modifier la valeur de zoom sélectionnée en pourcentage, cliquez dessus et sélectionnez l'une des options de zoom disponibles dans la liste (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%) ou utilisez les boutons <b>Zoom avant</b> <img alt="Bouton Zoom avant" src="../images/zoomin.png" /> ou <b>Zoom arrière</b> <img alt="Bouton Zoom arrière" src="../images/zoomout.png" /> . Cliquez sur l'icône <b>Ajuster à la largeur</b> <img alt="Bouton Ajuster à la largeur" src="../images/fitwidth.png" /> pour adapter la largeur de la page du document à la partie visible de la zone de travail. Pour adapter la page entière du document à la partie visible de la zone de travail, cliquez sur l'icône <b>Ajuster à la page</b> <img alt="Bouton Ajuster à la page" src="../images/fitpage.png" /> . Les paramètres de Zoom sont également disponibles dans la liste déroulante <b>Paramètres d'affichage</b> <img alt="L'icône Paramètres d'affichage" src="../images/viewsettingsicon.png" /> qui peuvent être bien utiles si vous décidez de masquer la <b>Barre d'état</b>.
+				Les boutons <b>Zoom</b> sont situés en bas à droite et sont utilisés pour faire un zoom avant et arrière dans le document actif. Pour modifier la valeur de zoom sélectionnée en pourcentage, cliquez dessus et sélectionnez l'une des options de zoom disponibles dans la liste (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%) ou utilisez les boutons <b>Zoom avant</b> <div class = "icon icon-zoomin"></div> ou <b>Zoom arrière</b> <div class = "icon icon-zoomout"></div> . Cliquez sur l'icône <b>Ajuster à la largeur</b> <div class = "icon icon-fitwidth"></div> pour adapter la largeur de la page du document à la partie visible de la zone de travail. Pour adapter la page entière du document à la partie visible de la zone de travail, cliquez sur l'icône <b>Ajuster à la page</b> <div class = "icon icon-fitpage"></div> . Les paramètres de Zoom sont également disponibles dans la liste déroulante <b>Paramètres d'affichage</b> <div class = "icon icon-viewsettingsicon"></div> qui peuvent être bien utiles si vous décidez de masquer la <b>Barre d'état</b>.
 			</p>
 			<p><b>Indicateur de numéro de page</b> affiche la page active dans l'ensemble des pages du document actif (page 'n' sur 'nn'). Cliquez sur ce libellé pour ouvrir la fenêtre où vous pouvez entrer le numéro de la page et y accéder rapidement.</p>
 		</div>

apps/documenteditor/main/resources/help/fr/HelpfulHints/Password.htm

@@ -24,7 +24,7 @@
 				<li>passez à l'onglet <b>Fichier</b> de la barre d'outils supérieure,</li>
 				<li>choisissez l'option <b>Protéger</b>,</li>
 				<li>cliquez sur le bouton <b>Ajouter un mot de passe</b>.</li>
-				<li>saisissez le mot de passe dans le champ <b>Mot de passe</b> et validez-le dans le champ <b>Confirmez le mot de passe</b> au-dessous, ensuite cliquez sur <b>OK</b>. Cliquez sur <img alt="Show password icon" src="../images/show_password.png" /> pour afficher pi masquer les caractèrs du mot de passe lors de la saisie.</li>
+				<li>saisissez le mot de passe dans le champ <b>Mot de passe</b> et validez-le dans le champ <b>Confirmez le mot de passe</b> au-dessous, ensuite cliquez sur <b>OK</b>. Cliquez sur <div class = "icon icon-show_password"></div> pour afficher pi masquer les caractèrs du mot de passe lors de la saisie.</li>
 			</ul>
 			<p><img alt="Définir un mot de passe" src="../images/setpassword.png" /></p>
 

apps/documenteditor/main/resources/help/fr/HelpfulHints/Review.htm

@@ -21,9 +21,9 @@
         <h3>Activer la fonctionnalité Suivi des modifications</h3>
         <p>Pour voir les modifications suggérées par un réviseur, activez l'option <b>Suivi des modifications</b> de l'une des manières suivantes:</p>
         <ul>
-            <li>cliquez sur le bouton <img alt="le bouton Suivi des modifications" src="../images/trackchangesstatusbar.png" /> dans le coin inférieur droit de la barre d'état, ou</li>
+            <li>cliquez sur le bouton <div class = "icon icon-trackchangesstatusbar"></div> dans le coin inférieur droit de la barre d'état, ou</li>
             <li>
-                passez à l'onglet <b>Collaboration</b> de la barre d'outils supérieure et cliquez sur le bouton  <img alt="Bouton Suivi des modifications" src="../images/trackchangestoptoolbar.png" /> <b>Suivi des modifications</b>.
+                passez à l'onglet <b>Collaboration</b> de la barre d'outils supérieure et cliquez sur le bouton  <div class = "icon icon-trackchangestoptoolbar"></div> <b>Suivi des modifications</b>.
                 <p class="note">Il n'est pas nécessaire que le réviseur active l'option <b>Suivi des modifications</b>. Elle est activée par défaut et ne peut pas être désactivée lorsque le document est partagé avec des droits d'accès de révision uniquement.</p>
             </li>
             <li>
@@ -71,11 +71,11 @@
             <li>cliquer sur la flèche vers le bas au-dessous du bouton <b>Rejeter</b> et sélectionnez l'option <b>Rejeter la modification en cours</b> (dans ce cas, la modification sera rejetée et vous passerez à la modification suivante), ou</li>
             <li>cliquez sur le bouton <b>Rejeter</b> <div class = "icon icon-review_reject"></div> de dans la bulle de la modification.</li>
         </ul>
-        <p>Pour rejeter rapidement toutes les modifications, cliquez sur la flèche vers le bas au-dessous du bouton <b>Rejeter </b> <img alt="bouton Rejeter" src="../images/review_rejecttoptoolbar.png" /> et sélectionnez l'option <b>Rejeter toutes les modifications</b>.</p>
+        <p>Pour rejeter rapidement toutes les modifications, cliquez sur la flèche vers le bas au-dessous du bouton <b>Rejeter </b> <div class = "icon icon-review_rejecttoptoolbar"></div> et sélectionnez l'option <b>Rejeter toutes les modifications</b>.</p>
         <p>Si vous souhaitez accepter ou rejeter une seule modification, faites un clic droit dessus et sélectionnez <b>Accepter la modification</b> ou <b>Rejeter la modification</b> dans le menu contextuel.</p>
         <p><img alt="Accept/Reject dropdowm mwnu" src="../images/acceptreject_dropdown.png" /></p>
 
-        <p class="note">Si vous révisez le document, les options <b>Accepter</b> et <b>Rejeter</b> ne sont pas disponibles pour vous. Vous pouvez supprimer vos modifications en utilisant l'icône <img alt="Bouton Supprimer la modification" src="../images/review_delete.png" /> dans la bulle de modification.</p>
+        <p class="note">Si vous révisez le document, les options <b>Accepter</b> et <b>Rejeter</b> ne sont pas disponibles pour vous. Vous pouvez supprimer vos modifications en utilisant l'icône <div class = "icon icon-review_delete"></div> dans la bulle de modification.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/fr/HelpfulHints/Search.htm

@@ -15,19 +15,19 @@
 				<input id="search" class="searchBar" placeholder="Rechercher" type="text" onkeypress="doSearch(event)">
 			</div>
 			<h1>Fonctions de recherche et remplacement</h1>
-			<p>Pour rechercher des caractères, des mots ou des phrases utilisés dans le document, cliquez sur l'icône <img alt="L'icône Rechercher" src="../images/searchicon.png" /> située sur la barre latérale gauche <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> ou appuyez sur la combinaison de touches Ctrl+F.</p>
+			<p>Pour rechercher des caractères, des mots ou des phrases utilisés dans le document, cliquez sur l'icône <div class = "icon icon-searchicon"></div> située sur la barre latérale gauche <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> ou appuyez sur la combinaison de touches Ctrl+F.</p>
 			<p>La fenêtre <b>Rechercher et remplacer</b> s'affiche.</p>
 			<p><img alt="Fenêtre Rechercher et remplacer" src="../images/search_window.png" /></p>
 			<ol>
 				<li>Saisissez votre enquête dans le champ correspondant.</li>
 				<li>
-					Spécifiez les paramètres de recherche en cliquant sur l'icône <img alt="icône Options de recherche" src="../images/search_options.png" /> et en cochant les options nécessaires :<ul>
+					Spécifiez les paramètres de recherche en cliquant sur l'icône <div class = "icon icon-search_options"></div> et en cochant les options nécessaires :<ul>
 						<li><b>Respecter la casse</b> sert à trouver les occurrences saisies de la même casse (par exemple, si votre enquête est 'Editeur' et cette option est sélectionnée, les mots tels que 'éditeur' ou 'EDITEUR' etc. ne seront pas trouvés). Pour désactiver cette option décochez la case.</li>
 						<li><b>Surligner les résultats</b> sert à surligner toutes les occurrences trouvées à la fois. Pour désactiver cette option et supprimer le surlignage, décochez la case.</li>
 					</ul>
 				</li>
 				<li>
-					Cliquez sur un des <b>boutons à flèche</b> à droite. La recherche sera effectuée soit vers le début du document (si vous cliquez sur le bouton <img alt="Flèche gauche" src="../images/searchupbutton.png" />) ou vers la fin du document (si vous cliquez sur le bouton <img alt="Flèche droite" src="../images/searchdownbutton.png" />) à partir de la position actuelle.<p class="note"><b>Remarque</b>: si l'option <b>Surligner les résultats</b> est activée, utilisez ces boutons pour naviguer à travers les résultats surlignés.</p>
+					Cliquez sur un des <b>boutons à flèche</b> à droite. La recherche sera effectuée soit vers le début du document (si vous cliquez sur le bouton <div class = "icon icon-searchupbutton"></div>) ou vers la fin du document (si vous cliquez sur le bouton <div class = "icon icon-searchdownbutton"></div>) à partir de la position actuelle.<p class="note"><b>Remarque</b>: si l'option <b>Surligner les résultats</b> est activée, utilisez ces boutons pour naviguer à travers les résultats surlignés.</p>
 				</li>
 			</ol>
 			<p>La première occurrence des caractères requis dans la direction choisie sera surlignée sur la page. Si ce n'est pas le mot que vous cherchez, cliquez sur le bouton à flèche encore une fois pour trouver l'occurrence suivante des caractères saisis.</p>

apps/documenteditor/main/resources/help/fr/HelpfulHints/Viewer.htm

@@ -4,6 +4,7 @@
 		<title>Lecteur de documents ONLYOFFICE</title>
 		<meta charset="utf-8" />
         <meta name="description" content="La description des outils de navigation du Lecteur de documents ONLYOFFICE" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -53,28 +54,28 @@
             <ol>
                 <li>
                     La barre d'outils supérieure fournit l'accès à deux onglets <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">Fichier</a> et <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Modules complémentaires</a> et comporte les icônes suivantes:
-                    <p><img alt="Imprimer" src="../images/print.png" /> <b>Imprimer</b> permet d'imprimer le fichier.</p>
-                    <p><img alt="Télécharger" src="../images/downloadicon.png" /> <b>Télécharger</b> permet de sauvegarder le fichier sur votre orrdinateur;</p>
-                    <p><img alt="L'icône Gérer les droits d'accès au document" src="../images/access_rights.png" /> <b>Gérer les droits d'accès au document</b> (disponible <em>uniquement dans la version en ligne</em>) permet de définir les droits d'accès au fichier directement à partir du document : inviter de nouveaux utilisateurs leur donnant les permissions de <em>modifier</em>, <em>lire</em>, <em>commenter</em>, <em>remplir des formulaires</em> ou <em>réviser</em> le document, ou refuser à certains utilisateurs des droits d'accès au fichier.</p>
-                    <p><img alt="Ouvrir l'emplacement du fichier" src="../images/gotodocuments.png" /> <b>Ouvrir l'emplacement du fichier</b> dans la <em>version de bureau</em>, sert à ouvrir le dossier où le fichier est stocké dans la fenêtre <b>Explorateur de fichiers</b>. Dans la <em>version en ligne</em>, elle permet d'ouvrir le dossier du module <b>Documents</b> où le fichier est stocké dans un nouvel onglet du navigateur.</p>
-                    <p><img alt="Favoris" src="../images/favorites_icon.png" /> <b>Marquer en tant que favori / Enlever des favoris</b>  (disponible <em>uniquement dans la version en ligne</em>) cliquez sur l'étoile vide pour ajouter le fichier aux favoris et le retrouver rapidement ou cliquez sur l'étoile remplie pour effacer le fichier des favoris. Ce n'est qu'un fichier de raccourcis car le fichier lui-même est dans l'emplacement de stockage d'origine. Le fichier réel n'est pas supprimé quand vous le supprimez des favoris.</p>
-                    <p><img alt="Paramètres d'affichage" src="../images/viewsettingsicon.png" /> <b>Paramètres d'affichage</b> permet de configurer les  <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Paramètres d'affichage</a> et d'accéder aux <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Paramètres avancés</a> de l'éditeur;</p>
-                    <p><img alt="Utilisateur" src="../images/usericon.png" /> <b>Utilisateur</b> affiche le nom d'utilisateur lorsque vous placer le curseur de votre souris sur l'icône.</p>
+                    <p><div class = "icon icon-print"></div> <b>Imprimer</b> permet d'imprimer le fichier.</p>
+                    <p><div class = "icon icon-downloadicon"></div> <b>Télécharger</b> permet de sauvegarder le fichier sur votre orrdinateur;</p>
+                    <p><div class = "icon icon-access_rights"></div> <b>Gérer les droits d'accès au document</b> (disponible <em>uniquement dans la version en ligne</em>) permet de définir les droits d'accès au fichier directement à partir du document : inviter de nouveaux utilisateurs leur donnant les permissions de <em>modifier</em>, <em>lire</em>, <em>commenter</em>, <em>remplir des formulaires</em> ou <em>réviser</em> le document, ou refuser à certains utilisateurs des droits d'accès au fichier.</p>
+                    <p><div class = "icon icon-gotodocuments"></div> <b>Ouvrir l'emplacement du fichier</b> dans la <em>version de bureau</em>, sert à ouvrir le dossier où le fichier est stocké dans la fenêtre <b>Explorateur de fichiers</b>. Dans la <em>version en ligne</em>, elle permet d'ouvrir le dossier du module <b>Documents</b> où le fichier est stocké dans un nouvel onglet du navigateur.</p>
+                    <p><div class = "icon icon-favorites_icon"></div> <b>Marquer en tant que favori / Enlever des favoris</b>  (disponible <em>uniquement dans la version en ligne</em>) cliquez sur l'étoile vide pour ajouter le fichier aux favoris et le retrouver rapidement ou cliquez sur l'étoile remplie pour effacer le fichier des favoris. Ce n'est qu'un fichier de raccourcis car le fichier lui-même est dans l'emplacement de stockage d'origine. Le fichier réel n'est pas supprimé quand vous le supprimez des favoris.</p>
+                    <p><div class = "icon icon-viewsettingsicon"></div> <b>Paramètres d'affichage</b> permet de configurer les  <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Paramètres d'affichage</a> et d'accéder aux <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Paramètres avancés</a> de l'éditeur;</p>
+                    <p><div class = "icon icon-usericon"></div> <b>Utilisateur</b> affiche le nom d'utilisateur lorsque vous placer le curseur de votre souris sur l'icône.</p>
                 </li>
                 <li>La <b>Barre d'état</b> au bas de la fenêtre du <b>Lecteur de documents ONLYOFFICE</b> contient l'indicateur du numéro de page et affiche certaines notifications des processus d'arrière plan. La barre d'état comporte aussi les outils suivants:
-                    <p><img alt="Outil de sélection" src="../images/selectiontool.png" /> <b>Outil de sélection</b> sert à sélectionner du texte dans un fichier.</p>
-                    <p><img alt="Outil Main" src="../images/handtool.png" /> <b>Outil Main</b> sert à faire glisser et défiler la page.</p>
-                    <p><img alt="Ajuster à la page" src="../images/fitpage.png" /> <b>Ajuster à la page</b> sert à redimensionner la page pour afficher une page entière sur l'écran.</p>
-                    <p><img alt="Ajuster à la largeur" src="../images/fitwidth.png" /> <b>Ajuster à la largeur</b> sert à redimensionner la page pour l'adapter à la largeur de l'écran.</p>
+                    <p><div class = "icon icon-selectiontool"></div> <b>Outil de sélection</b> sert à sélectionner du texte dans un fichier.</p>
+                    <p><div class = "icon icon-handtool"></div> <b>Outil Main</b> sert à faire glisser et défiler la page.</p>
+                    <p><div class = "icon icon-fitpage"></div> <b>Ajuster à la page</b> sert à redimensionner la page pour afficher une page entière sur l'écran.</p>
+                    <p><div class = "icon icon-fitwidth"></div> <b>Ajuster à la largeur</b> sert à redimensionner la page pour l'adapter à la largeur de l'écran.</p>
                     <p><img alt="Zoom" src="../images/zoomadjusting.png" /> <a href="../HelpfulHints/Navigation.htm#navigationtools" onclick="onhyperlinkclick(this)"><b>Outil zoom</b></a> sert à zoomer et dézoomer sur une page.</p>
                 </li>
                 <li>
                     La <b>barre latérale gauche</b> comporte les icônes suivantes:
                     <ul>
-                        <li><img alt="L'icône Rechercher" src="../images/searchicon.png" /> - permet d'utiliser l'outil <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Rechercher et remplacer</a> ,</li>
-                        <li class="onlineDocumentFeatures"><img alt="L'icône Chat" src="../images/chaticon.png" /> - (disponible dans la <em>version en ligne</em> seulement) permet d'ouvrir le panneau de <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a> ,</li>
+                        <li><div class = "icon icon-searchicon"></div> - permet d'utiliser l'outil <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Rechercher et remplacer</a> ,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-chaticon"></div> - (disponible dans la <em>version en ligne</em> seulement) permet d'ouvrir le panneau de <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Chat</a> ,</li>
                         <li>
-                            <img alt="Icône Navigation" src="../images/navigationicon.png" /> - permet d'ouvrir le panneau de <b>Navigation</b> pour parcourir la liste hiérarchique des titres avec des éléments de navigation imbriqués. Cliquez sur le titre pour passer directement sur la page nécessaire.
+                            <div class = "icon icon-navigationicon"></div> - permet d'ouvrir le panneau de <b>Navigation</b> pour parcourir la liste hiérarchique des titres avec des éléments de navigation imbriqués. Cliquez sur le titre pour passer directement sur la page nécessaire.
                             <p><img alt="Panneau de navigation" src="../images/navigationpanel_viewer.png" />
                             <p>Faites un clic droit sur la rubrique dans la liste et utilisez l'une des options disponibles dans le menu:</p>
                             <ul>
@@ -83,19 +84,19 @@
                                 <li><b>Développer jusqu'au niveau</b> pour développer la liste hiérarchique des titres jusqu'au niveau sélectionné. Par ex., si vous sélectionnez le <em>niveau 3</em>, on va développer les niveaux 1, 2 et 3 mais le niveau 4 et tous niveaux inférieurs seront réduits.</li>
                             </ul>
                             <p>Pour développer et réduire chaque niveau de titres à part, utilisez la flèche à droit du titre.</p>
-                            <p>Pour fermer le panneau de <b>Navigation</b>, cliquez sur l'icône <img alt="Icône Navigation" src="../images/navigationicon.png" /> <b>Navigation</b> sur la barre latérale gauche encore une fois.</p>
+                            <p>Pour fermer le panneau de <b>Navigation</b>, cliquez sur l'icône <div class = "icon icon-navigationicon"></div> <b>Navigation</b> sur la barre latérale gauche encore une fois.</p>
                         </li>
                         <li>
-                            <img alt="Vignettes des pages" src="../images/pagethumbnails.png" /> - sert à afficher les vignettes des pages afin de parcourir rapidement un document. Cliquez sur <img alt="Paramètres des miniatures" src="../images/search_options.png" /> sur le panneau <b>Miniatures des pages</b> pour accéder aux <b>Paramètres des miniatures</b>:
+                            <div class = "icon icon-pagethumbnails"></div> - sert à afficher les vignettes des pages afin de parcourir rapidement un document. Cliquez sur <div class = "icon icon-search_options"></div> sur le panneau <b>Miniatures des pages</b> pour accéder aux <b>Paramètres des miniatures</b>:
                             <p><img alt="Paramètres des vignettes des pages" src="../images/pagethumbnails_settings.png" /></p>
                             <ul>
                                 <li>Faites glisser le curseur pour définir la taille de la vignette,</li>
                                 <li>Par défaut, l'option <b>Mettre en surbrillance la partie visible de la page</b> est active pour indiquer sur la vignette la zone affichée maintenant sur l'écran. Cliquez sur la case à coché pour désactiver cette option.</li>
                             </ul>
-                            <p>Pour fermer le panneau <b>Miniatures des pages</b>, cliquez sur l'icône <img alt="Vignettes des pages" src="../images/pagethumbnails.png" /> <b>Miniatures des pages</b> sur la barre latérale gauche encore une fois.</p>
+                            <p>Pour fermer le panneau <b>Miniatures des pages</b>, cliquez sur l'icône <div class = "icon icon-pagethumbnails"></div> <b>Miniatures des pages</b> sur la barre latérale gauche encore une fois.</p>
                         </li>
-                        <li><img alt="L'icône Rétroaction et assistance" src="../images/feedbackicon.png" /> -  permet de contacter notre équipe d'assistance technique,</li>
-                        <li class="onlineDocumentFeatures"><img alt="L'icône À propos" src="../images/abouticon.png" /> -  (disponible uniquement dans la version <em>en ligne)</em> permet de visualiser les informations sur le programme.</li>
+                        <li><div class = "icon icon-feedbackicon"></div> -  permet de contacter notre équipe d'assistance technique,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-abouticon"></div> -  (disponible uniquement dans la version <em>en ligne)</em> permet de visualiser les informations sur le programme.</li>
                     </ul>
                 </li>
             </ol>            

apps/documenteditor/main/resources/help/fr/ProgramInterface/FormsTab.htm

@@ -4,6 +4,7 @@
     <title>Onglet Formulaires</title>
     <meta charset="utf-8" />
     <meta name="description" content="Introducing the Document Editor user interface - Forms tab" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/fr/ProgramInterface/ViewTab.htm

@@ -4,6 +4,7 @@
 		<title>Onglet Affichage</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Document Editor user interface - View tab" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/fr/UsageInstructions/AddWatermark.htm

@@ -19,7 +19,7 @@
 			<p>Pour ajouter un filigrane dans <a target="_blank" href="https://www.onlyoffice.com/fr/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a>:</p>
 			<ol>
                 <li>Basculez vers l’onglet <b>Mise en page</b> de la barre d’outils supérieure.</li>
-                <li>Cliquez sur l’icône <img alt="Filigrane" src="../images/watermark.png" /> <b>Filigrane</b> sur la barre d’outils supérieure et choisissez l’option <b>Filigrane personnalisé</b> du menu. Après cela, la fenêtre <b>Paramètres du filigrane</b> apparaîtra.</li>
+                <li>Cliquez sur l’icône <div class = "icon icon-watermark"></div> <b>Filigrane</b> sur la barre d’outils supérieure et choisissez l’option <b>Filigrane personnalisé</b> du menu. Après cela, la fenêtre <b>Paramètres du filigrane</b> apparaîtra.</li>
                 <li>Sélectionnez le type de filigrane que vous souhaitez insérer:
                     <ul>
                         <li>Utilisez l’option de <b>Filigrane de texte</b> et ajustez les paramètres disponibles:

apps/documenteditor/main/resources/help/fr/UsageInstructions/CopyPasteUndoRedo.htm

@@ -19,8 +19,8 @@
             <p>Pour couper, copier, coller des passages de texte et des objets insérés (formes automatiques, images, graphiques) dans <a target="_blank" href="https://www.onlyoffice.com/fr/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> utilisez les options correspondantes dans le menu contextuel ou les icônes de la barre d'outils supérieure :</p>
             <ul>
                 <li><b>Couper</b> – sélectionnez un fragment de texte ou un objet et utilisez l'option <b>Couper</b> dans le menu contextuel pour supprimer la sélection et l'envoyer dans le presse-papiers de l'ordinateur. <span class="onlineDocumentFeatures">Les données coupées peuvent être insérées plus tard dans un autre endroit dans le même document.</span></li>
-                <li><b>Copier</b> – sélectionnez un fragment de texte ou un objet et utilisez l'option <b>Copier</b> dans le menu contextuel, ou l'icône <b>Copier</b> <img alt="Icône Copier" src="../images/copy.png" /> de la barre d'outils supérieure pour copier la sélection dans le presse-papiers de l'ordinateur. <span class="onlineDocumentFeatures">Les données coupées peuvent être insérées plus tard dans un autre endroit dans le même document.</span></li>
-                <li><b>Coller</b> – trouvez l'endroit dans votre document où vous voulez coller le fragment de texte/l'objet précédemment copié et utilisez l'option <b>Coller</b> dans le menu contextuel, ou l'icône <b>Coller</b> <img alt="Icône Coller" src="../images/paste.png" /> de la barre d'outils supérieure. Le texte / objet sera inséré à la position actuelle du curseur. <span class="onlineDocumentFeatures">Le texte peut être copié à partir du même document.</span></li>
+                <li><b>Copier</b> – sélectionnez un fragment de texte ou un objet et utilisez l'option <b>Copier</b> dans le menu contextuel, ou l'icône <b>Copier</b> <div class = "icon icon-copy"></div> de la barre d'outils supérieure pour copier la sélection dans le presse-papiers de l'ordinateur. <span class="onlineDocumentFeatures">Les données coupées peuvent être insérées plus tard dans un autre endroit dans le même document.</span></li>
+                <li><b>Coller</b> – trouvez l'endroit dans votre document où vous voulez coller le fragment de texte/l'objet précédemment copié et utilisez l'option <b>Coller</b> dans le menu contextuel, ou l'icône <b>Coller</b> <div class = "icon icon-paste"></div> de la barre d'outils supérieure. Le texte / objet sera inséré à la position actuelle du curseur. <span class="onlineDocumentFeatures">Le texte peut être copié à partir du même document.</span></li>
             </ul>
             <p><span class="onlineDocumentFeatures">Dans la <em>version en ligne</em>, les combinaisons de touches suivantes ne sont utilisées que pour copier ou coller des données de/vers un autre document ou un autre programme,</span> <span class="desktopDocumentFeatures">dans la <em>version de bureau</em>, les boutons/options de menu et les combinaisons de touches correspondantes peuvent être utilisées pour toute opération copier/coller :</span></p>
             <ul>
@@ -31,7 +31,7 @@
             <p class="note"><b>Remarque</b> : au lieu de couper et coller du texte dans le même document, vous pouvez sélectionner le passage de texte nécessaire et le faire glisser à la position nécessaire.</p>
             <h3>Utiliser la fonctionnalité Collage spécial</h3>
             <p class="note"><b>Note</b>: Pendant le travail collaboratif, la fonctionnalité <b>Collage spécial</b> n'est disponible que pour le mode de collaboration <b>Strict</b>.</p>
-            <p>Une fois le texte copié et collé, le bouton <b>Collage spécial</b> <img alt="Collage spécial" src="../images/pastespecialbutton.png" /> apparaît à côté du passage de texte inséré. Cliquez sur ce bouton pour sélectionner l'option de collage requise.</p>
+            <p>Une fois le texte copié et collé, le bouton <b>Collage spécial</b> <div class = "icon icon-pastespecialbutton"></div> apparaît à côté du passage de texte inséré. Cliquez sur ce bouton pour sélectionner l'option de collage requise.</p>
             <p>Lorsque vous collez le texte de paragraphe ou du texte dans des formes automatiques, les options suivantes sont disponibles :</p>
             <ul>
                 <li><em>Coller</em> - permet de coller le texte copié en conservant sa mise en forme d'origine.</li>

apps/documenteditor/main/resources/help/fr/UsageInstructions/CreateFillableForms.htm

@@ -4,6 +4,7 @@
     <title>Créer des formulaires à remplir</title>
     <meta charset="utf-8" />
     <meta name="description" content="Create fillable forms for advanced form interaction experience" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -31,7 +32,7 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Champ texte</b> <img alt="L'icône champ de texte" src="../images/text_field_icon.png" /> .
+                        cliquez sur l'icône <b>Champ texte</b> <div class = "icon icon-text_field_icon"></div> .
                     </li>
                 </ol>
                 <p><img alt="champ de texte ajouté" src="../images/text_field_inserted.png" /></p>
@@ -54,8 +55,8 @@
                             <ul>
                                 <li><b>Largeur de cellule</b>: définissez la valeur appropriée ou utilisez les flèches à droite pour régler la largeur du champ texte ajouté. Le texte sera justifié selon les paramètres.</li>
                             </ul>
-<li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure du champ texte. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan au champ de texte. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+<li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure du champ texte. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan au champ de texte. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                         <li><b>Ajustement automatique</b>: il est possible d'activer cette option lors l'activation de l'option <b>Taille de champ fixe</b>, cochez cette case pour ajuster automatiquement  la police en fonction de la taille du champ.</li>
                         <li><b>Champ de saisie à plusieurs lignes</b>: il est possible d'activer cette option lors l'activation de l'option <b>Taille de champ fixe</b>, cochez cette case pour créer un champ à plusieurs lignes, sinon le champ va contenir une seule ligne de texte.</li>
                     </ul>
@@ -73,7 +74,7 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Zone de liste déroulante</b> <img alt="L'icône Zone de liste déroulante" src="../images/combo_box_icon.png" /> .
+                        cliquez sur l'icône <b>Zone de liste déroulante</b> <div class = "icon icon-combo_box_icon"></div> .
                     </li>
                 </ol>
                 <p><img alt="Zone de liste déroulante ajoutée" src="../images/combo_box_inserted.png" /></p>
@@ -86,12 +87,12 @@
                         <li>
                             <b>Conseil</b>: saisissez le texte à afficher quand l'utilisateur fait passer la souris sur le champ du formulaire. <br /> <img alt="Conseil ajouté" src="../images/combo_box_tip.png" />
                         </li>
-                        <li><b>Options de valeur</b>: ajouter<img alt="Ajouter une valeur" src="../images/combo_add_values.png" /> de nouvelles valeurs, supprimez-les<img alt="Supprimer une valeur" src="../images/combo_delete_values.png" /> , ou déplacez-les vers le haut<img alt="Valeur vers le haut" src="../images/combo_values_up.png" /> et <img alt="Valeur ver le bas" src="../images/combo_values_down.png" />vers le bas de la liste.</li>
+                        <li><b>Options de valeur</b>: ajouter<div class = "icon icon-combo_add_values"></div> de nouvelles valeurs, supprimez-les<div class = "icon icon-combo_delete_values"></div> , ou déplacez-les vers le haut<div class = "icon icon-combo_values_up"></div> et <div class = "icon icon-combo_values_down"></div>vers le bas de la liste.</li>
                         <li>
                             <b>Taille de champ fixe</b>: activez cette option pour fixer la taille du champ.<br /> Un champ de taille fixe ressemble à une forme automatique. Vous pouvez définir le style d'habillage et ajuster son position.
                         </li>
-                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure de la zone de liste déroulante. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan à la zone de liste déroulante. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure de la zone de liste déroulante. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan à la zone de liste déroulante. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                     </ul>
                 </p>
                 <p>Cliquez sur la flèche dans la partie droite de la <b>Zone de liste déroulante</b> ajoutée pour accéder à la liste d'éléments disponibles et choisir un élément approprié. Lorsque vous avez choisi un élément, vous pouvez modifier le texte affiché  partiellement ou entièrement ou le remplacer du texte.</p>
@@ -109,7 +110,7 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Liste déroulante</b> <img alt="L'icône de la liste déroulante" src="../images/dropdown_list_icon.png" /> .
+                        cliquez sur l'icône <b>Liste déroulante</b> <div class = "icon icon-dropdown_list_icon"></div> .
                     </li>
                 </ol>
                 <p><img alt="Liste déroulante ajoutée" src="../images/combo_box_inserted.png" /></p>
@@ -122,12 +123,12 @@
                         <li>
                             <b>Conseil</b>: saisissez le texte à afficher quand l'utilisateur fait passer la souris sur le champ du formulaire. <br /> <img alt="Conseil ajouté" src="../images/combo_box_tip.png" />
                         </li>
-                        <li><b>Options de valeur</b>: ajouter<img alt="Ajouter une valeur" src="../images/combo_add_values.png" /> de nouvelles valeurs, supprimez-les<img alt="Supprimer une valeur" src="../images/combo_delete_values.png" /> , ou déplacez-les vers le haut<img alt="Valeur vers le haut" src="../images/combo_values_up.png" /> et <img alt="Valeur ver le bas" src="../images/combo_values_down.png" />vers le bas de la liste.</li>
+                        <li><b>Options de valeur</b>: ajouter<div class = "icon icon-combo_add_values"></div> de nouvelles valeurs, supprimez-les<div class = "icon icon-combo_delete_values"></div> , ou déplacez-les vers le haut<div class = "icon icon-combo_values_up"></div> et <div class = "icon icon-combo_values_down"></div>vers le bas de la liste.</li>
                         <li>
                             <b>Taille de champ fixe</b>: activez cette option pour fixer la taille du champ.<br /> Un champ de taille fixe ressemble à une forme automatique. Vous pouvez définir le style d'habillage et ajuster son position.
                         </li>
-                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure de la liste déroulante. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan à la liste déroulante. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure de la liste déroulante. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan à la liste déroulante. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                     </ul>
                 </p>
                 <p>Cliquez sur la flèche dans la partie droite de la <b>Liste déroulante</b> ajoutée pour accéder à la liste d'éléments disponibles et choisir un élément approprié.</p>
@@ -144,10 +145,10 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Case à cocher</b> <img alt="L'icône de case à cocher" src="../images/checkbox_icon.png" /> .
+                        cliquez sur l'icône <b>Case à cocher</b> <div class = "icon icon-checkbox_icon"></div> .
                     </li>
                 </ol>
-                <p><img alt="Case à coché ajoutée" src="../images/checkbox_inserted.png" /></p>
+                <p><div class = "big big-checkbox_inserted"></div></p>
                 <p>Le champ du formulaire apparaîtra à la point d'insertion de la ligne de texte existante. Le menu <b>Paramètres du formulaire</b> s'affiche à droite.</p>
                 <p id="checkbox_settings">
                     <img class="floatleft" alt="Paramètres de case à cocher" src="../images/checkbox_settings.png" />
@@ -159,12 +160,12 @@
                         <li>
                             <b>Taille de champ fixe</b>: activez cette option pour fixer la taille du champ.<br /> Un champ de taille fixe ressemble à une forme automatique. Vous pouvez définir le style d'habillage et ajuster son position.
                         </li>
-                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure de la case à cocher. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan à la case à cocher. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure de la case à cocher. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan à la case à cocher. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                     </ul>
                 </p>
                 <p>Cliquez sur la case pour la cocher.</p>
-                <p><img alt="Case cochée" src="../images/checkbox_checked.png" /></p>
+                <p><div class = "big big-checkbox_checked"></div></p>
             </details>
         </div>
 
@@ -177,10 +178,10 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Bouton radio</b> <img alt="L'icône du bouton radio" src="../images/radio_button_icon.png" /> .
+                        cliquez sur l'icône <b>Bouton radio</b> <div class = "icon icon-radio_button_icon"></div> .
                     </li>
                 </ol>
-                <p><img alt="Bouton radio ajouté" src="../images/radio_button_inserted.png" /></p>
+                <p><div class = "big big-radio_button_inserted"></div></p>
                 <p>Le champ du formulaire apparaîtra à la point d'insertion de la ligne de texte existante. Le menu <b>Paramètres du formulaire</b> s'affiche à droite.</p>
                 <p id="radio_button_settings">
                     <img class="floatleft" alt="Paramètres su bouton radio" src="../images/radio_button_settings.png" />
@@ -192,12 +193,12 @@
                         <li>
                             <b>Taille de champ fixe</b>: activez cette option pour fixer la taille du champ.<br /> Un champ de taille fixe ressemble à une forme automatique. Vous pouvez définir le style d'habillage et ajuster son position.
                         </li>
-                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure du bouton radio. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan au bouton radio. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure du bouton radio. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan au bouton radio. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                     </ul>
                 </p>
                 <p>Cliquez sur le bouton radio pour le choisir.</p>
-                <p><img alt="Bouton radio choisi" src="../images/radio_button_checked.png" /></p>
+                <p><div class = "big big-radio_button_checked"></div></p>
             </details>
         </div>
 
@@ -210,10 +211,10 @@
                     <li>positionnez le point d'insertion à la ligne du texte où vous souhaitez ajouter un champ,</li>
                     <li>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure,</li>
                     <li>
-                        cliquez sur l'icône <b>Image</b> <img alt="L'icône champ image" src="../images/image_form_icon.png" /> .
+                        cliquez sur l'icône <b>Image</b> <div class = "icon icon-image_form_icon"></div> .
                     </li>
                 </ol>
-                <p><img alt="Champ image ajouté" src="../images/image_form_inserted.png" /></p>
+                <p><div class = "big big-image_form_inserted"></div></p>
                 <p>Le champ du formulaire apparaîtra à la point d'insertion de la ligne de texte existante. Le menu <b>Paramètres du formulaire</b> s'affiche à droite.</p>
                 <p id="image_form_settings">
                     <img class="floatleft" alt="Paramètres du champ image" src="../images/image_form_settings.png" />
@@ -226,11 +227,11 @@
                         <li><b>Mise à l'échelle</b>: cliquez sur la liste déroulante et sélectionnez l'option  de dimensionnement de l'image appropriée: <b>Toujours</b>, <b>Jamais</b>, lorsque <b>L'image semble trop grande</b> ou <b>L'image semble trop petite</b>. L'image sélectionnée sera redimensionnée dans le champ en fonction de l'option choisie.</li>
                         <li><b>Verrouiller les proportions</b>: cochez cette case pour maintenir le rapport d'aspect de l'image sans la déformer. Lors l'activation de cette option, faites glisser le curseur vertical ou horizontal pour positionner l'image à l'intérieur du champ ajouté. Si la case n'est pas cochée, les curseurs de positionnement ne sont pas activés.</li>
                         <li><b>Sélectionnez une image</b>: cliquez sur ce bouton pour télécharger une image <b>Depuis un fichier</b>, <b>à partir d'une URL</b> ou <b>à partir de l'espace de stockage</b>.</li>
-                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" />  pour définir la couleur de bordure du champ avec l'image. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
-                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <img alt="Pas de remplissage" src="../images/nofill.png" /> pour ajouter la couleur d'arrière-plan au champ avec l'image. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
+                        <li><b>Couleur de bordure</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div>  pour définir la couleur de bordure du champ avec l'image. Sélectionnez la couleur appropriée des bordures dans la palette. Le cas échéant, vous pouvez <b>ajouter une couleur personnalisée</b>.</li>
+                        <li><b>Couleur d'arrière-plan</b>: cliquez sur l'icône <div class = "icon icon-nofill"></div> pour ajouter la couleur d'arrière-plan au champ avec l'image. Sélectionnez la couleur appropriée de la palette <b>Couleurs du thème</b>, <b>Couleurs standard</b> ou <b>ajoutez une nouvelle couleur personnalisée</b>, le cas échéant.</li>
                     </ul>
                 </p>
-                <p>Pour remplacer une image, cliquez sur l'icône d'image <img alt="L'icône Image" src="../images/image.png" /> au-dessus de la bordure de champ image et sélectionnez une autre image.</p>
+                <p>Pour remplacer une image, cliquez sur l'icône d'image <div class = "icon icon-image"></div> au-dessus de la bordure de champ image et sélectionnez une autre image.</p>
                 <p>Pour paramétrer l'image, accédez à l'onglet <b>Paramètres de l'image</b> sur la barre latérale droite. Pour en savoir plus, veuillez consulter les instructions sur <a href="../UsageInstructions/InsertImages.htm">paramètres d'image</a>.</p>
             </details>
         </div>
@@ -259,7 +260,7 @@
         <p class="note">
             <b>Remarque</b>: Les options de modification ne sont pas disponibles lorsque vous activez le mode <b>Voir le formulaire</b>.
         </p>
-        <p>Cliquez sur le bouton <b>Voir le formulaire</b> <img alt="Bouton Voir le formulaire" src="../images/view_form_icon.png" /> sous l'onglet <b>Formulaire</b> de la barre d'outils supérieure, pour afficher un aperçu du formulaire sur un document.</p>
+        <p>Cliquez sur le bouton <b>Voir le formulaire</b> <div class = "icon icon-view_form_icon"></div> sous l'onglet <b>Formulaire</b> de la barre d'outils supérieure, pour afficher un aperçu du formulaire sur un document.</p>
         <p><img alt="Voir le formulaire actif" src="../images/view_form_active2.png" /></p>
         <p>Pour quitter le mode d'aperçu, cliquer sur la même icône encore une fois.</p>
 
@@ -272,21 +273,21 @@
         <p>Pour <b>rendre un champ de formulaire obligatoire</b>, activez l'option <b>Requis</b>. Les champs obligatoires auront une bordure rouge. On ne peut pas soumettre le formulaire jusqu'à ce que tous les champs obligatoires soient remplis. </p>
 
         <h2>Verrouiller les champs du formulaire</h2>
-        <p>Pour empêcher toute la modification ultérieure des champs du formulaire, appuyez sur l'icône <img alt="L'icône verrouiller le formulaire" src="../images/lock_form_icon.png" /> <b>Verrou</b>. La fonctionnalité de remplissage reste disponible.</p>
+        <p>Pour empêcher toute la modification ultérieure des champs du formulaire, appuyez sur l'icône <div class = "icon icon-lock_form_icon"></div> <b>Verrou</b>. La fonctionnalité de remplissage reste disponible.</p>
 
         <h2>Effacer les champs du formulaire</h2>
-        <p>Pour effacer tous les champs ajoutés et supprimer toutes les valeurs, cliquez sur le bouton <b>Effacer tous les champs</b> <img alt="Icône Effacer les champs" src="../images/clear_fields_icon.png" /> sous l'onglet <b>Formulaires</b> de la barre d'outils supérieure.</p>
+        <p>Pour effacer tous les champs ajoutés et supprimer toutes les valeurs, cliquez sur le bouton <b>Effacer tous les champs</b> <div class = "icon icon-clear_fields_icon"></div> sous l'onglet <b>Formulaires</b> de la barre d'outils supérieure.</p>
 
         <h2>Naviguer, afficher et enregistrer un formulaire</h2>
         <p><img alt="Panneau de remplissage formulaire" src="../images/fill_form.png" /></p>
         <p>passez à l'onglet <b>Formulaires</b> de la barre d'outils supérieure.</p>
-        <p>Naviguez entre les champs du formulaire en utilisant les boutons  <img alt="L'icône champ précédent" src="../images/previous_field_icon.png" /> <b>Champ précédent</b> et <img alt="L'icône champ suivant" src="../images/next_field_icon.png" /> <b>Champ suivant</b> de la barre d'outil supérieure.</p>
-        <p>Une fois terminé, cliquez sur le bouton <img alt="Enregistrer le formulaire" src="../images/save_form_icon.png" /> <b>Enregistrer sous oform</b> de la barre d'outils supérieure pour enregistrer le formulaire au format <b>OFORM</b> prêt à remplir. Vous pouvez sauvegarder autant de formulaires au format <b>OFORM</b> que vous le souhaitez.</p>
-        <!--<p>To clear all fields and reset the form, click the <img alt="Clear fields icon" src="../images/clear_fields_icon.png" /> <b>Clear fields</b> button at the top toolbar.</p>
-        <p>When you are finished, click the <img alt="Submit form" src="../images/submit_form_icon.png" /> <b>Submit</b> button at the top toolbar to send the form for further processing. Please note that this action cannot be undone.</p>
+        <p>Naviguez entre les champs du formulaire en utilisant les boutons  <div class = "icon icon-previous_field_icon"></div> <b>Champ précédent</b> et <div class = "icon icon-next_field_icon"></div> <b>Champ suivant</b> de la barre d'outil supérieure.</p>
+        <p>Une fois terminé, cliquez sur le bouton <div class = "icon icon-save_form_icon"></div> <b>Enregistrer sous oform</b> de la barre d'outils supérieure pour enregistrer le formulaire au format <b>OFORM</b> prêt à remplir. Vous pouvez sauvegarder autant de formulaires au format <b>OFORM</b> que vous le souhaitez.</p>
+        <!--<p>To clear all fields and reset the form, click the <div class = "icon icon-clear_fields_icon"></div> <b>Clear fields</b> button at the top toolbar.</p>
+        <p>When you are finished, click the <div class = "icon icon-submit_form_icon"></div> <b>Submit</b> button at the top toolbar to send the form for further processing. Please note that this action cannot be undone.</p>
     <p class="note">If you are using the server version of ONLYOFFICE Docs, the presence of the <b>Submit</b> button depends on the configuration. Read <a href="https://api.onlyoffice.com/editors/config/editor/customization">this article</a> to learn more.</p>-->
         <h2>Supprimer les champs du formulaire</h2>
-        <p>Pour supprimer un champ du formulaire et garder tous son contenu, sélectionnez-le et cliquez sur l'icône <b>Supprimer</b> <img alt="L'icône supprimer le formulaire" src="../images/combo_delete_values.png" /> (assurez-vous que le champ n'est pas verrouillé) ou appuyez sur la touche <b>Supprimer</b> du clavier.</p>
+        <p>Pour supprimer un champ du formulaire et garder tous son contenu, sélectionnez-le et cliquez sur l'icône <b>Supprimer</b> <div class = "icon icon-combo_delete_values"></div> (assurez-vous que le champ n'est pas verrouillé) ou appuyez sur la touche <b>Supprimer</b> du clavier.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/fr/UsageInstructions/CreateTableOfContents.htm

@@ -42,7 +42,7 @@
                 <li><b>Développer au niveau</b> - pour étendre la structure de titre au niveau sélectionné. Par exemple. Si vous sélectionnez le <em>niveau 3</em>, les niveaux 1, 2 et 3 seront développés, tandis que le niveau 4 et tous les niveaux inférieurs seront réduits.</li>
             </ul>
             <p>Pour développer ou réduire manuellement des niveaux de titre différents, utilisez les flèches situées à gauche des en-têtes.</p>
-            <p>Pour fermer le panneau <b>Navigation</b> cliquez sur l'icône <img alt="Icône Navigation" src="../images/navigationicon.png" />  encore une fois.</p>
+            <p>Pour fermer le panneau <b>Navigation</b> cliquez sur l'icône <div class = "icon icon-navigationicon"></div>  encore une fois.</p>
             <h2>Insérer une table des matières dans le document</h2>
             <p>Pour insérer une table des matières dans votre document:</p>
             <ol>

apps/documenteditor/main/resources/help/fr/UsageInstructions/FillingOutForm.htm

@@ -4,6 +4,7 @@
     <title>Remplir un formulaire</title>
     <meta charset="utf-8" />
     <meta name="description" content="Fill out a Form template" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -20,11 +21,11 @@
                     <li>Ouvrez le formulaire au format OFORM.
                     <p><img alt="oform" src="../images/oform.png" /><p>
                     </li>
-                    <li>Remplissez tous les champs obligatoires. La bordure des champs obligatoires est rouge. Utilisez <img alt="Flèches remplissage formulaire" src="../images/arrows_formfilling.png" /> ou <img alt="Suivant remplissage formulaire" src="../images/next_formfilling.png" /> dans la barre d'outils supérieure pour naviguer entre les champs ou cliquez sur le champ à remplir.
+                    <li>Remplissez tous les champs obligatoires. La bordure des champs obligatoires est rouge. Utilisez <div class = "icon icon-arrows_formfilling"></div> ou <img alt="Suivant remplissage formulaire" src="../images/next_formfilling.png" /> dans la barre d'outils supérieure pour naviguer entre les champs ou cliquez sur le champ à remplir.
                     <li>Utilisez le bouton <b>Effacer tous les champs</b> <img alt="Effacer les champs remplis" src="../images/clearall_formfilling.png" /> pour vider tous les champs de saisie.</li>
                     <li>Une fois tous les champs remplis, cliquez sur <b>Enregistrer comme PDF</b> pour sauvegarder le formulaire sur votre ordinateur en tant que fichier PDF.</li> 
                     <li>
-                        Cliquer sur <img alt="Bouton Plus" src="../images/morebutton.png" /> dans le coin droit de la barre d'outils supérieure pour accéder aux options supplémentaires. Vous pouvez <b>Imprimer</b>, <b>Télécharger en tant que docx</b> ou <b>Télécharger en tant que pdf</b>.
+                        Cliquer sur <div class = "icon icon-morebutton"></div> dans le coin droit de la barre d'outils supérieure pour accéder aux options supplémentaires. Vous pouvez <b>Imprimer</b>, <b>Télécharger en tant que docx</b> ou <b>Télécharger en tant que pdf</b>.
                         <p><img alt="Plus OFORM" src="../images/more_oform.png" /></p>
                         <p>Il est même possible de modifier le <b>Thème d'interface</b> en choisissant <b>Claire</b>, <b>Classique claire</b> ou <b>Sombre</b>. Une fois le <b>Thème d'interface sombre</b> activé, l'option <b>Mode sombre</b> devient disponible.</p>
                         <p><img alt="Mode sombre" src="../images/darkmode_oform.png" /></p>

apps/documenteditor/main/resources/help/fr/UsageInstructions/InsertAutoshapes.htm

@@ -19,7 +19,7 @@
 			<p>Pour insérer une forme automatique à votre document dans <a target="_blank" href="https://www.onlyoffice.com/fr/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a>,</p>
 			<ol>
 				<li>passez à l'onglet <b>Insérer</b> de la barre d'outils supérieure,</li>
-				<li>cliquez sur l'icône <img alt="Insérer une forme automatique" src="../images/insertautoshape.png" /> <b>Forme</b>  de la barre d'outils supérieure,</li>
+				<li>cliquez sur l'icône <div class = "icon icon-insertautoshape"></div> <b>Forme</b>  de la barre d'outils supérieure,</li>
 				<li>sélectionnez l'un des groupes des formes automatiques disponibles dans la <b>Galerie des formes</b>: <em>Récemment utilisé</em>, <em>Formes de base</em>, <em>Flèches figurées</em>, <em>Maths</em>, <em>Graphiques</em>, <em>Étoiles et rubans</em>, <em>Légendes</em>, <em>Boutons</em>, <em>Rectangles</em>, <em>Lignes</em>,</li>
 				<li>cliquez sur la forme automatique nécessaire du groupe sélectionné,</li>
 				<li>placez le curseur de la souris là où vous voulez insérer la forme,</li>
@@ -28,10 +28,10 @@
 				</li>
 			</ol>
             <h3>Déplacer et redimensionner des formes automatiques</h3>
-            <p id ="shape_resize"><img class="floatleft" alt="Modifier les formes automatiques" src="../images/reshaping.png" />Pour modifier la taille de la forme automatique, faites glisser les petits carreaux <img alt="Icône Carreaux" src="../images/resize_square.png" /> situés sur les bords de la forme. Pour garder les proportions de la forme automatique sélectionnée lors du redimensionnement, maintenez la touche <b>Maj</b> enfoncée et faites glisser l'une des icônes de coin.</p>
-			<p>Lors de la modification des formes, par exemple des flèches figurées ou les légendes, l'icône jaune en forme de diamant <img alt="Icône jaune en forme de diamant" src="../images/yellowdiamond.png" /> est aussi disponible. Elle permet d'ajuster certains aspects de la forme, par exemple, la longueur de la pointe d'une flèche.</p>
-			<p>Pour modifier la position de la forme automatique, utilisez l'icône <img alt="Flèche" src="../images/arrow.png" /> qui apparaît si vous placez le curseur de votre souris sur la forme. Faites glisser la forme à la position nécessaire sans relâcher le bouton de la souris. Lorsque vous déplacez la forme automatique, des lignes de guidage s'affichent pour vous aider à positionner l'objet sur la page avec précision (si un style d'habillage autre que aligné est sélectionné). Pour déplacer la forme automatique de trois incréments, maintenez la touche <b>Ctrl</b> enfoncée et utilisez les flèches du clavier. Pour déplacer la forme automatique strictement horizontallement / verticallement et l'empêcher de se déplacer dans une direction perpendiculaire, maintenez la touche <b>Maj</b> enfoncée lors du déplacement.</p>
-			<p>Pour faire pivoter la forme automatique, placez le curseur de la souris sur la poignée de rotation ronde <img alt="Poignée de rotation" src="../images/greencircle.png" /> et faites-la glisser vers la droite ou la gauche. Pour limiter la rotation de l'angle à des incréments de 15 degrés, maintenez la touche <b>Maj</b> enfoncée.</p>
+            <p id ="shape_resize"><div class = "big big-reshaping"></div>Pour modifier la taille de la forme automatique, faites glisser les petits carreaux <div class = "icon icon-resize_square"></div> situés sur les bords de la forme. Pour garder les proportions de la forme automatique sélectionnée lors du redimensionnement, maintenez la touche <b>Maj</b> enfoncée et faites glisser l'une des icônes de coin.</p>
+			<p>Lors de la modification des formes, par exemple des flèches figurées ou les légendes, l'icône jaune en forme de diamant <div class = "icon icon-yellowdiamond"></div> est aussi disponible. Elle permet d'ajuster certains aspects de la forme, par exemple, la longueur de la pointe d'une flèche.</p>
+			<p>Pour modifier la position de la forme automatique, utilisez l'icône <div class = "icon icon-arrow"></div> qui apparaît si vous placez le curseur de votre souris sur la forme. Faites glisser la forme à la position nécessaire sans relâcher le bouton de la souris. Lorsque vous déplacez la forme automatique, des lignes de guidage s'affichent pour vous aider à positionner l'objet sur la page avec précision (si un style d'habillage autre que aligné est sélectionné). Pour déplacer la forme automatique de trois incréments, maintenez la touche <b>Ctrl</b> enfoncée et utilisez les flèches du clavier. Pour déplacer la forme automatique strictement horizontallement / verticallement et l'empêcher de se déplacer dans une direction perpendiculaire, maintenez la touche <b>Maj</b> enfoncée lors du déplacement.</p>
+			<p>Pour faire pivoter la forme automatique, placez le curseur de la souris sur la poignée de rotation ronde <div class = "icon icon-greencircle"></div> et faites-la glisser vers la droite ou la gauche. Pour limiter la rotation de l'angle à des incréments de 15 degrés, maintenez la touche <b>Maj</b> enfoncée.</p>
             <p class="note"><b>Note</b> : la liste des raccourcis clavier qui peuvent être utilisés lorsque vous travaillez avec des objets est disponible <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">ici</a>.</p>
             <hr />
             <h3>Modifier les paramètres de la forme automatique</h3>
@@ -59,7 +59,7 @@
 				</li>
 				<li><b>Organiser</b> sert à placer la forme automatique choisie au premier plan, envoyer à fond, avancer ou reculer ainsi que grouper ou dégrouper les formes pour effectuer des opérations avec plusieurs formes à la fois. Pour en savoir plus sur l'organisation des objets, vous pouvez vous référer à <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">cette page</a>.</li>
 				<li><b>Aligner</b> sert à aligner la forme à gauche, au centre, à droite, en haut, au milieu, en bas. Pour en savoir plus sur l'alignement des objets, vous pouvez vous référer à <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">cette page</a>.</li>
-				<li><b>Style d'habillage</b> sert à sélectionner un des styles d'habillage - aligné sur le texte, carré, rapproché, au travers, haut et bas, devant le texte, derrière le texte - ou modifier le contour de l'habillage. L'option <b>Modifier les limites du renvoi à la ligne</b> n'est disponible qu'au cas où vous sélectionnez le style d'habillage autre que 'aligné sur le texte'. Faites glisser les points d'habillage pour personnaliser les limites. Pour créer un nouveau point d'habillage, cliquez sur la ligne rouge et faites-la glisser vers la position désirée. <img alt="Modifier les limites du renvoi à la ligne" src="../images/wrap_boundary.png" /></li>
+				<li><b>Style d'habillage</b> sert à sélectionner un des styles d'habillage - aligné sur le texte, carré, rapproché, au travers, haut et bas, devant le texte, derrière le texte - ou modifier le contour de l'habillage. L'option <b>Modifier les limites du renvoi à la ligne</b> n'est disponible qu'au cas où vous sélectionnez le style d'habillage autre que 'aligné sur le texte'. Faites glisser les points d'habillage pour personnaliser les limites. Pour créer un nouveau point d'habillage, cliquez sur la ligne rouge et faites-la glisser vers la position désirée. <div class = "big big-wrap_boundary"></div></li>
 				<li><b>Rotation</b> permet de faire pivoter la forme de 90 degrés dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre, ainsi que de retourner la forme horizontalement ou verticalement.</li>
 				<li><b>Paramètres avancés</b> sert à ouvrir la fenêtre 'Forme - Paramètres avancés'.</li>
 			</ul>

apps/documenteditor/main/resources/help/fr/UsageInstructions/SupportSmartArt.htm

@@ -4,6 +4,7 @@
         <title>Prise en charge des graphiques SmartArt par ONLYOFFICE Document Editor</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Modifier les graphiques SmartArt créés dans d'autes applications"/>
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/fr/UsageInstructions/UseMailMerge.htm

@@ -23,7 +23,7 @@
                     <ol>
                         <li>La source de données utilisée pour le publipostage doit être une feuille de calcul <b>.xlsx</b> stockée sur votre portail. Ouvrez une feuille de calcul existante ou créez-en une nouvelle et assurez-vous qu'elle réponde aux exigences suivantes.</li>
                         <li>La feuille de calcul doit comporter une ligne d'en-tête avec les titres des colonnes, car les valeurs de la première cellule de chaque colonne désignent des champs de fusion (c'est-à-dire des variables que vous pouvez insérer dans le texte). Chaque colonne doit contenir un ensemble de valeurs réelles pour une variable. Chaque ligne de la feuille de calcul doit correspondre à un enregistrement distinct (c'est-à-dire un ensemble de valeurs appartenant à un destinataire donné). Pendant le processus de fusion, une copie du document principal sera créée pour chaque enregistrement et chaque champ de fusion inséré dans le texte principal sera remplacé par une valeur réelle de la colonne correspondante. Si vous devez envoyer le résultat par courrier électronique, la feuille de calcul doit également inclure une colonne avec les adresses électroniques des destinataires. </li>
-                        <li>Ouvrez un document texte existant ou créez-en un nouveau. Il doit contenir le texte principal qui sera le même pour chaque version du document fusionné. Cliquez sur l'icône <b>Fusionner</b> <img alt="Icône Fusionner" src="../images/mailmergeicon.png" /> dans l'onglet <b>Accueil</b> de la barre d'outils supérieure et sélectionnez l'emplacement de la source de données: <b>Depuis un fichier</b>, <b>À partir de l'URL</b> ou <b>À partir de l'espace de stockage</b>.
+                        <li>Ouvrez un document texte existant ou créez-en un nouveau. Il doit contenir le texte principal qui sera le même pour chaque version du document fusionné. Cliquez sur l'icône <b>Fusionner</b> <div class = "icon icon-mailmergeicon"></div> dans l'onglet <b>Accueil</b> de la barre d'outils supérieure et sélectionnez l'emplacement de la source de données: <b>Depuis un fichier</b>, <b>À partir de l'URL</b> ou <b>À partir de l'espace de stockage</b>.
                             <p><img alt="Mail Merge Options" src="../images/mailmerge_options.png" /></p>
                         </li>
                         <li>Sélectionnez le fichier nécessaire ou collez l'adresse et cliquez sur <b>OK</b>.
@@ -38,15 +38,15 @@
                             </li>
                             <li>
                                 Ici, vous pouvez ajouter de nouvelles informations, modifier ou supprimer les données existantes, si nécessaire. Pour simplifier l'utilisation des données, vous pouvez utiliser les icônes situées au haut de la fenêtre :<ul>
-                                    <li><img alt="Copier" src="../images/copy.png" /> et <img alt="Coller" src="../images/paste.png" /> pour copier et coller les données copiées</li>
-                                    <li><img alt="Annuler" src="../images/undo1.png" /> et <img alt="Rétablir" src="../images/redo1.png" /> pour annuler et rétablir les actions</li>
-                                    <li><img alt="Icône Trier dans l'ordre croissant" src="../images/sortatoz.png" /> et <img alt="Icône Trier dans l'ordre décroissant" src="../images/sortztoa.png" /> - pour trier vos données dans une plage sélectionnée de cellules dans l'ordre croissant ou décroissant</li>
-                                    <li><img alt="icône Filtrer" src="../images/sortandfilter.png" /> - pour activer le filtre pour la plage de cellules sélectionnée précédemment ou supprimer le filtre appliqué</li>
+                                    <li><div class = "icon icon-copy"></div> et <div class = "icon icon-paste"></div> pour copier et coller les données copiées</li>
+                                    <li><div class = "icon icon-undo1"></div> et <div class = "icon icon-redo1"></div> pour annuler et rétablir les actions</li>
+                                    <li><div class = "icon icon-sortatoz"></div> et <div class = "icon icon-sortztoa"></div> - pour trier vos données dans une plage sélectionnée de cellules dans l'ordre croissant ou décroissant</li>
+                                    <li><div class = "icon icon-sortandfilter"></div> - pour activer le filtre pour la plage de cellules sélectionnée précédemment ou supprimer le filtre appliqué</li>
                                     <li>
-                                        <img alt="Icône Effacer les filtres" src="../images/clearfilter.png" /> - pour effacer tous les paramètres de filtre appliqués<p class="note"><b>Remarque</b> : pour en savoir plus sur l'utilisation des filtres, reportez-vous à la section <b>Trier et filtrer les données</b> de l'aide de <b>Spreadsheet Editor</b>.</p>
+                                        <div class = "icon icon-clearfilter"></div> - pour effacer tous les paramètres de filtre appliqués<p class="note"><b>Remarque</b> : pour en savoir plus sur l'utilisation des filtres, reportez-vous à la section <b>Trier et filtrer les données</b> de l'aide de <b>Spreadsheet Editor</b>.</p>
                                     </li>
                                     <li>
-                                        <img alt="Icône Recherche" src="../images/searchicon.png" /> - pour rechercher une certaine valeur et la remplacer par une autre, si nécessaire<p class="note"><b>Remarque</b> : pour en savoir plus sur l'utilisation de l'outil <b>Rechercher et remplacer</b>, reportez-vous à la section <b>Fonctions rechercher et remplacer</b> de l'aide de <b>Spreadsheet Editor</b>.</p>
+                                        <div class = "icon icon-searchicon"></div> - pour rechercher une certaine valeur et la remplacer par une autre, si nécessaire<p class="note"><b>Remarque</b> : pour en savoir plus sur l'utilisation de l'outil <b>Rechercher et remplacer</b>, reportez-vous à la section <b>Fonctions rechercher et remplacer</b> de l'aide de <b>Spreadsheet Editor</b>.</p>
                                     </li>
                                 </ul>
                             </li>

apps/documenteditor/main/resources/help/fr/UsageInstructions/ViewDocInfo.htm

@@ -40,7 +40,7 @@
                     <h3>Historique des versions</h3>
                     <p>Dans la <I>version en ligne</I>, vous pouvez consulter l'historique des versions des fichiers stockés dans le cloud.</p>
                     <p class="note"><B>Remarque</B>: cette option n'est pas disponible pour les utilisateurs disposant des autorisations en <B>Lecture seule</B>.</p>
-                    <p>Pour afficher toutes les modifications apportées à ce document, sélectionnez l'option <B>Historique des versions</B> dans la barre latérale de gauche. Il est également possible d'ouvrir l'historique des versions à l'aide de l'icône <img alt="L'icône Historique des versions" src="../images/versionhistoryicon.png" /> <B>Historique des versions</B> de l'onglet <B>Collaboration</B> de la barre d'outils supérieure. Vous verrez la liste des versions de ce document (changements majeurs) et des révisions (modifications mineures) avec l'indication de l'auteur de chaque version/révision et la date et l'heure de création. Pour les versions de document, le numéro de version est également spécifié (par exemple <I>ver.</I><em> 2</em>). Pour savoir exactement quels changements ont été apportés à chaque version/révision, vous pouvez voir celle qui vous intéresse en cliquant dessus dans la barre latérale de gauche. Les modifications apportées par l'auteur de la version/révision sont marquées avec la couleur qui est affichée à côté du nom de l'auteur dans la barre latérale gauche. Vous pouvez utiliser le lien <B>Restaurer</B> sous la version/révision sélectionnée pour la restaurer. <!--To hide the list of the revisions within a certain version, use the <img alt="Collapse icon" src="../images/collapse.png" /> icon next to the version. To display revisions again, use the <img alt="Expand icon" src="../images/expand.png" /> icon.--> </p>
+                    <p>Pour afficher toutes les modifications apportées à ce document, sélectionnez l'option <B>Historique des versions</B> dans la barre latérale de gauche. Il est également possible d'ouvrir l'historique des versions à l'aide de l'icône <div class = "icon icon-versionhistoryicon"></div> <B>Historique des versions</B> de l'onglet <B>Collaboration</B> de la barre d'outils supérieure. Vous verrez la liste des versions de ce document (changements majeurs) et des révisions (modifications mineures) avec l'indication de l'auteur de chaque version/révision et la date et l'heure de création. Pour les versions de document, le numéro de version est également spécifié (par exemple <I>ver.</I><em> 2</em>). Pour savoir exactement quels changements ont été apportés à chaque version/révision, vous pouvez voir celle qui vous intéresse en cliquant dessus dans la barre latérale de gauche. Les modifications apportées par l'auteur de la version/révision sont marquées avec la couleur qui est affichée à côté du nom de l'auteur dans la barre latérale gauche. Vous pouvez utiliser le lien <B>Restaurer</B> sous la version/révision sélectionnée pour la restaurer. <!--To hide the list of the revisions within a certain version, use the <div class = "icon icon-collapse"></div> icon next to the version. To display revisions again, use the <div class = "icon icon-expand"></div> icon.--> </p>
                     <p><img alt="Historique des versions" src="../images/versionhistory.png" /></p>
                     <p>Pour revenir à la version actuelle du document, utilisez l'option <B>Fermer l'historique</B> en haut de la liste des versions.</p>
                 </div>

apps/documenteditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm

@@ -79,12 +79,12 @@
                     <li>нажмите кнопку <b>Добавить</b>.</li>
                 </ol>
                 <p>Комментарий появится на панели <b>Комментарии</b> слева. Любой другой пользователь может ответить на добавленный комментарий, чтобы дать ответ на вопросы или отчитаться о проделанной работе. Для этого надо нажать на ссылку <b>Добавить ответ</b>, расположенную под комментарием, ввести текст ответа в поле ввода и нажать кнопку <b>Ответить</b>.</p>
-                <p>Если вы используете <b>Строгий</b> режим совместного редактирования, новые комментарии, добавленные другими пользователями, станут видимыми только после того, как вы нажмете на значок <img alt="Значок Сохранить и получить обновления" src="../images/saveupdate.png" /> в левом верхнем углу верхней панели инструментов.</p>
-                <p>Фрагмент текста, который вы прокомментировали, будет подсвечен в документе. Для просмотра комментария щелкните по этому фрагменту. Если требуется отключить эту функцию, для этого нажмите на вкладку <b>Файл</b> на верхней панели инструментов, выберите опцию <b>Дополнительные параметры...</b> и снимите флажок <b>Включить отображение комментариев в тексте</b>. В этом случае прокомментированные фрагменты будут подсвечиваться, только когда вы нажмете на значок <img alt="Значок Комментарии" src="../images/commentsicon.png" />.</p>
+                <p>Если вы используете <b>Строгий</b> режим совместного редактирования, новые комментарии, добавленные другими пользователями, станут видимыми только после того, как вы нажмете на значок <div class = "icon icon-saveupdate"></div> в левом верхнем углу верхней панели инструментов.</p>
+                <p>Фрагмент текста, который вы прокомментировали, будет подсвечен в документе. Для просмотра комментария щелкните по этому фрагменту. Если требуется отключить эту функцию, для этого нажмите на вкладку <b>Файл</b> на верхней панели инструментов, выберите опцию <b>Дополнительные параметры...</b> и снимите флажок <b>Включить отображение комментариев в тексте</b>. В этом случае прокомментированные фрагменты будут подсвечиваться, только когда вы нажмете на значок <div class = "icon icon-commentsicon"></div>.</p>
                 <p>Вы можете управлять добавленными комментариями, используя значки в выноске комментария или на панели <b>Комментарии</b> слева:</p>
                 <ul>
                     <li>
-                        отсортируйте добавленные комментарии, нажав на значок <img alt="Значок Сортировка" src="../images/sortcommentsicon.png" />:
+                        отсортируйте добавленные комментарии, нажав на значок <div class = "icon icon-sortcommentsicon"></div>:
                         <ul>
                             <li>по дате: <b>От старых к новым</b> или <b>От новых к станым</b>. Это порядок сортировки выбран по умолчанию.</li>
                             <li>по автору: <b>По автору от А до Я</b> или <b>По автору от Я до А</b></li>
@@ -94,9 +94,9 @@
                             </li>
                         </ul>
                     </li>
-                    <li>отредактируйте выбранный комментарий, нажав значок <img alt="Значок Редактировать" src="../images/editcommenticon.png" />,</li>
-                    <li>удалите выбранный комментарий, нажав значок <img alt="Значок Удалить" src="../images/deletecommenticon.png" />,</li>
-                    <li>закройте выбранное обсуждение, нажав на значок <img alt="Значок Решить" src="../images/resolveicon.png" />, если задача или проблема, обозначенная в комментарии, решена; после этого обсуждение, которое вы открыли своим комментарием, приобретет статус решенного. Чтобы вновь его открыть, нажмите на значок <img alt="Значок Открыть снова" src="../images/resolvedicon.png" />. Если Вы хотите скрыть решенные комментарии, нажмите на вкладку <b>Файл</b> на верхней панели инструментов, выберите опцию <b>Дополнительные параметры...</b> и снимите флажок <b>Включить отображение решенных комментариев</b>. В этом случае решенные комментарии будут подсвечиваться, только когда вы нажмете на значок <img alt="Значок Комментарии" src="../images/commentsicon.png" />,</li>
+                    <li>отредактируйте выбранный комментарий, нажав значок <div class = "icon icon-editcommenticon"></div>,</li>
+                    <li>удалите выбранный комментарий, нажав значок <div class = "icon icon-deletecommenticon"></div>,</li>
+                    <li>закройте выбранное обсуждение, нажав на значок <div class = "icon icon-resolveicon"></div>, если задача или проблема, обозначенная в комментарии, решена; после этого обсуждение, которое вы открыли своим комментарием, приобретет статус решенного. Чтобы вновь его открыть, нажмите на значок <div class = "icon icon-resolvedicon"></div>. Если Вы хотите скрыть решенные комментарии, нажмите на вкладку <b>Файл</b> на верхней панели инструментов, выберите опцию <b>Дополнительные параметры...</b> и снимите флажок <b>Включить отображение решенных комментариев</b>. В этом случае решенные комментарии будут подсвечиваться, только когда вы нажмете на значок <div class = "icon icon-commentsicon"></div>,</li>
                     <li>если вы хотите решить сразу несколько комментариев, на вкладке <b>Совместная работа</b> нажмите выпадающий список <b>Решить</b> и выберите один из вариантов решения комментариев: <b>решить текущие комментарии</b>, <b>решить мои комментарии</b> или <b>решить все комментарии</b> в документе.</li>
                 </ul>
             <h4>Добавление упоминаний</h4>

apps/documenteditor/main/resources/help/ru/HelpfulHints/Navigation.htm

@@ -22,7 +22,7 @@
 			</p>
 			<ul>
 				<li>
-				<b>Скрыть панель инструментов</b> - скрывает верхнюю панель инструментов, которая содержит команды. Вкладки при этом остаются видимыми. Чтобы показать панель инструментов, когда эта опция включена, можно нажать на любую вкладку. Панель инструментов будет отображаться до тех пор, пока вы не щелкнете мышью где-либо за ее пределами.<br /> Чтобы отключить этот режим, нажмите значок <b>Параметры представления</b> <img alt="Значок Параметры представления" src="../images/viewsettingsicon.png" /> и еще раз щелкните по опции <b>Скрыть панель инструментов</b>. Верхняя панель инструментов будет отображаться постоянно.
+				<b>Скрыть панель инструментов</b> - скрывает верхнюю панель инструментов, которая содержит команды. Вкладки при этом остаются видимыми. Чтобы показать панель инструментов, когда эта опция включена, можно нажать на любую вкладку. Панель инструментов будет отображаться до тех пор, пока вы не щелкнете мышью где-либо за ее пределами.<br /> Чтобы отключить этот режим, нажмите значок <b>Параметры представления</b> <div class = "icon icon-viewsettingsicon"></div> и еще раз щелкните по опции <b>Скрыть панель инструментов</b>. Верхняя панель инструментов будет отображаться постоянно.
 				<p class="note"><b>Примечание</b>: можно также дважды щелкнуть по любой вкладке, чтобы скрыть верхнюю панель инструментов или отобразить ее снова.</p>
 				</li>
 				<li><b>Скрыть строку состояния</b> - скрывает самую нижнюю панель, на которой находится <b>Указатель номера страницы</b> и кнопки <b>Масштаба</b>. Чтобы отобразить скрытую <b>строку состояния</b>, щелкните по этой опции еще раз.</li>

apps/documenteditor/main/resources/help/ru/HelpfulHints/Password.htm

@@ -24,7 +24,7 @@
 				<li>перейдите на вкладку <b>Файл</b> на верхней панели инструментов,</li>
 				<li>выберите опцию <b>Защитить</b>,</li>
 				<li>нажмите кнопку <b>Добавить пароль</b>,</li>
-				<li>введите пароль в поле <b>Пароль</b> и продублируйте его в поле <b>Повторите пароль</b>, затем нажмите <b>ОК</b>. Нажмите <img alt="Значок Показать пароль" src="../images/show_password.png" />, чтобы показать или скрыть пароль.</li>
+				<li>введите пароль в поле <b>Пароль</b> и продублируйте его в поле <b>Повторите пароль</b>, затем нажмите <b>ОК</b>. Нажмите <div class = "icon icon-show_password"></div>, чтобы показать или скрыть пароль.</li>
 			</ul>
 			<p><img alt="установка пароля" src="../images/setpassword.png" /></p>
 

apps/documenteditor/main/resources/help/ru/HelpfulHints/Review.htm

@@ -71,10 +71,10 @@
             <li>нажмите направленную вниз стрелку под кнопкой <b>Отклонить</b> и выберите опцию <b>Отклонить текущее изменение</b> (в этом случае изменение будет отклонено, и вы перейдете к следующему доступному изменению) или</li>
             <li>нажмите кнопку <b>Отклонить</b> <div class = "icon icon-review_reject"></div> в выноске с изменением.</li>
         </ul>
-        <p>Чтобы быстро отклонить все изменения, нажмите направленную вниз стрелку под кнопкой <img alt="Кнопка Отклонить" src="../images/review_rejecttoptoolbar.png" /> <b>Отклонить</b> и выберите опцию <b>Отклонить все изменения</b>.</p>
+        <p>Чтобы быстро отклонить все изменения, нажмите направленную вниз стрелку под кнопкой <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Отклонить</b> и выберите опцию <b>Отклонить все изменения</b>.</p>
         <p>Если вам нужно принять или отклонить одно изменение, щелкните по нему правой кнопкой мыши и в контекстном меню выберите пункт <b>Принять изменение</b> или <b>Отклонить изменение</b>.</p>
         <p><img alt="Принять/Отклонить выпадающий список" src="../images/acceptreject_dropdown.png" /></p>
-        <p class="note"><b>Примечание</b>: если вы рецензируете документ, опции <b>Принять</b> и <b>Отклонить</b> для вас недоступны. Вы можете удалить свои изменения с помощью значка <img alt="Кнопка Удалить изменение" src="../images/review_delete.png" /> внутри всплывающего окна с изменением.</p>
+        <p class="note"><b>Примечание</b>: если вы рецензируете документ, опции <b>Принять</b> и <b>Отклонить</b> для вас недоступны. Вы можете удалить свои изменения с помощью значка <div class = "icon icon-review_delete"></div> внутри всплывающего окна с изменением.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/ru/HelpfulHints/Search.htm

@@ -15,13 +15,13 @@
 				<input id="search" class="searchBar" placeholder="Поиск" type="text" onkeypress="doSearch(event)">
 			</div>
 			<h1>Функция поиска и замены</h1>
-			<p>Чтобы найти нужные символы, слова или фразы, использованные в документе, который Вы в данный момент редактируете, нажмите на значок <img alt="Значок Поиск" src="../images/searchicon.png" />, расположенный на левой боковой панели, или используйте сочетание клавиш <em>Ctrl+F</em>. </p>
+			<p>Чтобы найти нужные символы, слова или фразы, использованные в документе, который Вы в данный момент редактируете, нажмите на значок <div class = "icon icon-searchicon"></div>, расположенный на левой боковой панели, или используйте сочетание клавиш <em>Ctrl+F</em>. </p>
 			<p>Откроется окно <b>Поиск и замена</b>:</p>
 			<p><img alt="Окно Поиск и замена" src="../images/search_window.png" /></p>
 			<ol>
 				<li>Введите запрос в соответствующее поле ввода данных.</li>
 				<li>
-					Задайте параметры поиска, нажав на значок <img alt="Значок Параметры поиска" src="../images/search_options.png" /> и отметив нужные опции:
+					Задайте параметры поиска, нажав на значок <div class = "icon icon-search_options"></div> и отметив нужные опции:
 					<ul>
 						<li><b>С учетом регистра</b> - используется для поиска только тех вхождений, которые набраны в таком же регистре, что и Ваш запрос, (например, если Вы ввели запрос 'Редактор', такие слова, как 'редактор' или 'РЕДАКТОР' и т.д. не будут найдены). Чтобы отключить этот параметр, щелкните по флажку еще раз.</li>
 						<li><b>Выделить результаты</b> - используется для подсветки всех найденных вхождений сразу. Чтобы отключить этот параметр и убрать подсветку, щелкните по этой опции еще раз.</li>
@@ -29,7 +29,7 @@
 				</li>
 				<li>
 					Нажмите на одну из <b>кнопок со стрелками</b> в нижнем правом углу окна.
-					Поиск будет выполняться или по направлению к началу документа (если нажата кнопка <img alt="Кнопка Стрелка влево" src="../images/searchupbutton.png" />), или по направлению к концу документа (если нажата кнопка <img alt="Кнопка Стрелка вправо" src="../images/searchdownbutton.png" />), начиная с текущей позиции.
+					Поиск будет выполняться или по направлению к началу документа (если нажата кнопка <div class = "icon icon-searchupbutton"></div>), или по направлению к концу документа (если нажата кнопка <div class = "icon icon-searchdownbutton"></div>), начиная с текущей позиции.
 					<p class="note"><b>Примечание</b>: при включенном параметре <b>Выделить результаты</b> используйте эти кнопки для навигации по подсвеченным результатам.</p>
 				</li>
 			</ol>

apps/documenteditor/main/resources/help/ru/HelpfulHints/Viewer.htm

@@ -4,6 +4,7 @@
 		<title>Просмотрщик документов ONLYOFFICE</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Описание инструментов навигации Просмотрщика документов ONLYOFFICE" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -53,28 +54,28 @@
             <ol>
                 <li>
                     Верхняя панель инструментов предоставляет доступ к вкладкам <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">Файл</a> и <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Плагины</a>, а также к следующим занчкам:
-                    <p><img alt="Напечатать файл" src="../images/print.png" /> <b>Напечатать</b> позволяет распечатать файл;</p>
-                    <p><img alt="Скачать файл" src="../images/downloadicon.png" /> <b>Скачать</b> позволяет скачать файл на ваш компьютер;</p>
-                    <p><img alt="Управление правами доступа к документу" src="../images/access_rights.png" /><b> Управление правами доступа к документу</b> (доступно только для <em>онлайн-версии</em> версии) позволяет непосредственно из документа управлять пользователями, имеющими доступ к файлу: приглашать новых пользователей, предоставляя им права на редактирование, просмотр, комментирование, заполнение форм или рецензирование документа, или запрещать доступ к файлу для некоторых пользователей.</p>
-                    <p><img alt="Открыть расположение файла" src="../images/gotodocuments.png" /> <b>Открыть расположение файла</b> в <em>десктопной версии</em> позволяет в окне <b>Проводника</b> открыть папку, в которой хранится файл. В <em>онлайн-версии</em> позволяет открыть в новой вкладке браузера папку модуля <b>Документы</b>, в которой хранится файл;</p>
-                    <p><img alt="Избранное" src="../images/favorites_icon.png" /> <b>Добавить в избранное / Удалить из избранного</b> чтобы легко и быстро найти файл, щелкните пустую звездочку. Этот файл будет добавлен в избранное. Щелкните заполненную звездочку, чтобы удалить файл из избранного. Добавленный файл — это ярлык, поэтому сам файл остается в исходном месте. Удаление файла из избранного не приводит к удалению файла из его исходного местоположения;</p>
-                    <p><img alt="Параметры вида" src="../images/viewsettingsicon.png" /> <b>Параметры вида</b> позволяет настроить <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Параметры представления</a> и получить доступ к <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Дополнительным параметрам</a> редактора;</p>
-                    <p><img alt="Пользователь" src="../images/usericon.png" /> <b>Пользователь</b>  отображает имя пользователя при наведении на него курсора мыши.</p>
+                    <p><div class = "icon icon-print"></div> <b>Напечатать</b> позволяет распечатать файл;</p>
+                    <p><div class = "icon icon-downloadicon"></div> <b>Скачать</b> позволяет скачать файл на ваш компьютер;</p>
+                    <p><div class = "icon icon-access_rights"></div><b> Управление правами доступа к документу</b> (доступно только для <em>онлайн-версии</em> версии) позволяет непосредственно из документа управлять пользователями, имеющими доступ к файлу: приглашать новых пользователей, предоставляя им права на редактирование, просмотр, комментирование, заполнение форм или рецензирование документа, или запрещать доступ к файлу для некоторых пользователей.</p>
+                    <p><div class = "icon icon-gotodocuments"></div> <b>Открыть расположение файла</b> в <em>десктопной версии</em> позволяет в окне <b>Проводника</b> открыть папку, в которой хранится файл. В <em>онлайн-версии</em> позволяет открыть в новой вкладке браузера папку модуля <b>Документы</b>, в которой хранится файл;</p>
+                    <p><div class = "icon icon-favorites_icon"></div> <b>Добавить в избранное / Удалить из избранного</b> чтобы легко и быстро найти файл, щелкните пустую звездочку. Этот файл будет добавлен в избранное. Щелкните заполненную звездочку, чтобы удалить файл из избранного. Добавленный файл — это ярлык, поэтому сам файл остается в исходном месте. Удаление файла из избранного не приводит к удалению файла из его исходного местоположения;</p>
+                    <p><div class = "icon icon-viewsettingsicon"></div> <b>Параметры вида</b> позволяет настроить <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Параметры представления</a> и получить доступ к <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Дополнительным параметрам</a> редактора;</p>
+                    <p><div class = "icon icon-usericon"></div> <b>Пользователь</b>  отображает имя пользователя при наведении на него курсора мыши.</p>
                 </li>
                 <li>В <b>Строке состояния</b>, расположенной в нижней части окна <b>Просмотрщика документов ONLYOFFICE</b>, указывается номер страницы и отображаются фоновые уведомления о состоянии. В строке находятся следующие инструменты:
-                    <p><img alt="Инструмент выделения" src="../images/selectiontool.png" /> <b>Инструмент выделения</b> позволяет выделять текст в файле.</p>
-                    <p><img alt="Инструмент Рука" src="../images/handtool.png" /> <b>Инструмент "Рука"</b> позволяет перетаскивать и прокручивать страницу.</p>
-                    <p><img alt="По размеру страницы" src="../images/fitpage.png" /> <b>По размеру страницы</b> позволяет изменить размер страницы, чтобы на экране отображалась вся страница.</p>
-                    <p><img alt="По ширине" src="../images/fitwidth.png" /> <b>По ширине</b> позволяет изменить размер страницы, чтобы она соответствовала ширине экрана.</p>
+                    <p><div class = "icon icon-selectiontool"></div> <b>Инструмент выделения</b> позволяет выделять текст в файле.</p>
+                    <p><div class = "icon icon-handtool"></div> <b>Инструмент "Рука"</b> позволяет перетаскивать и прокручивать страницу.</p>
+                    <p><div class = "icon icon-fitpage"></div> <b>По размеру страницы</b> позволяет изменить размер страницы, чтобы на экране отображалась вся страница.</p>
+                    <p><div class = "icon icon-fitwidth"></div> <b>По ширине</b> позволяет изменить размер страницы, чтобы она соответствовала ширине экрана.</p>
                     <p><img alt="Масштаб" src="../images/zoomadjusting.png" /> <a href="../HelpfulHints/Navigation.htm#navigationtools" onclick="onhyperlinkclick(this)"><b>Масштаб</b></a> позволяет увеличивать и уменьшать масштаб страницы.</p>
                 </li>
                 <li>
                     На <b>Левой боковай панели</b> находятся следующие значки:
                     <ul>
-                        <li><img alt="Значок Поиск" src="../images/searchicon.png" /> - позволяет использовать инструмент <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">поиска и замены</a>,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Значок Чата" src="../images/chaticon.png" /> (доступно только в <em>онлайн-версии</em>) - позволяет открыть панель <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Чата</a>,</li>
+                        <li><div class = "icon icon-searchicon"></div> - позволяет использовать инструмент <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">поиска и замены</a>,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-chaticon"></div> (доступно только в <em>онлайн-версии</em>) - позволяет открыть панель <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Чата</a>,</li>
                         <li>
-                            <img alt="Значок Навигация" src="../images/navigationicon.png" /> - позволяет открыть панель <b>Навигации</b>, на которой отображается список всех заголовков с учетом соответствующих уровней вложенности. Щелкните на заголовок, чтобы перейти к странице, содержащую выбранный заголовок.
+                            <div class = "icon icon-navigationicon"></div> - позволяет открыть панель <b>Навигации</b>, на которой отображается список всех заголовков с учетом соответствующих уровней вложенности. Щелкните на заголовок, чтобы перейти к странице, содержащую выбранный заголовок.
                             <p><img alt="NavigationPanel" src="../images/navigationpanel_viewer.png" />
                             <p>Щелкните правой кнопкой мыши по заголовку в списке и используйте один из доступных пунктов меню:</p>
                             <ul>
@@ -83,19 +84,19 @@
                                 <li><b>Развернуть до уровня</b> - чтобы развернуть структуру заголовков до выбранного уровня. Например, если выбрать <em>уровень 3</em>, то будут развернуты уровни 1, 2 и 3, а уровень 4 и все более низкие уровни будут свернуты.</li>
                             </ul>
                             <p>Чтобы вручную развернуть или свернуть определенные уровни заголовков, используйте стрелки слева от заголовков.</p>
-                            <p>Чтобы закрыть панель <b>Навигации</b>, еще раз нажмите на значок <img alt="Значок Навигация" src="../images/navigationicon.png" /> <b>Навигация</b> на левой боковой панели.</p>
+                            <p>Чтобы закрыть панель <b>Навигации</b>, еще раз нажмите на значок <div class = "icon icon-navigationicon"></div> <b>Навигация</b> на левой боковой панели.</p>
                         </li>
                         <li>
-                            <img alt="Эскизы страниц" src="../images/pagethumbnails.png" /> - позволяет отображать эскизы страниц для быстрой навигаци по документу. Щелкните на значок <img alt="Значок Настройки эскизов" src="../images/search_options.png" /> на панели <b>Миниатюры страниц</b>, чтобы получить доступ к <b>Параметрам эскизов</b>:
+                            <div class = "icon icon-pagethumbnails"></div> - позволяет отображать эскизы страниц для быстрой навигаци по документу. Щелкните на значок <div class = "icon icon-search_options"></div> на панели <b>Миниатюры страниц</b>, чтобы получить доступ к <b>Параметрам эскизов</b>:
                             <p><img alt="Параметры эскизов страниц" src="../images/pagethumbnails_settings.png" /></p>
                             <ul>
                                 <li>Перетащите ползунок, чтобы изменить размер эскиза,</li>
                                 <li>Чтобы указать область, которая в данный момент находится на экране, активируйте опцию <b>Выделить видимую часть страницы</b>. Данная опция включена по умолчанию. Чтобы отключить ее, щелкните еще раз.</li>
                             </ul>
-                            <p>Чтобы закрыть панель <b>Эскизов страниц</b>, еще раз нажмите на значок <img alt="Эскизы страниц" src="../images/pagethumbnails.png" /> <b>Эскизы страниц</b> на левой боковой панели.</p>
+                            <p>Чтобы закрыть панель <b>Эскизов страниц</b>, еще раз нажмите на значок <div class = "icon icon-pagethumbnails"></div> <b>Эскизы страниц</b> на левой боковой панели.</p>
                         </li>
-                        <li><img alt="Значок Обратная связь и поддержка" src="../images/feedbackicon.png" /> - позволяет обратиться в службу технической поддержки,</li>
-                        <li><img alt="Значок О программе" src="../images/abouticon.png" /> - позволяет посмотреть информацию о программе.</li>
+                        <li><div class = "icon icon-feedbackicon"></div> - позволяет обратиться в службу технической поддержки,</li>
+                        <li><div class = "icon icon-abouticon"></div> - позволяет посмотреть информацию о программе.</li>
                     </ul>
                 </li>
             </ol>            

apps/documenteditor/main/resources/help/ru/ProgramInterface/FormsTab.htm

@@ -4,6 +4,7 @@
     <title>Вкладка Формы</title>
     <meta charset="utf-8" />
     <meta name="description" content="Знакомство с пользовательским интерфейсом редактора документов - Вкладка Формы" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/ru/ProgramInterface/ProgramInterface.htm

@@ -38,7 +38,7 @@
                     </ul>                    
                 </li>
                 <li>На <b>Верхней панели инструментов</b> отображается набор команд редактирования в зависимости от выбранной вкладки меню. В настоящее время доступны следующие вкладки: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">Файл</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Главная</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Вставка</a>, <a href="../ProgramInterface/LayoutTab.htm" onclick="onhyperlinkclick(this)">Макет</a>, <a href="../ProgramInterface/ReferencesTab.htm" onclick="onhyperlinkclick(this)">Ссылки</a>, <a href="../ProgramInterface/FormsTab.htm" onclick="onhyperlinkclick(this)">Формы</a> (доступно только для файлов DOCXF) <a href="../ProgramInterface/ReviewTab.htm" onclick="onhyperlinkclick(this)">Совместная работа</a>, <span class="desktopDocumentFeatures">Защита,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Плагины</a>.
-                <p>Опции <img alt="Значок Копировать" src="../images/copy.png" /> <b>Копировать</b> и <img alt="Значок Вставить" src="../images/paste.png" /> <b>Вставить</b> всегда доступны в левой части <b>Верхней панели инструментов</b>, независимо от выбранной вкладки.</p>
+                <p>Опции <div class = "icon icon-copy"></div> <b>Копировать</b> и <div class = "icon icon-paste"></div> <b>Вставить</b> всегда доступны в левой части <b>Верхней панели инструментов</b>, независимо от выбранной вкладки.</p>
                 </li>
                 <li>В <b>Строке состояния</b>, расположенной внизу окна редактора, находится указатель номера страницы, отображаются некоторые оповещения (например, "Все изменения сохранены", "Соединение потеряно", когда нет соединения, и редактор пытается переподключиться и т.д.), с ее помощью также можно <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">задать язык текста, включить проверку орфографии</a>, включить <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">режим отслеживания изменений</a>, настроить <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">масштаб</a>.</li>
                 <li>На <b>Левой боковой панели</b> находятся следующие значки: 

apps/documenteditor/main/resources/help/ru/ProgramInterface/ViewTab.htm

@@ -4,6 +4,7 @@
         <title>Вкладка Вид</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Знакомство с пользовательским интерфейсом редактора документов - Вкладка Вид" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/ru/UsageInstructions/CopyPasteUndoRedo.htm

@@ -31,7 +31,7 @@
             <p class="note"><b>Примечание</b>: вместо того чтобы вырезать и вставлять текст в рамках одного и того же документа, можно просто выделить нужный фрагмент текста и перетащить его мышкой в нужное место.</p>
       <h3>Использование функции Специальная вставка</h3>
             <p class="note"><b>Примечание</b>: Во время совсестной работы, <b>Специальная вставка</b> доступна только в <b>Строгом</b> режиме редактирования.</p>
-            <p>После вставки скопированного текста рядом со вставленным фрагментом текста появляется кнопка <b>Специальная вставка</b> <img alt="Специальная вставка" src="../images/pastespecialbutton.png" />. Нажмите на эту кнопку, чтобы выбрать нужный параметр вставки. </p>
+            <p>После вставки скопированного текста рядом со вставленным фрагментом текста появляется кнопка <b>Специальная вставка</b> <div class = "icon icon-pastespecialbutton"></div>. Нажмите на эту кнопку, чтобы выбрать нужный параметр вставки. </p>
             <p>При вставке текста абзаца или текста в автофигурах доступны следующие параметры:</p>
             <ul>
                 <li><em>Вставить</em> - позволяет вставить скопированный текст, сохранив его исходное форматирование.</li>

apps/documenteditor/main/resources/help/ru/UsageInstructions/CreateFillableForms.htm

@@ -4,6 +4,7 @@
     <title>Создание заполняемых форм</title>
     <meta charset="utf-8" />
     <meta name="description" content="Создавайте заполняемые формы для расширенных возможностей работы с формами" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -32,7 +33,7 @@
                     <li>поместите курсор в то место, куда вы хотите поместить текстовое поле,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="текстовое поле иконка" src="../images/text_field_icon.png" /> <b>Текстовое поле</b>.
+                        щелкните на значок <div class = "icon icon-text_field_icon"></div> <b>Текстовое поле</b>.
                     </li>
                 </ol>
                 <p><img alt="текстовое поле" src="../images/text_field_inserted.png" /></p>
@@ -56,8 +57,8 @@
                             <ul>
                                 <li><b>Ширина ячейки</b>: введите необходимое значение или используйте стрелки справа, чтобы установить ширину вставляемого текстового поля. Текст внутри будет выровнен в соответствии с указанным значением.</li>
                             </ul>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого текстового поля. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" /> чтобы выбрать цвет фона вставляемого текстового поля. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого текстового поля. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div> чтобы выбрать цвет фона вставляемого текстового поля. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
                         <li><b>Автоподбор</b>: данный параметр можно включить только если выбран параметр <b>Поле фиксированного размера</b>. Установите флажок, чтобы размер шрифта автоматически соответствовал размеру поля.</li>
                         <li><b>Многострочное поле</b>: данный параметр можно включить только если выбран параметр <b>Поле фиксированного размера</b>. Установите флажок, чтобы создать поле формы с несколькими строками, в противном случае текст будет занимать только одну строку.</li>
                     </ul>
@@ -77,7 +78,7 @@
                     <li>поместите курсор в то место, куда вы хотите поместить поле со списком,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="значок поле со списком" src="../images/combo_box_icon.png" /> <b>Поле со списком</b>.
+                        щелкните на значок <div class = "icon icon-combo_box_icon"></div> <b>Поле со списком</b>.
                     </li>
                 </ol>
                 <p><img alt="поле со списком" src="../images/combo_box_inserted.png" /></p>
@@ -91,13 +92,13 @@
                             <b>Подсказка</b>: введите текст, который будет отображаться в виде подсказки при наведении курсора на поле со списком.
                             <br /> <img alt="подсказка" src="../images/combo_box_tip.png" />
                         </li>
-                        <li><b>Параметры значений</b>: добавьте <img alt="добавить значение" src="../images/combo_add_values.png" /> новые значения, удалите <img alt="удалить значения" src="../images/combo_delete_values.png" /> их или переместите их вверх <img alt="поднять значение" src="../images/combo_values_up.png" /> и <img alt="опустить значение" src="../images/combo_values_down.png" /> вниз списка.</li>
+                        <li><b>Параметры значений</b>: добавьте <div class = "icon icon-combo_add_values"></div> новые значения, удалите <div class = "icon icon-combo_delete_values"></div> их или переместите их вверх <div class = "icon icon-combo_values_up"></div> и <div class = "icon icon-combo_values_down"></div> вниз списка.</li>
                         <li>
                             <b>Поле фиксированного размера</b>: установите флажок, чтобы создать поле фиксированного размера.<br />
                             Поле фиксированного размера выглядит как автофигура. Вы можете установить для него стиль обтекания, а также отрегулировать его положение.
                         </li>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого поля со списком. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" /> чтобы выбрать цвет фона вставляемого поля со списком. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого поля со списком. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div> чтобы выбрать цвет фона вставляемого поля со списком. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
                     </ul>
                 </p>
                 <p>Чтобы открыть список элементов и выбрать нужный, нажмите кнопку со стрелкой справа от добавленного <b>Поля со списком</b>. После выбора необходимого элемента вы можете полностью или частично отредактировать отображаемый текст, заменив его своим.</p>
@@ -116,7 +117,7 @@
                     <li>поместите курсор в то место, куда вы хотите поместить выпадающий список,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="значок выпадающий список" src="../images/dropdown_list_icon.png" /> <b>Выпадающий список</b>.
+                        щелкните на значок <div class = "icon icon-dropdown_list_icon"></div> <b>Выпадающий список</b>.
                     </li>
                 </ol>
                 <p><img alt="выпадающий список" src="../images/combo_box_inserted.png" /></p>
@@ -130,13 +131,13 @@
                             <b>Подсказка</b>: введите текст, который будет отображаться в виде подсказки при наведении курсора на выпадающий список.
                             <br /> <img alt="подсказка" src="../images/combo_box_tip.png" />
                         </li>
-                        <li><b>Параметры значений</b>: добавьте <img alt="добавить значение" src="../images/combo_add_values.png" /> новые значения, удалите <img alt="удалить значения" src="../images/combo_delete_values.png" /> их или переместите их вверх <img alt="поднять значение" src="../images/combo_values_up.png" /> и <img alt="опустить значение" src="../images/combo_values_down.png" /> вниз списка.</li>
+                        <li><b>Параметры значений</b>: добавьте <div class = "icon icon-combo_add_values"></div> новые значения, удалите <div class = "icon icon-combo_delete_values"></div> их или переместите их вверх <div class = "icon icon-combo_values_up"></div> и <div class = "icon icon-combo_values_down"></div> вниз списка.</li>
                         <li>
                             <b>Поле фиксированного размера</b>: установите флажок, чтобы создать поле фиксированного размера.<br />
                             Поле фиксированного размера выглядит как автофигура. Вы можете установить для него стиль обтекания, а также отрегулировать его положение.
                         </li>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого поля выпадающего списка. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" /> чтобы выбрать цвет фона вставляемого поля выпадающего списка. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого поля выпадающего списка. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div> чтобы выбрать цвет фона вставляемого поля выпадающего списка. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
                     </ul>
                 </p>
                 <p>Чтобы открыть список элементов и выбрать нужный, нажмите кнопку со стрелкой справа от добавленного <b>Выпадающего списка</b>. После выбора необходимого элемента вы можете полностью или частично отредактировать отображаемый текст, заменив его своим.</p>
@@ -154,10 +155,10 @@
                     <li>поместите курсор в то место, куда вы хотите поместить флажок,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="значок флажок" src="../images/checkbox_icon.png" /> <b>Флажок</b>.
+                        щелкните на значок <div class = "icon icon-checkbox_icon"></div> <b>Флажок</b>.
                     </li>
                 </ol>
-                <p><img alt="поле флажка" src="../images/checkbox_inserted.png" /></p>
+                <p><div class = "big big-checkbox_inserted"></div></p>
                 <p>В указанном месте добавится поле флажка, а на правой боковой панели откроется вкладка <b>Параметры формы</b>.</p>
                 <p id="checkbox_settings">
                     <img class="floatleft" alt="параметры форм флажков" src="../images/checkbox_settings.png" />
@@ -171,12 +172,12 @@
                             <b>Поле фиксированного размера</b>: установите флажок, чтобы создать поле фиксированного размера.<br />
                             Поле фиксированного размера выглядит как автофигура. Вы можете установить для него стиль обтекания, а также отрегулировать его положение.
                         </li>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого поля флажка. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет фона вставляемого поля флажка. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого поля флажка. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет фона вставляемого поля флажка. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
                     </ul>
                 </p>
                 <p>Чтобы установить флажок, щелкните по нему один раз.</p>
-                <p><img alt="выделенный флажок" src="../images/checkbox_checked.png" /></p>
+                <p><div class = "big big-checkbox_checked"></div></p>
             </details>
         </div>
 
@@ -190,10 +191,10 @@
                     <li>поместите курсор в то место, куда вы хотите поместить поле переключателя,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="значок переключатель" src="../images/radio_button_icon.png" /> <b>Переключатель</b>.
+                        щелкните на значок <div class = "icon icon-radio_button_icon"></div> <b>Переключатель</b>.
                     </li>
                 </ol>
-                <p><img alt="поле переключателя" src="../images/radio_button_inserted.png" /></p>
+                <p><div class = "big big-radio_button_inserted"></div></p>
                 <p>В указанном месте добавится поле переключателя, а на правой боковой панели откроется вкладка <b>Параметры формы</b>.</p>
                 <p id="radio_button_settings">
                     <img class="floatleft" alt="параметры форм переключателя" src="../images/radio_button_settings.png" />
@@ -207,12 +208,12 @@
                             <b>Поле фиксированного размера</b>: установите флажок, чтобы создать поле фиксированного размера.<br />
                             Поле фиксированного размера выглядит как автофигура. Вы можете установить для него стиль обтекания, а также отрегулировать его положение.
                         </li>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого поля переключателя. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" /> чтобы выбрать цвет фона вставляемого поля переключателя. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого поля переключателя. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div> чтобы выбрать цвет фона вставляемого поля переключателя. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
                     </ul>
                 </p>
                 <p>Чтобы включить переключатель, щелкните его один раз.</p>
-                <p><img alt="включенный переключатель" src="../images/radio_button_checked.png" /></p>
+                <p><div class = "big big-radio_button_checked"></div></p>
             </details>
         </div>
 
@@ -226,10 +227,10 @@
                     <li>поместите курсор в то место, куда вы хотите поместить поле изображения,</li>
                     <li>перейдите на вкладку <b>Формы</b> верхней панели инструментов,</li>
                     <li>
-                        щелкните на значок <img alt="значок поля изображения" src="../images/image_form_icon.png" /> <b>Изображение</b>.
+                        щелкните на значок <div class = "icon icon-image_form_icon"></div> <b>Изображение</b>.
                     </li>
                 </ol>
-                <p><img alt="поле изображение" src="../images/image_form_inserted.png" /></p>
+                <p><div class = "big big-image_form_inserted"></div></p>
                 <p>В указанном месте добавится поле изображения, а на правой боковой панели откроется вкладка <b>Параметры формы</b>.</p>
                 <p id="image_form_settings">
                     <img class="floatleft" alt="параметры форм изображения" src="../images/image_form_settings.png" />
@@ -242,12 +243,12 @@
                         <li><b>Когда масштабировать</b>: откройте раскрывающееся меню и выберите соответствующий вариант изменения размера изображения: <b>Всегда</b>, <b>Никогда</b>, когда <b>Изображение слишком большое</b> или когда <b>Изображение слишком маленькое</b>. Выбранное изображение будет масштабироваться внутри поля соответствующим образом.</li>
                         <li><b>Сохранять пропорции</b>: установите этот флажок, чтобы сохранить соотношение сторон изображения без искажения. Когда флажок установлен, используйте вертикальный и горизонтальный ползунки, чтобы расположить изображение внутри вставленного поля. Когда флажок снят, ползунки позиционирования неактивны.</li>
                         <li><b>Выбрать изображение</b>: нажмите эту кнопку, чтобы загрузить изображение <b>Из файла</b>, <b>По URL</b> или <b>Из хранилища</b>.</li>
-                        <li><b>Цвет границ</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" />, чтобы выбрать цвет границ вставляемого поля изображения. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
-                        <li><b>Цвет фона</b>: щелкните на значок <img alt="без заливки" src="../images/nofill.png" /> чтобы выбрать цвет фона вставляемого поля изображения. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет границ</b>: щелкните на значок <div class = "icon icon-nofill"></div>, чтобы выбрать цвет границ вставляемого поля изображения. Выберите подходящий цвет из палитры. При необходимости вы можете создать новый <b>Пользовательский цвет</b>.</li>
+                        <li><b>Цвет фона</b>: щелкните на значок <div class = "icon icon-nofill"></div> чтобы выбрать цвет фона вставляемого поля изображения. Выберите подходящий цвет из палитры <b>Цветов темы</b>, <b>Стандартных цветов</b> или создайте новый <b>Пользовательский цвет</b>.</li>
 
                     </ul>
                 </p>
-                <p>Чтобы заменить изображение, щелкните значок изображения <img alt="значок изображения" src="../images/image.png" /> над границей поля формы и выберите другое.</p>
+                <p>Чтобы заменить изображение, щелкните значок изображения <div class = "icon icon-image"></div> над границей поля формы и выберите другое.</p>
                 <p>Чтобы <b>настроить</b> параметры изображения, откройте вкладку <b>Параметры изображения</b> на правой боковой панели. Чтобы узнать больше, пожалуйста, прочтите руководство по <a href="../UsageInstructions/InsertImages.htm">изменению параметров изображения</a>.</p>
             </details>
         </div>
@@ -277,7 +278,7 @@
         <p class="note">
             <b>Примечание</b>: После входа в режим <b>Просмотра формы</b> все возможности редактирования станут недоступны.
         </p>
-        <p>Нажмите кнопку <img alt="значок режим просмотра форм" src="../images/view_form_icon.png" /> <b>Просмотреть форму</b> на вкладке <b>Формы</b> верхней панели инструментов,  чтобы увидеть, как все вставленные формы будут отображаться в вашем документе.</p>
+        <p>Нажмите кнопку <div class = "icon icon-view_form_icon"></div> <b>Просмотреть форму</b> на вкладке <b>Формы</b> верхней панели инструментов,  чтобы увидеть, как все вставленные формы будут отображаться в вашем документе.</p>
         <p><img alt="просмотр форм включен" src="../images/view_form_active2.png" /></p>
         <p>Чтобы <b>выйти</b> из режима просмотра, снова щелкните тот же значок.</p>
 
@@ -290,19 +291,19 @@
         <p>Чтобы <b>сделать поле обязательным для заполнения</b>, установите флажок напротив опции <b>Обязательно</b>. Границы обязательного поля будут окрашены в красный.</p>
 
         <h2>Блокировка полей форм</h2>
-        <p>Чтобы <b>предотвратить дальнейшее редактирование</b> вставленного поля формы, щелкните значок <img alt="значок блокировка полей форм" src="../images/lock_form_icon.png" /> <b>Заблокировать</b>. Заполнение полей остается доступным.</p>
+        <p>Чтобы <b>предотвратить дальнейшее редактирование</b> вставленного поля формы, щелкните значок <div class = "icon icon-lock_form_icon"></div> <b>Заблокировать</b>. Заполнение полей остается доступным.</p>
 
         <h2>Очистка полей форм</h2>
-        <p>Чтобы очистить все вставленные поля и удалить все значения, на верхней панели инструментов щелкните кнопку <img alt="значок очистить все поля" src="../images/clear_fields_icon.png" /> <b>Очистить все поля</b>.</p>
+        <p>Чтобы очистить все вставленные поля и удалить все значения, на верхней панели инструментов щелкните кнопку <div class = "icon icon-clear_fields_icon"></div> <b>Очистить все поля</b>.</p>
 
         <h2>Заполнение и отправка форм</h2>
         <p><img alt="панель заполнения форм" src="../images/fill_form.png" /></p>
         <p>Перейдите на вкладку <b>Формы</b> верхней панели инструментов.</p>
-        <p>Перемещайтесь по полям формы с помощью кнопок <img alt="Значок предыдущее поле" src="../images/previous_field_icon.png" /> <b>Предыдущее поле</b> и <img alt="Значок следующее поле" src="../images/next_field_icon.png" /> <b>Следующее поле</b> на верхней панели инструментов.</p>
-        <p>Нажмите кнопку <img alt="Сохранить форму" src="../images/save_form_icon.png" /> <b>Сохранить как заполняемый документ OFORM</b> на верхней панели инструментов, чтобы сохранить форму в расширением <b>OFORM</b> для дальнейшего заполнения. Вы можете сохранить любое количество файлов <b>OFORM</b>.</p>
+        <p>Перемещайтесь по полям формы с помощью кнопок <div class = "icon icon-previous_field_icon"></div> <b>Предыдущее поле</b> и <div class = "icon icon-next_field_icon"></div> <b>Следующее поле</b> на верхней панели инструментов.</p>
+        <p>Нажмите кнопку <div class = "icon icon-save_form_icon"></div> <b>Сохранить как заполняемый документ OFORM</b> на верхней панели инструментов, чтобы сохранить форму в расширением <b>OFORM</b> для дальнейшего заполнения. Вы можете сохранить любое количество файлов <b>OFORM</b>.</p>
 
         <h2>Удаление полей форм</h2>
-        <p>Чтобы удалить поле формы и оставить все его содержимое, выберите его и щелкните значок <img alt="значок удалить форму" src="../images/combo_delete_values.png" /> <b>Удалить</b> (убедитесь, что поле не заблокировано) или нажмите клавишу <b>Delete</b> на клавиатуре.</p>
+        <p>Чтобы удалить поле формы и оставить все его содержимое, выберите его и щелкните значок <div class = "icon icon-combo_delete_values"></div> <b>Удалить</b> (убедитесь, что поле не заблокировано) или нажмите клавишу <b>Delete</b> на клавиатуре.</p>
     </div>
 </body>
 </html>

apps/documenteditor/main/resources/help/ru/UsageInstructions/CreateTableOfContents.htm

@@ -63,7 +63,7 @@
             <h2>Изменение созданного оглавления</h2>
             <p><b>Обновление оглавления</b></p>
             <p>После того, как оглавление будет создано, вы можете продолжить редактирование текста, добавляя новые главы, изменяя их порядок, удаляя какие-то абзацы или дополняя текст, относящийся к заголовку, так что номера страниц, соответствующие предыдущему или следующему разделу могут измениться. В этом случае используйте опцию <b>Обновление</b>, чтобы автоматически применить все изменения.</p>
-            <p>Нажмите на стрелку рядом со значком <img alt="Значок Обновление" src="../images/tocrefreshicon.png" /> <b>Обновление</b> на вкладке <b>Ссылки</b> верхней панели инструментов и выберите в меню нужную опцию:</p>
+            <p>Нажмите на стрелку рядом со значком <div class = "icon icon-tocrefreshicon"></div> <b>Обновление</b> на вкладке <b>Ссылки</b> верхней панели инструментов и выберите в меню нужную опцию:</p>
             <ul>
                 <li><b>Обновить целиком</b> - чтобы добавить в оглавление заголовки, добавленные в документ, удалить те, которые были удалены из документа, обновить отредактированные (переименованные) заголовки, а также обновить номера страниц.</li>
                 <li><b>Обновить только номера страниц</b> - чтобы обновить номера страниц, не применяя изменения к заголовкам.</li>

apps/documenteditor/main/resources/help/ru/UsageInstructions/FillingOutForm.htm

@@ -4,6 +4,7 @@
     <title>Заполнение формы</title>
     <meta charset="utf-8" />
     <meta name="description" content="Заполняйте шаблон формы" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -21,11 +22,11 @@
                         Откройте файл OFORM.
                         <p><img alt="oform" src="../images/oform.png" /><p>
                     </li>
-                    <li>Заполните все необходимые поля. Границы обязательных полей окрашены в красный. Используйте <img alt="Стрелка заполнения формы" src="../images/arrows_formfilling.png" /> или <img alt="Следующее поле заполнение форм" src="../images/next_formfilling.png" /> на верхней панели инструментов для навигации между полями или щелкните поле, которое вы хотите заполнить.
+                    <li>Заполните все необходимые поля. Границы обязательных полей окрашены в красный. Используйте <div class = "icon icon-arrows_formfilling"></div> или <img alt="Следующее поле заполнение форм" src="../images/next_formfilling.png" /> на верхней панели инструментов для навигации между полями или щелкните поле, которое вы хотите заполнить.
                     <li>Используйте кнопку <b>Очистить все поля</b> <img alt="Очистить все заполнение формы" src="../images/clearall_formfilling.png" />, чтобы очистить все поля.</li>
                     <li>Заполнив все поля, нажмите кнопку <b>Сохранить как PDF</b>, чтобы сохранить форму на свой компьютер в виде файла PDF.</li> 
                     <li>
-                        Нажмите кнопку <img alt="Кнопка еще" src="../images/morebutton.png" /> в правом верхнем углу панели инструментов, чтобы открыть дополнительные параметры. Вы можете <b>Распечатать</b>, <b>Скачать как docx</b> или <b>Скачать как pdf</b>.
+                        Нажмите кнопку <div class = "icon icon-morebutton"></div> в правом верхнем углу панели инструментов, чтобы открыть дополнительные параметры. Вы можете <b>Распечатать</b>, <b>Скачать как docx</b> или <b>Скачать как pdf</b>.
                         <p><img alt="Еще OFORM" src="../images/more_oform.png" /></p>
                         <p>Вы также можете изменить тему <b>Интерфейса</b> формы, выбрав один из доступных вариантов: <b>Светлая</b>, <b>Классическая светлая</b> или <b>Темная</b>. При выборе <b>Темной темы интерфейса</b>, становится доступным <b>Темный режим</b>.</p>
                         <p><img alt="Темный режим Формы" src="../images/darkmode_oform.png" /></p>

apps/documenteditor/main/resources/help/ru/UsageInstructions/InsertAutoshapes.htm

@@ -19,7 +19,7 @@
 			<p>Для добавления автофигуры в документ:</p>
 			<ol>
                 <li>перейдите на вкладку <b>Вставка</b> верхней панели инструментов,</li>
-                <li>щелкните по значку <img alt="Значок Фигура" src="../images/insertautoshape.png" /> <b>Фигура</b> на верхней панели инструментов,</li>
+                <li>щелкните по значку <div class = "icon icon-insertautoshape"></div> <b>Фигура</b> на верхней панели инструментов,</li>
 				<li>выберите одну из доступных групп автофигур: <b>Последние использованные</b>, <b>Основные фигуры</b>, <b>Фигурные стрелки</b>, <b>Математические знаки</b>, <b>Схемы</b>, <b>Звезды и ленты</b>, <b>Выноски</b>, <b>Кнопки</b>, <b>Прямоугольники</b>, <b>Линии</b>,</li>
 				<li>щелкните по нужной автофигуре внутри выбранной группы,</li>
 				<li>установите курсор там, где требуется поместить автофигуру,
@@ -30,14 +30,14 @@
 			</ol>
             <p>К автофигуре также можно добавить подпись. Для получения дополнительной информации о работе с подписями к автофигурам вы можете обратиться к <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">этой статье</a>.</p>
             <h3>Перемещение и изменение размера автофигур</h3>
-            <p id="shape_resize"><img class="floatleft" alt="Изменение формы автофигуры" src="../images/reshaping.png" />Для изменения размера автофигуры перетаскивайте маленькие квадраты <img alt="Значок Квадрат" src="../images/resize_square.png" />, расположенные по краям автофигуры. Чтобы сохранить исходные пропорции выбранной автофигуры при изменении размера, удерживайте клавишу <b>Shift</b> и перетаскивайте один из угловых значков.</p>
-			<p>При изменении некоторых фигур, например, фигурных стрелок или выносок, также доступен желтый значок в форме ромба <img alt="Значок Желтый ромб" src="../images/yellowdiamond.png" />. Он позволяет изменять отдельные параметры формы, например, длину указателя стрелки.</p>
+            <p id="shape_resize"><div class = "big big-reshaping"></div>Для изменения размера автофигуры перетаскивайте маленькие квадраты <div class = "icon icon-resize_square"></div>, расположенные по краям автофигуры. Чтобы сохранить исходные пропорции выбранной автофигуры при изменении размера, удерживайте клавишу <b>Shift</b> и перетаскивайте один из угловых значков.</p>
+			<p>При изменении некоторых фигур, например, фигурных стрелок или выносок, также доступен желтый значок в форме ромба <div class = "icon icon-yellowdiamond"></div>. Он позволяет изменять отдельные параметры формы, например, длину указателя стрелки.</p>
 			<p>
-				Для изменения местоположения автофигуры используйте значок <img alt="Стрелка" src="../images/arrow.png" />, который появляется после наведения курсора мыши на автофигуру. Перетащите автофигуру на нужное место, не отпуская кнопку мыши.
+				Для изменения местоположения автофигуры используйте значок <div class = "icon icon-arrow"></div>, который появляется после наведения курсора мыши на автофигуру. Перетащите автофигуру на нужное место, не отпуская кнопку мыши.
 				При перемещении автофигуры на экране появляются направляющие, которые помогают точно расположить объект на странице (если выбран стиль обтекания, отличный от стиля "В тексте"). Чтобы перемещать автофигуру с шагом в один пиксель, удерживайте клавишу <b>Ctrl</b> и используйте стрелки на клавиатуре. 
 				Чтобы перемещать автофигуру строго по горизонтали/вертикали и предотвратить ее смещение в перпендикулярном направлении, при перетаскивании удерживайте клавишу <b>Shift</b>.
 			</p>
-			<p>Чтобы повернуть автофигуру, наведите курсор мыши на маркер поворота <img alt="Маркер поворота" src="../images/greencircle.png" /> и перетащите его по часовой стрелке или против часовой стрелки. Чтобы ограничить угол поворота шагом в 15 градусов, при поворачивании удерживайте клавишу <b>Shift</b>.</p>
+			<p>Чтобы повернуть автофигуру, наведите курсор мыши на маркер поворота <div class = "icon icon-greencircle"></div> и перетащите его по часовой стрелке или против часовой стрелки. Чтобы ограничить угол поворота шагом в 15 градусов, при поворачивании удерживайте клавишу <b>Shift</b>.</p>
             <p class="note">
                 <b>Примечание</b>: список сочетаний клавиш, которые можно использовать при работе с объектами, доступен <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">здесь</a>.
             </p>
@@ -64,7 +64,7 @@
 				</li>
 				<li><b>Порядок</b> - используется, чтобы вынести выбранную автофигуру на передний план, переместить на задний план, перенести вперед или назад, а также сгруппировать или разгруппировать автофигуры для выполнения операций над несколькими из них сразу. Подробнее о расположении объектов в определенном порядке рассказывается на <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">этой странице</a>.</li>
 				<li><b>Выравнивание</b> - используется, чтобы выровнять фигуру по левому краю, по центру, по правому краю, по верхнему краю, по середине, по нижнему краю. Подробнее о выравнивании объектов рассказывается на <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">этой странице</a>.</li>
-				<li><b>Стиль обтекания</b> - используется, чтобы выбрать один из доступных стилей обтекания текстом - в тексте, вокруг рамки, по контуру, сквозное, сверху и снизу, перед текстом, за текстом - или для изменения границы обтекания. Опция <b>Изменить границу обтекания</b> доступна только в том случае, если выбран стиль обтекания, отличный от стиля "В тексте". Чтобы произвольно изменить границу, перетаскивайте точки границы обтекания. Чтобы создать новую точку границы обтекания, щелкните в любом месте на красной линии и перетащите ее в нужную позицию. <img alt="Изменение границы обтекания" src="../images/wrap_boundary.png" /></li>
+				<li><b>Стиль обтекания</b> - используется, чтобы выбрать один из доступных стилей обтекания текстом - в тексте, вокруг рамки, по контуру, сквозное, сверху и снизу, перед текстом, за текстом - или для изменения границы обтекания. Опция <b>Изменить границу обтекания</b> доступна только в том случае, если выбран стиль обтекания, отличный от стиля "В тексте". Чтобы произвольно изменить границу, перетаскивайте точки границы обтекания. Чтобы создать новую точку границы обтекания, щелкните в любом месте на красной линии и перетащите ее в нужную позицию. <div class = "big big-wrap_boundary"></div></li>
 				<li><b>Поворот</b> - используется, чтобы повернуть фигуру на 90 градусов по часовой стрелке или против часовой стрелки, а также чтобы отразить фигуру слева направо или сверху вниз.</li>
 				<li><b>Дополнительные параметры фигуры</b> - используется для вызова окна 'Фигура - дополнительные параметры'.</li>
 			</ul>

apps/documenteditor/main/resources/help/ru/UsageInstructions/SupportSmartArt.htm

@@ -4,6 +4,7 @@
         <title>Поддержка SmartArt в редакторе документов ONLYOFFICE</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Редактируйте графические объекты SmartArt, добавленные с помощью сторонних редакторов"/>
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>

apps/documenteditor/main/resources/help/ru/UsageInstructions/UseMailMerge.htm

@@ -23,7 +23,7 @@
                     <li>Источник данных, используемый для слияния, должен быть электронной таблицей в формате <b>.xlsx</b>, сохраненной на вашем портале. Откройте существующую электронную таблицу или создайте новую и убедитесь, что она соответствует следующим требованиям.</li>
                     <li>Таблица должна содержать строку заголовков с названиями столбцов, так как значения в первой ячейке каждого столбца определяют поля слияния (то есть переменные, которые можно вставить в текст). Каждый столбец должен содержать набор конкретных значений для переменной. Каждая строка в таблице должна соответствовать отдельной записи (то есть ряду значений, относящихся к определенному получателю). В ходе слияния для каждой записи будет создана копия основного документа, и каждое поле слияния, вставленное в основной текст, будет заменено фактическим значением из соответствующего столбца. Если вы собираетесь отправлять результаты по электронной почте, таблица также должна содержать столбец с адресами электронной почты получателей.</li>
                     <li>
-                        Откройте существующий текстовый документ или создайте новый. Он должен содержать основной текст, который будет одинаковым для каждой версии документа, полученного в результате слияния. Нажмите значок <b>Слияние</b> <img alt="Значок Слияние" src="../images/mailmergeicon.png" /> на вкладке <b>Главная</b> верхней панели инструментов и выберите источник данных: <b>Из файла</b>, <b>По URL</b> или <b>Из хранилища</b>.
+                        Откройте существующий текстовый документ или создайте новый. Он должен содержать основной текст, который будет одинаковым для каждой версии документа, полученного в результате слияния. Нажмите значок <b>Слияние</b> <div class = "icon icon-mailmergeicon"></div> на вкладке <b>Главная</b> верхней панели инструментов и выберите источник данных: <b>Из файла</b>, <b>По URL</b> или <b>Из хранилища</b>.
                         <p><img alt="Настройки слияния" src="../images/mailmerge_options.png" /></p>
                     </li>
                     <li>