Change links in DE

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The short description of Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,7 +17,7 @@
 		<h1>Über den Dokumenteneditor</h1>
 			<p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> ist eine <span class="onlineDocumentFeatures">Online-</span>Anwendung, mit der Sie Ihre Dokumente<span class="onlineDocumentFeatures"> direkt in Ihrem Browser</span> betrachten und bearbeiten können.</p>
 			<p>Mit dem <b>Dokumenteneditor</b> können Sie Editiervorgänge durchführen, wie bei einem beliebigen Desktopeditor, editierte Dokumente unter Beibehaltung aller Formatierungsdetails drucken oder sie auf der Festplatte Ihres Rechners als DOCX-, PDF-, TXT-, ODT-, DOXT, PDF/A, OTF, RTF-, HTML-, FB2, oder HTML-Dateien speichern.</p>
-			<p><span class="onlineDocumentFeatures">Wenn Sie in der <em>Online-Version</em> mehr über die aktuelle Softwareversion und den Lizenzgeber erfahren möchten, klicken Sie auf das Symbol <img alt="Über" src="../images/about.png" /> in der linken Seitenleiste.</span> <span class="desktopDocumentFeatures">Wenn Sie in der <em>Desktop-Version</em> für Windows mehr über die aktuelle Softwareversion und den Lizenzgeber erfahren möchten, wählen Sie das Menü <b>Über</b> in der linken Seitenleiste des Hauptfensters. Öffnen Sie in der <em>Desktop-Version</em> für Mac OS das Menü <b>ONLYOFFICE</b> oben auf dem Bildschirm und wählen Sie den Menüpunkt <b>Über ONLYOFFICE</b>.</span></p>
+			<p><span class="onlineDocumentFeatures">Wenn Sie in der <em>Online-Version</em> mehr über die aktuelle Softwareversion und den Lizenzgeber erfahren möchten, klicken Sie auf das Symbol <div class = "icon icon-about"></div> in der linken Seitenleiste.</span> <span class="desktopDocumentFeatures">Wenn Sie in der <em>Desktop-Version</em> für Windows mehr über die aktuelle Softwareversion und den Lizenzgeber erfahren möchten, wählen Sie das Menü <b>Über</b> in der linken Seitenleiste des Hauptfensters. Öffnen Sie in der <em>Desktop-Version</em> für Mac OS das Menü <b>ONLYOFFICE</b> oben auf dem Bildschirm und wählen Sie den Menüpunkt <b>Über ONLYOFFICE</b>.</span></p>
 		</div>
 	</body>
 </html>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The advanced settings of Document Editor" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -14,13 +15,13 @@
             <input id="search" class="searchBar" placeholder="Suche" type="text" onkeypress="doSearch(event)">
         </div>
         <h1>Erweiterte Einstellungen des Dokumenteneditors</h1>
-        <p>Über die Funktion erweiterten Einstellungen können Sie die Grundeinstellungen im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> ändern. Klicken Sie dazu in der oberen Symbolleiste auf die Registerkarte <b>Datei</b> und wählen Sie die Option <b>Erweiterte Einstellungen...</b>. Sie können auch auf das Symbol <b>Einstellungen anzeigen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> rechts neben der Kopfzeile des Editors klicken und die Option <b>Erweiterte Einstellungen</b> auswählen.</p>
+        <p>Über die Funktion erweiterten Einstellungen können Sie die Grundeinstellungen im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> ändern. Klicken Sie dazu in der oberen Symbolleiste auf die Registerkarte <b>Datei</b> und wählen Sie die Option <b>Erweiterte Einstellungen...</b>. Sie können auch auf das Symbol <b>Einstellungen anzeigen</b> <div class = "icon icon-viewsettingsicon"></div> rechts neben der Kopfzeile des Editors klicken und die Option <b>Erweiterte Einstellungen</b> auswählen.</p>
         <p>Die erweiterten Einstellungen umfassen:</p>
         <ul>
             <li><b>Kommentaranzeige</b> - zum Ein-/Ausschalten der Option Live-Kommentar:
             <ul>
-                <li><b>Anzeige von Kommentaren aktivieren</b> - wenn Sie diese Funktion deaktivieren, werden die kommentierten Passagen nur hervorgehoben, wenn Sie auf das Symbol <b>Kommentare</b> <img alt="Kommentare" src="../images/commentsicon.png" /> in der linken Seitenleiste klicken.</li>
-                <li><b>Anzeige der aufgelösten Kommentare aktivieren</b> - diese Funktion ist standardmäßig deaktiviert, sodass die aufgelösten Kommentare im Dokumententext verborgen werden. Sie können diese Kommentare nur ansehen, wenn Sie in der linken Seitenleiste auf das Symbol <b>Kommentare</b> <img alt="Kommentare" src="../images/commentsicon.png" /> klicken. Wenn die aufgelösten Kommentare im Dokument angezeigt werden sollen, müssen Sie diese Option aktivieren.</li>
+                <li><b>Anzeige von Kommentaren aktivieren</b> - wenn Sie diese Funktion deaktivieren, werden die kommentierten Passagen nur hervorgehoben, wenn Sie auf das Symbol <b>Kommentare</b> <div class = "icon icon-commentsicon"></div> in der linken Seitenleiste klicken.</li>
+                <li><b>Anzeige der aufgelösten Kommentare aktivieren</b> - diese Funktion ist standardmäßig deaktiviert, sodass die aufgelösten Kommentare im Dokumententext verborgen werden. Sie können diese Kommentare nur ansehen, wenn Sie in der linken Seitenleiste auf das Symbol <b>Kommentare</b> <div class = "icon icon-commentsicon"></div> klicken. Wenn die aufgelösten Kommentare im Dokument angezeigt werden sollen, müssen Sie diese Option aktivieren.</li>
             </ul>
             </li>
             <li><b>Rechtschreibprüfung</b> - Ein-/Ausschalten der automatischen Rechtschreibprüfung.</li>
@@ -29,13 +30,13 @@
             <li>Über <span class="onlineDocumentFeatures"><b>AutoSpeichern</b> können Sie in der <em>Online-Version</em> die Funktion zum automatischen Speichern von Änderungen während der Bearbeitung ein-/ausschalten.</span> Über <span class="desktopDocumentFeatures"><b>Wiederherstellen</b> können Sie in der <em>Desktop-Version</em> die Funktion zum automatischen Wiederherstellen von Dokumenten für den Fall eines unerwarteten Programmabsturzes ein-/ausschalten.</span></li>
             <li class="onlineDocumentFeatures"><b>Co-Bearbeitung</b> - Anzeige der während der Co-Bearbeitung vorgenommenen Änderungen:<ul>
                     <li>Standardmäßig ist der <b>Schnellmodus</b> aktiviert. Die Benutzer, die das Dokuments gemeinsam bearbeiten, sehen die Änderungen in Echtzeit, sobald sie von anderen Benutzern vorgenommen wurden.</li>
-                    <li>Wenn Sie die Änderungen von anderen Benutzern nicht einsehen möchten (um Störungen zu vermeiden oder aus einem anderen Grund), wählen Sie den Modus <b>Strikt</b> und alle Änderungen werden erst angezeigt, nachdem Sie auf das Symbol <b>Speichern</b> <img alt="Speichern" src="../images/saveupdate.png" /> geklickt haben, dass Sie darüber informiert, dass Änderungen von anderen Benutzern vorliegen.</li>
+                    <li>Wenn Sie die Änderungen von anderen Benutzern nicht einsehen möchten (um Störungen zu vermeiden oder aus einem anderen Grund), wählen Sie den Modus <b>Strikt</b> und alle Änderungen werden erst angezeigt, nachdem Sie auf das Symbol <b>Speichern</b> <div class = "icon icon-saveupdate"></div> geklickt haben, dass Sie darüber informiert, dass Änderungen von anderen Benutzern vorliegen.</li>
                 </ul>
             </li>
             <li class="onlineDocumentFeatures"><b>Echtzeit-Änderungen bei gemeinsamer Bearbeitung</b> - legt fest, welche Änderungen bei der Co-Bearbeitung hervorgehoben werden sollen:<ul>
                     <li>Wenn Sie die Option <b>Keine anzeigen</b> auswählen, werden die während der aktuellen Sitzung vorgenommenen Änderungen nicht hervorgehoben.</li>
                     <li>Wenn Sie die Option <b>Alle anzeigen</b> auswählen, werden alle während der aktuellen Sitzung vorgenommenen Änderungen hervorgehoben.</li>
-                    <li>Wenn Sie die Option <b>Letzte anzeigen</b> auswählen, werden alle Änderungen hervorgehoben, die Sie vorgenommen haben, seit Sie das letzte Mal das Symbol <b>Speichern</b> <img alt="Speichern" src="../images/saveupdate.png" /> angeklickt haben. Diese Option ist nur verfügbar, wenn Sie in der Co-Bearbeitung den Modus <b>Strikt</b> ausgewählt haben.</li>
+                    <li>Wenn Sie die Option <b>Letzte anzeigen</b> auswählen, werden alle Änderungen hervorgehoben, die Sie vorgenommen haben, seit Sie das letzte Mal das Symbol <b>Speichern</b> <div class = "icon icon-saveupdate"></div> angeklickt haben. Diese Option ist nur verfügbar, wenn Sie in der Co-Bearbeitung den Modus <b>Strikt</b> ausgewählt haben.</li>
                 </ul>
             </li>
             <li><b>Thema der Benutzeroberfläche</b> wird verwendet, um das Farbschema der Benutzeroberfläche des Editors zu ändern.

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Tips on collaborative editing" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -31,16 +32,16 @@
             <p>Im <b>Dokumenteneditor</b> stehen die folgenden Modelle für die Co-Bearbeitung zur Verfügung.</p>
             <ul>
                 <li>Standardmäßig ist der <b>Schnellmodus</b> aktiviert. Die Änderungen von anderen Benutzern werden in Echtzeit angezeigt.</li>
-                <li>Im Modus <b>Formal</b> werden die Änderungen von anderen Nutzern verborgen, bis Sie auf das Symbol <b>Speichern</b> <img alt="Speichern" src="../images/saveupdate.png" /> klicken, um Ihre eigenen Änderungen zu speichern und die Änderungen von anderen anzunehmen.</li>
+                <li>Im Modus <b>Formal</b> werden die Änderungen von anderen Nutzern verborgen, bis Sie auf das Symbol <b>Speichern</b> <div class = "icon icon-saveupdate"></div> klicken, um Ihre eigenen Änderungen zu speichern und die Änderungen von anderen anzunehmen.</li>
             </ul>
-            <p>Der Modus kann unter <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterte Einstellungen</a> festgelegt werden. Sie können den gewünschten Modus auch in der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste festlegen, klicken Sie dazu einfach auf das Symbol <img alt="Co-Bearbeitung" src="../images/coeditingmode.png" /> <b>Co-Bearbeitung</b>.</p>
+            <p>Der Modus kann unter <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterte Einstellungen</a> festgelegt werden. Sie können den gewünschten Modus auch in der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste festlegen, klicken Sie dazu einfach auf das Symbol <div class = "icon icon-coeditingmode"></div> <b>Co-Bearbeitung</b>.</p>
             <p><img alt="Menü Co-Bearbeitung" src="../images/coeditingmodemenu.png" /></p>
             <p class="note"><b>Hinweis</b>: Wenn Sie ein Dokument im Modus <b>Schnell</b> gemeinsam bearbeiten, ist die Option letzten rückgängig gemachten Vorgang <b>wiederherstellen</b> nicht verfügbar.</p>
             <p>Wenn ein Dokument im Modus <b>Formal</b> von mehreren Benutzern gleichzeitig bearbeitet wird, werden die bearbeiteten Textpassagen mit gestrichelten Linien in verschiedenen Farben markiert. Wenn Sie den Mauszeiger über eine der bearbeiteten Passagen bewegen, wird der Name des Benutzers angezeigt, der diese Passage aktuell bearbeitet. Im <b>Schnellmodus</b> werden die Aktionen und die Namen der Co-Editoren angezeigt, sobald sie eine Textstelle bearbeitet haben.</p>
-            <p>Die Anzahl der Benutzer, die am aktuellen Dokument arbeiten, wird in der linken unteren Ecke auf der Statusleiste angegeben - <img alt="Anzahl der Benutzer" src="../images/usersnumber.png" />. Wenn Sie sehen möchten wer die Datei aktuell bearbeitet, können Sie auf dieses Symbol klicken oder den Bereich <b>Chat</b> öffnen, der eine vollständige Liste aller Benutzer enthält.</p>
-            <p>Wenn kein Benutzer die Datei anzeigt oder bearbeitet, sieht das Symbol in der Kopfzeile des Editors folgendermaßen aus: <img alt="Zugriffsrechte verwalten" src="../images/access_rights.png" /> - über dieses Symbol können Sie die Benutzer verwalten, die direkt aus dem Dokument auf die Datei zugreifen können; neue Benutzer einladen und ihnen die Berechtigung zum <em>Bearbeiten</em>, <em>Lesen</em>, <em>Kommentieren</em>, <em>Ausfüllen von Formularen</em> oder <em>Betrachten</em> des Dokuments erteilen oder Benutzern Zugriffsrechte für die Datei <em>verweigern</em>. Klicken Sie auf dieses Symbol <img alt="Anzahl der Benutzer" src="../images/usersnumber.png" />, um den Zugriff auf die Datei zu verwalten. Sie können die Datei auch verwalten, wenn andere Benutzer aktuell mit der Bearbeitung oder Anzeige des Dokuments beschäftigt sind. Sie können die Zugriffsrechte auch in der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste festlegen, klicken Sie dazu einfach auf das Symbol <img alt="Teilen" src="../images/sharingicon.png" /> <b>Teilen</b>.</p>
-            <p>Sobald einer der Benutzer Änderungen durch Klicken auf das Symbol <img alt="Speichern" src="../images/savewhilecoediting.png" /> speichert, sehen die anderen Benutzer in der Statusleiste eine Notiz über vorliegende Aktualisierungen. Um Ihre eigenen Änderungen zu speichern, so dass diese auch von den anderen Benutzern eingesehen werden können und um die Aktualisierungen Ihrer Co-Editoren einzusehen, klicken Sie in der oberen linken Ecke der oberen Symbolleiste auf <img alt="Speichern" src="../images/saveupdate.png" />. Die Updates werden hervorgehoben, damit Sie nachvollziehen können, was genau geändert wurde.</p>
-            <p>Sie können festlegen, welche Änderungen bei der Co-Bearbeitung hervorgehoben werden sollen: Klicken Sie dazu in der Registerkarte <b>Datei</b> auf die Option <b>Erweiterte Einstellungen</b> und wählen Sie zwischen <b>keine</b>, <b>alle</b> und <b>letzte</b> Änderungen in Echtzeit. Wenn Sie die Option <b>Alle anzeigen</b> auswählen, werden alle während der aktuellen Sitzung vorgenommenen Änderungen hervorgehoben. Wenn Sie die Option <b>Letzte anzeigen</b> auswählen, werden alle Änderungen hervorgehoben, die Sie vorgenommen haben, seit Sie das letzte Mal das Symbol Speichern <img alt="Speichern" src="../images/saveupdate.png" /> angeklickt haben. Wenn Sie die Option <b>Keine anzeigen</b> auswählen, werden die während der aktuellen Sitzung vorgenommenen Änderungen nicht hervorgehoben.</p>
+            <p>Die Anzahl der Benutzer, die am aktuellen Dokument arbeiten, wird in der linken unteren Ecke auf der Statusleiste angegeben - <div class = "icon icon-usersnumber"></div>. Wenn Sie sehen möchten wer die Datei aktuell bearbeitet, können Sie auf dieses Symbol klicken oder den Bereich <b>Chat</b> öffnen, der eine vollständige Liste aller Benutzer enthält.</p>
+            <p>Wenn kein Benutzer die Datei anzeigt oder bearbeitet, sieht das Symbol in der Kopfzeile des Editors folgendermaßen aus: <div class = "icon icon-access_rights"></div> - über dieses Symbol können Sie die Benutzer verwalten, die direkt aus dem Dokument auf die Datei zugreifen können; neue Benutzer einladen und ihnen die Berechtigung zum <em>Bearbeiten</em>, <em>Lesen</em>, <em>Kommentieren</em>, <em>Ausfüllen von Formularen</em> oder <em>Betrachten</em> des Dokuments erteilen oder Benutzern Zugriffsrechte für die Datei <em>verweigern</em>. Klicken Sie auf dieses Symbol <div class = "icon icon-usersnumber"></div>, um den Zugriff auf die Datei zu verwalten. Sie können die Datei auch verwalten, wenn andere Benutzer aktuell mit der Bearbeitung oder Anzeige des Dokuments beschäftigt sind. Sie können die Zugriffsrechte auch in der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste festlegen, klicken Sie dazu einfach auf das Symbol <div class = "icon icon-sharingicon"></div> <b>Teilen</b>.</p>
+            <p>Sobald einer der Benutzer Änderungen durch Klicken auf das Symbol <div class = "icon icon-savewhilecoediting"></div> speichert, sehen die anderen Benutzer in der Statusleiste eine Notiz über vorliegende Aktualisierungen. Um Ihre eigenen Änderungen zu speichern, so dass diese auch von den anderen Benutzern eingesehen werden können und um die Aktualisierungen Ihrer Co-Editoren einzusehen, klicken Sie in der oberen linken Ecke der oberen Symbolleiste auf <div class = "icon icon-saveupdate"></div>. Die Updates werden hervorgehoben, damit Sie nachvollziehen können, was genau geändert wurde.</p>
+            <p>Sie können festlegen, welche Änderungen bei der Co-Bearbeitung hervorgehoben werden sollen: Klicken Sie dazu in der Registerkarte <b>Datei</b> auf die Option <b>Erweiterte Einstellungen</b> und wählen Sie zwischen <b>keine</b>, <b>alle</b> und <b>letzte</b> Änderungen in Echtzeit. Wenn Sie die Option <b>Alle anzeigen</b> auswählen, werden alle während der aktuellen Sitzung vorgenommenen Änderungen hervorgehoben. Wenn Sie die Option <b>Letzte anzeigen</b> auswählen, werden alle Änderungen hervorgehoben, die Sie vorgenommen haben, seit Sie das letzte Mal das Symbol Speichern <div class = "icon icon-saveupdate"></div> angeklickt haben. Wenn Sie die Option <b>Keine anzeigen</b> auswählen, werden die während der aktuellen Sitzung vorgenommenen Änderungen nicht hervorgehoben.</p>
             <h3>Anonym</h3>
             <p>Portalbenutzer, die nicht registriert sind und kein Profil haben, gelten als anonym, können jedoch weiterhin an Dokumenten zusammenarbeiten. Um ihnen einen Namen zuzuweisen, muss der anonyme Benutzer beim ersten Öffnen des Dokuments einen Namen in das entsprechende Feld in der rechten oberen Ecke des Bildschirms eingeben. Aktivieren Sie das Kontrollkästchen "Nicht mehr anzeigen", um den Namen beizubehalten.</p>
             <p><img alt="Anonym - Zusammenarbeit" src="../images/anonymous_collab.png" /></p>
@@ -49,33 +50,33 @@
             <p>Die Chat-Nachrichten werden nur während einer aktiven Sitzung gespeichert. Um den Inhalt der Präsentation zu besprechen, ist es besser die Kommentarfunktion zu verwenden, da Kommentare bis zum Löschen gespeichert werden.</p>
             <p>Chat nutzen und Nachrichten für andere Benutzer erstellen:</p>
             <ol>
-                <li>Klicken Sie im linken Seitenbereich auf das Symbol <img alt="Chat" 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" src="../images/chat_toptoolbar.png" /> <b>Chat</b>.</li>
+                <li>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>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" 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" src="../images/chaticon.png" /> oder klicken Sie in der oberen Symbolleiste erneut auf <img alt="Chat" 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 <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b>.</p>
         </div>
                 <h3 id="comments">Kommentare</h3>
         <p>Es ist möglich, im Offline-Modus mit Kommentaren zu arbeiten, ohne eine Verbindung zur <em>Online-Version</em> herzustellen).</p>
         <p>Einen Kommentar hinterlassen:</p>
         <ol>
             <li>Wählen Sie einen Textabschnitt, der Ihrer Meinung nach einen Fehler oder ein Problem enthält.</li>
-            <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> und klicken Sie in der rechten Seitenleiste auf <img alt="Kommentar" src="../images/comment_toptoolbar.png" /> <b>Kommentare</b> oder<br /> nutzen Sie das <img alt="Kommentare" src="../images/commentsicon.png" /> Symbol in der linken Seitenleiste, um das <b>Kommentarfeld</b> zu öffnen, klicken Sie anschließend auf <b>Kommentar hinzufügen</b> oder<br /> klicken Sie mit der rechten Maustaste auf den gewünschten Textabschnitt und wählen Sie die Option <b>Kommentar hinzufügen</b> aus dem Kontextmenü aus.</li>
+            <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> und klicken Sie in der rechten Seitenleiste auf <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentare</b> oder<br /> nutzen Sie das <div class = "icon icon-commentsicon"></div> Symbol in der linken Seitenleiste, um das <b>Kommentarfeld</b> zu öffnen, klicken Sie anschließend auf <b>Kommentar hinzufügen</b> oder<br /> klicken Sie mit der rechten Maustaste auf den gewünschten Textabschnitt und wählen Sie die Option <b>Kommentar hinzufügen</b> aus dem Kontextmenü aus.</li>
             <li>Geben Sie den gewünschten Text ein.</li>
             <li>Klicken Sie auf <b>Kommentar hinzufügen/Hinzufügen</b>.</li>
         </ol>
         <p>Der Kommentar wird im linken Seitenbereich angezeigt. Alle Nutzer können nun auf hinzugefügte Kommentare antworten, Fragen stellen oder über durchgeführte Aktionen berichten. Klicken Sie dazu einfach in das Feld <b>Antworten</b>, direkt unter dem Kommentar.</p>
-        <p>Der von Ihnen kommentierte Textabschnitt wird im Dokument markiert. Um den Kommentar einzusehen, klicken Sie einfach auf den entsprechenden Abschnitt. Wenn Sie diese Funktion deaktivieren möchten, wechseln Sie in die Registerkarte <b>Datei</b>, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie das Kästchen <b>Live-Kommentare einblenden</b>. In diesem Fall werden die kommentierten Abschnitte nur markiert, wenn Sie auf <img alt="Kommentare" src="../images/commentsicon.png" /> klicken.</p>
+        <p>Der von Ihnen kommentierte Textabschnitt wird im Dokument markiert. Um den Kommentar einzusehen, klicken Sie einfach auf den entsprechenden Abschnitt. Wenn Sie diese Funktion deaktivieren möchten, wechseln Sie in die Registerkarte <b>Datei</b>, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie das Kästchen <b>Live-Kommentare einblenden</b>. In diesem Fall werden die kommentierten Abschnitte nur markiert, wenn Sie auf <div class = "icon icon-commentsicon"></div> klicken.</p>
         <p>Hinzugefügte Kommentare verwalten:</p>
         <ul>
-            <li>bearbeiten - klicken Sie dazu auf <img alt="Bearbeiten" src="../images/editcommenticon.png" /></li>
-            <li>löschen - klicken Sie dazu auf <img alt="Löschen" src="../images/review_delete.png" /></li>
-            <li>Diskussion schließen - klicken Sie dazu auf <img alt="Gelöst" src="../images/resolveicon.png" />, wenn die im Kommentar angegebene Aufgabe oder das Problem gelöst wurde. Danach erhält die Diskussion, die Sie mit Ihrem Kommentar geöffnet haben, den Status aufgelöst. Um die Diskussion wieder zu öffnen, klicken Sie auf <img alt="Erneut öffnen" src="../images/resolvedicon.png" />. Wenn Sie diese Funktion deaktivieren möchten, wechseln Sie in die Registerkarte <b>Datei</b>, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie das Kästchen <b>Gelöste Kommentare einblenden</b>, klicken Sie anschließend auf <b>Anwenden</b>. In diesem Fall werden die kommentierten Abschnitte nur markiert, wenn Sie auf <img alt="Kommentare" src="../images/commentsicon.png" /> klicken.</li>
+            <li>bearbeiten - klicken Sie dazu auf <div class = "icon icon-editcommenticon"></div></li>
+            <li>löschen - klicken Sie dazu auf <div class = "icon icon-review_delete"></div></li>
+            <li>Diskussion schließen - klicken Sie dazu auf <div class = "icon icon-resolveicon"></div>, wenn die im Kommentar angegebene Aufgabe oder das Problem gelöst wurde. Danach erhält die Diskussion, die Sie mit Ihrem Kommentar geöffnet haben, den Status aufgelöst. Um die Diskussion wieder zu öffnen, klicken Sie auf <div class = "icon icon-resolvedicon"></div>. Wenn Sie diese Funktion deaktivieren möchten, wechseln Sie in die Registerkarte <b>Datei</b>, wählen Sie die Option <b>Erweiterte Einstellungen...</b> und deaktivieren Sie das Kästchen <b>Gelöste Kommentare einblenden</b>, klicken Sie anschließend auf <b>Anwenden</b>. In diesem Fall werden die kommentierten Abschnitte nur markiert, wenn Sie auf <div class = "icon icon-commentsicon"></div> klicken.</li>
             <li>Wenn Sie mehrere Kommentare auf einmal 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 Lö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>
-        <p>Wenn Sie im Modus <b>Formal</b> arbeiten, werden neue Kommentare, die von den anderen Benutzern hinzugefügt wurden, erst eingeblendet, wenn Sie in der linken oberen Ecke der oberen Symbolleiste auf <img alt="Speichern" src="../images/saveupdate.png" /> geklickt haben.</p>
-        <p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf <img alt="Kommentare" src="../images/commentsicon.png" />.</p>
+        <p>Wenn Sie im Modus <b>Formal</b> arbeiten, werden neue Kommentare, die von den anderen Benutzern hinzugefügt wurden, erst eingeblendet, wenn Sie in der linken oberen Ecke der oberen Symbolleiste auf <div class = "icon icon-saveupdate"></div> geklickt haben.</p>
+        <p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf <div class = "icon icon-commentsicon"></div>.</p>
     </div>
 </body>
 </html>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Anweisungen für Vergleichen und Zusammenführen von zwei Dokumenten" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -22,7 +23,7 @@
         <h3 id="choosedocument">Wählen Sie ein Dokument zum Vergleichen aus</h3>
         <p>Öffnen Sie das Originaldokument und wählen Sie ein Dokument zum Vergleichen aus, um die zwei Dokumente zu vergleichen:</p>
         <ol>
-            <li>öffnen Sie die Registerkarte <b>Zusammenarbeit</b> und klicken Sie die Schaltfläche <img alt="Vergleichen Schaltfläche" src="../images/comparebutton.png" /> <b>Vergleichen</b> an,</li>
+            <li>öffnen Sie die Registerkarte <b>Zusammenarbeit</b> und klicken Sie die Schaltfläche <div class = "icon icon-comparebutton"></div> <b>Vergleichen</b> an,</li>
             <li>
                 wählen Sie einer der zwei Optionen aus, um das Dokument hochzuladen:
                 <ul>
@@ -40,7 +41,7 @@
         <p>Wenn das zweite Dokument zum Vergleichen ausgewählt wird, wird der Vergleichsprozess gestartet und das Dokument wird angezeigt, als ob er im <b>Überarbeitungsmodus</b> geöffnet ist. Alle Änderungen werden hervorgehoben und Sie können die Änderungen Stück für Stück oder alle gleichzeitig sehen, navigieren, übernehmen oder ablehnen. Sie können auch den Anueogemodus ändern und sehen, wie das Dokument vor, während und nach dem Vergleichprozess aussieht.</p>
 
         <h3 id="displaymode">Wählen Sie den Anzeigemodus für die Änderungen aus</h3>
-        <p>Klicken Sie auf die <img alt="Anzeigemodus Schaltfläche" src="../images/review_displaymode.png" /> Schaltfläche <b>Anzeigemodus</b> nach oben und wählen Sie einen der Modi aus:</p>
+        <p>Klicken Sie auf die <div class = "icon icon-review_displaymode"></div> Schaltfläche <b>Anzeigemodus</b> nach oben und wählen Sie einen der Modi 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.
@@ -57,21 +58,21 @@
         </ul>
 
         <h3 id="managechanges">Änderungen übernehmen oder ablehnen</h3>
-        <p>Verwenden Sie die Schaltflächen <img alt="Zur vorherigen Änderung Schaltfläche" src="../images/review_previous.png" /> <b>Zur vorherigen Änderung</b> und <img alt="Zur nächsten Änderung Schaltfläche" src="../images/review_next.png" /> <b>Zur nächsten Änderung</b>, 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>, um die Änderungen zu navigieren.</p>
         <p>Um die Änderungen zu übernehmen oder abzulehnen:</p>
         <ul>
-            <li>klicken Sie auf die Schaltfläche <img alt="Übernehmen Schaltfläche" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> nach oben oder</li>
+            <li>klicken Sie auf die Schaltfläche <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> nach oben 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 übernommen 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 <img alt="Annehmen Schaltfläche" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> an und wählen Sie die Option <b>Alle Änderungen annehmen</b> aus.</p>
+        <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="Ablehnen Schaltfläche" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> an oder</li>
+            <li>klicken Sie die Schaltfläche <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> an 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>klicken Sie die Schaltfläche <b>Ablehnen</b> <img alt="Ablehnen Schaltfläche" src="../images/review_reject.png" /> im Pop-Up-Fenster an.</li>
+            <li>klicken 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 <img alt="Ablehnen Schaltfläche" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> an und wählen Sie die Option <b>Alle Änderungen ablehnen</b> aus.</p>
+        <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>
 
         <h3 id="comparisonnotes">Zusatzinformation für die Vergleich-Option</h3>
         <h5>Die Vergleichsmethode</h5>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Die Liste mit den Tastaturkürzeln für einen schnelleren und einfacheren Zugriff auf die Funktionen des Document Editor mithilfe der Tastatur." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
         <script type="text/javascript" src="../search/js/jquery.min.js"></script>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of view settings and navigation tools such as zoom, previous/next page buttons" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,9 +17,9 @@
 		<h1>Ansichtseinstellungen und Navigationswerkzeuge</h1>
 			<p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> bietet mehrere Werkzeuge, um Ihnen die Navigation durch Ihr Dokument zu erleichtern: Lineale, Zoom, Seitenzahlen usw.</p>
 			<h3>Ansichtseinstellungen anpassen</h3>
-			<p>Um die Standardanzeigeeinstellung anzupassen und den günstigsten Modus für die Arbeit mit dem Dokument festzulegen, klicken Sie auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> im rechten Bereich der Kopfzeile des Editors und wählen Sie, welche Oberflächenelemente ein- oder ausgeblendet werden sollen. Folgende Optionen stehen Ihnen im Menü <b>Ansichtseinstellungen</b> zur Verfügung:</p>
+			<p>Um die Standardanzeigeeinstellung anzupassen und den günstigsten Modus für die Arbeit mit dem Dokument festzulegen, klicken Sie auf das Symbol <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> im rechten Bereich der Kopfzeile des Editors und wählen Sie, welche Oberflächenelemente ein- oder ausgeblendet werden sollen. Folgende Optionen stehen Ihnen im Menü <b>Ansichtseinstellungen</b> zur Verfügung:</p>
 			<ul>
-                <li><b>Symbolleiste ausblenden</b> - die obere Symbolleiste und die zugehörigen Befehle werden ausgeblendet, während die Registerkarten weiterhin angezeigt werden. Ist diese Option aktiviert, können Sie jede beliebige Registerkarte anklicken, um die Symbolleiste anzuzeigen. Die Symbolleiste wird angezeigt bis Sie in einen Bereich außerhalb der Leiste klicken.<br />Um den Modus zu deaktivieren, klicken Sie auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> und klicken Sie erneut auf <b>Symbolleiste ausblenden</b>. Die Symbolleiste ist wieder fixiert.<p class="note"><b>Hinweis</b>: Alternativ können Sie einen Doppelklick auf einer beliebigen Registerkarte ausführen, um die obere Symbolleiste zu verbergen oder wieder einzublenden.</p>
+                <li><b>Symbolleiste ausblenden</b> - die obere Symbolleiste und die zugehörigen Befehle werden ausgeblendet, während die Registerkarten weiterhin angezeigt werden. Ist diese Option aktiviert, können Sie jede beliebige Registerkarte anklicken, um die Symbolleiste anzuzeigen. Die Symbolleiste wird angezeigt bis Sie in einen Bereich außerhalb der Leiste klicken.<br />Um den Modus zu deaktivieren, klicken Sie auf das Symbol <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> und klicken Sie erneut auf <b>Symbolleiste ausblenden</b>. Die Symbolleiste ist wieder fixiert.<p class="note"><b>Hinweis</b>: Alternativ können Sie einen Doppelklick auf einer beliebigen Registerkarte ausführen, um die obere Symbolleiste zu verbergen oder wieder einzublenden.</p>
                 </li>
 			<li><b>Statusleiste ausblenden</b> - die unterste Leiste, auf der sich die Optionen <b>Seitenzahlen</b> und <b>Zoom</b> befinden, wird ausgeblendet. Um die ausgeblendete <b>Statusleiste</b> wieder einzublenden, klicken Sie erneut auf diese Option.</li>
 			<li><b>Lineale ausblenden</b> - die Lineale, die das Ausrichten von Text und anderen Elementen in einem Dokument sowie das Festlegen von Rändern, Tabstopps und Absatzeinzügen ermöglichen, werden ausgeblendet. Um die ausgeblendeten <b>Lineale</b> wieder anzuzeigen, klicken Sie erneut auf diese Option.</li>
@@ -27,7 +28,7 @@
 			<p>Wenn die Felder <b>Kommentare</b> <span class="onlineDocumentFeatures">oder <b>Chat</b></span> geöffnet sind, wird die Breite der linken Seitenleiste durch einfaches Ziehen und Loslassen angepasst: Bewegen Sie den Mauszeiger über den Rand der linken Seitenleiste, so dass dieser sich in den bidirektionalen Pfeil verwandelt und ziehen Sie den Rand nach rechts, um die Seitenleiste zu erweitern. Um die ursprüngliche Breite wiederherzustellen, ziehen Sie den Rand nach links.</p>
 			<h3>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%) 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>
+			<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%) aus der Liste 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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Dokumente mit einem Kennwort schützen" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Tips on document review option" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -20,8 +21,8 @@
         <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="Änderungen nachverfolgen" src="../images/trackchangesstatusbar.png" /> 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>.
+            <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 <div class = "icon icon-trackchangestoptoolbar"></div> <b>Änderungen nachverfolgen</b>.
                 <p class="note">Der Rezensent muss die Option <b>Änderungen nachverfolgen</b> nicht aktivieren. Die Funktion ist standardmäßig aktiviert und kann nicht deaktiviert werden, wenn das Dokument mit Zugriffsrechten nur für die Überprüfung freigegeben ist.</p></li>
             <li>Im geöffneten Pop-Up-Menü stehen die folgenden Optionen zur Verfügung:
                 <ul>
@@ -38,10 +39,10 @@
         <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 Text per Drag & Drop an eine andere Stelle im Dokument ziehen, wird der Text an einer neuen Position mit der Doppellinie unterstrichen. Der Text an der ursprünglichen Position wird doppelt gekreuzt. Dies wird als eine einzige Änderung gezählt.</p>
-        <p>Klicken Sie an der ursprünglichen Position auf den doppelt durchgestrichenen Text und verwenden Sie den Pfeil <img alt="Verschieben nachverfolgen Schaltfläche" src="../images/follow_move.png" /> in der Änderungssprechblase, um an die neue Position des Textes zu gelangen.</p>
-        <p>Klicken Sie an der neuen Position auf den doppelt unterstrichenen Text und verwenden Sie den Pfeil <img alt="Verschieben nachverfolgen Schaltfläche" src="../images/follow_move.png" /> in der Änderungssprechblase, um zur ursprünglichen Position des Textes zu gelangen.</p>
+        <p>Klicken Sie an der ursprünglichen Position auf den doppelt durchgestrichenen Text und verwenden Sie den Pfeil <div class = "icon icon-follow_move"></div> in der Änderungssprechblase, um an die neue Position des Textes zu gelangen.</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 gelangen.</p>
         <h3 id="displaymode">Anzeigemodus für Änderungen auswählen</h3>
-        <p>Klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Anzeigemodus" src="../images/review_displaymode.png" /> <b>Anzeigemodus</b> und wählen Sie einen der verfügbaren Modi aus der Liste aus:</p>
+        <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>
             <li><b>Markup</b>: Diese Option ist standardmäßig ausgewählt. Dieser Modus ermöglicht es, Änderungsvorschläge anzuzeigen und das Dokument zu bearbeiten.</li>
             <li><b>Einfaches Markup</b>: Dieser Modus ermöglicht sowohl das Anzeigen der vorgeschlagenen Änderungen als auch das Bearbeiten des Dokuments. Änderungen werden nur im Dokumenttext angezeigt, Sprechblasen werden ausgeblendet.</li>
@@ -49,22 +50,22 @@
             <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>Annehmen von aktuell ausgewählten Änderungen:</p>
         <ul>
-            <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Annehmen" src="../images/review_accepttoptoolbar.png" /> <b>Annehmen</b> oder</li>
+            <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-review_accepttoptoolbar"></div> <b>Annehmen</b> 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 in der Gruppe Änderungsbenachrichtigungen auf <b>Annehmen</b> <img alt="Annehmen" src="../images/review_accept.png" />.</li>
+            <li>klicken Sie in der Gruppe Änderungsbenachrichtigungen auf <b>Annehmen</b> <div class = "icon icon-review_accept"></div>.</li>
         </ul>
-        <p>Um alle Änderungen sofort anzunehmen, klicken Sie auf den Abwärtspfeil unter der Schaltfläche <img alt="Annehmen" 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>Ablehnen von aktuell ausgewählten Änderungen:</p>
         <ul>
-            <li>Klicken Sie in der oberen Symbolleiste das Symbol <img alt="Ablehnen" src="../images/review_rejecttoptoolbar.png" /> <b>Ablehnen</b> oder</li>
+            <li>Klicken Sie in der oberen Symbolleiste das Symbol <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Ablehnen</b> 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 in der Gruppe Änderungsbenachrichtigungen auf <b>Ablehnen</b> <img alt="Ablehnen" src="../images/review_reject.png" />.</li>
+            <li>klicken Sie in der Gruppe Änderungsbenachrichtigungen auf <b>Ablehnen</b> <div class = "icon icon-review_reject"></div>.</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 class="note">Wenn Sie das Dokument überprüfen, stehen Ihnen die Optionen <b>Akzeptieren</b> und <b>Ablehnen</b> nicht zur Verfügung. Sie können Ihre Änderungen mit dem <img alt="Änderung löschen Schaltfläche" src="../images/review_delete.png" /> Symbol innerhalb der Änderungs-Sprechblase löschen.</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 class="note">Wenn Sie das Dokument überprüfen, stehen Ihnen die Optionen <b>Akzeptieren</b> und <b>Ablehnen</b> nicht zur Verfügung. Sie können Ihre Änderungen mit dem <div class = "icon icon-review_delete"></div> Symbol innerhalb der Änderungs-Sprechblase löschen.</p>
     </div>
 </body>
 </html>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the document search and replace function in Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -14,17 +15,17 @@
             <input id="search" class="searchBar" placeholder="Suche" type="text" onkeypress="doSearch(event)">
         </div>
 		<h1>Suchen und Ersetzen</h1>
-			<p>Wenn Sie im aktuellen Dokument nach Zeichen, Wörtern oder Phrasen suchen möchten im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, klicken Sie auf das <img alt="Suche" src="../images/searchicon.png" /> Symbol in der linken Seitenleiste.</p>
+			<p>Wenn Sie im aktuellen Dokument nach Zeichen, Wörtern oder Phrasen suchen möchten im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, klicken Sie auf das <div class = "icon icon-searchicon"></div> Symbol in der linken Seitenleiste.</p>
 			<p>Die Dialogbox <b>Suchen und Ersetzen</b> wird geöffnet:</p>
             <p><img alt="Dialogbox Suchen und Ersetzen" src="../images/search_window.png" /></p>
 			<ol>
 			<li>Geben Sie Ihre Suchanfrage in das entsprechende Eingabefeld ein.</li>
-			<li>Legen Sie Ihre Suchparameter fest, klicken Sie dazu auf das <img alt="Symbol Suchoptionen" src="../images/search_options.png" /> Symbol und markieren Sie die gewünschten Optionen:<ul>
+			<li>Legen Sie Ihre Suchparameter fest, klicken Sie dazu auf das <div class = "icon icon-search_options"></div> Symbol und markieren Sie die gewünschten Optionen:<ul>
 			<li><b>Groß-/Kleinschreibung beachten</b> - ist diese Funktion aktiviert, werden nur Ergebnisse mit der selben Schreibweise wie in Ihrer Suchanfrage gefiltert (lautet Ihre Anfrage z.B. 'Editor' und diese Option ist markiert, werden Wörter wie 'editor' oder 'EDITOR' usw. nicht gefunden). Um die Option auszuschalten, deaktivieren Sie das Kontrollkästchen.</li>
 			<li><b>Ergebnisse markieren</b> - alle gefundenen Vorkommen auf einmal markiert. Um diese Option auszuschalten und die Markierung zu entfernen, deaktivieren Sie das Kontrollkästchen.</li>
 			</ul>
 			</li>			
-			<li>Klicken Sie auf einen der <b>Pfeiltasten</b> in der unteren rechten Ecke der Dialogbox. Die Suche wird entweder in Richtung des Dokumentenanfangs (klicken Sie auf <img alt="Linkspfeil" src="../images/searchupbutton.png" />) oder in Richtung des Dokumentenendes (klicken Sie auf <img alt="Rechtspfeil" src="../images/searchdownbutton.png" />) durchgeführt.<p class="note"><b>Hinweis</b>: wenn die Option <b>Ergebnisse markieren</b> aktiviert ist, können Sie mit den Pfeilen durch die markierten Ergebnisse navigieren.</p>
+			<li>Klicken Sie auf einen der <b>Pfeiltasten</b> in der unteren rechten Ecke der Dialogbox. Die Suche wird entweder in Richtung des Dokumentenanfangs (klicken Sie auf <div class = "icon icon-searchupbutton"></div>) oder in Richtung des Dokumentenendes (klicken Sie auf <div class = "icon icon-searchdownbutton"></div>) durchgeführt.<p class="note"><b>Hinweis</b>: wenn die Option <b>Ergebnisse markieren</b> aktiviert ist, können Sie mit den Pfeilen durch die markierten Ergebnisse navigieren.</p>
 			</li>
 			</ol>
 			<p>Das erste Ergebnis der Suchanfrage in der ausgewählten Richtung, wird auf der Seite markiert. Falls es sich dabei nicht um die gewünschte Textstelle handelt, klicken Sie den Pfeil erneut an, um das nächste Vorkommen der eingegebenen Zeichen zu finden.</p> 

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Spell check the text in your language while editing a document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,12 +17,12 @@
 			<h1>Rechtschreibprüfung</h1>
 			<p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> bietet Ihnen die Möglichkeit, die Rechtschreibung Ihres Textes in einer bestimmten Sprache zu überprüfen und Fehler während der Bearbeitung zu korrigieren.</p>
 			<p class="note">Ab <b>Version 6.3</b> unterstützen die ONLYOFFICE-Editoren das <b>SharedWorker Interface</b> für einen besseren Betrieb ohne großen Speicherverbrauch. Wenn Ihr Browser SharedWorker nicht unterstützt, ist nur <b>Worker</b> aktiv. Weitere Informationen zu SharedWorker finden Sie <a href="https://javascript.plainenglish.io/introduction-to-shared-workers-533d9abe9de3">in diesem Artikel</a>.</p>
-			<p>Wählen Sie zunächst die <b>Sprache</b> für Ihr Dokument aus. Klicken Sie in der Statusleiste auf das Symbol <img alt="Dokumentsprache festlegen" src="../images/document_language.png" /> <b>Rechtschreibprüfung</b>. Wählen Sie nun im angezeigten Fenster die gewünschte Sprache und klicken Sie auf <b>OK</b>. Die ausgewählte Sprache wird auf das gesamte Dokument angewandt.</p>
+			<p>Wählen Sie zunächst die <b>Sprache</b> für Ihr Dokument aus. Klicken Sie in der Statusleiste auf das Symbol <div class = "icon icon-document_language"></div> <b>Rechtschreibprüfung</b>. Wählen Sie nun im angezeigten Fenster die gewünschte Sprache und klicken Sie auf <b>OK</b>. Die ausgewählte Sprache wird auf das gesamte Dokument angewandt.</p>
 			<p><img alt="Fenster Dokumentsprache festlegen" src="../images/document_language_window.png" /></p>
 			<p>Um für einen Abschnitt im Dokument eine <b>andere Sprache auszuwählen</b>, markieren Sie den entsprechenden Abschnitt mit der Maus und klicken Sie anschließend auf das <img alt="Rechtschreibprüfung - Sprachenauswahl" src="../images/spellchecking_language.png" /> Menü in der Statusleiste.</p>
 			<p>Rechtschreibprüfung <b>aktivieren</b>:</p>
 			<ul>
-				<li>klicken Sie in der Statusleiste auf das Symbol <img alt="Rechtschreibprüfung deaktiviert" src="../images/spellcheckdeactivated.png" /> <b>Rechtschreibprüfung</b> oder</li>
+				<li>klicken Sie in der Statusleiste auf das Symbol <div class = "icon icon-spellcheckdeactivated"></div> <b>Rechtschreibprüfung</b> oder</li>
 				<li>öffnen Sie in der oberen Symbolleiste die Registerkarte <b>Datei</b> und wählen Sie die Option <b>erweiterte Einstellungen...</b>, setzen Sie das Häkchen in der Box <b>Rechtschreibprüfung aktivieren</b> und klicken Sie auf <b>Übernehmen</b>.</li>
 			</ul>
 			<p>Falsch geschriebene Wörter werden mit einer roten Linie unterstrichen.</p>
@@ -34,7 +35,7 @@
 			<p><img alt="Rechtschreibprüfung" src="../images/spellchecking.png" /></p>
 			<p>Rechtschreibprüfung <b>deaktivieren</b>:</p>
 			<ul>
-				<li>klicken Sie in der Statusleiste auf das Symbol <img alt="Rechtschreibprüfung aktiviert" src="../images/spellcheckactivated.png" /> <b>Rechtschreibprüfung</b> oder</li>
+				<li>klicken Sie in der Statusleiste auf das Symbol <div class = "icon icon-spellcheckactivated"></div> <b>Rechtschreibprüfung</b> oder</li>
 				<li>öffnen Sie in der oberen Symbolleiste die Registerkarte <b>Datei</b> und wählen Sie die Option <b>erweiterte Einstellungen...</b>, entfernen Sie das Häkchen in der Box <b>Rechtschreibprüfung aktivieren</b> und klicken Sie auf <b>Übernehmen</b>.</li>
 			</ul>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The list of document formats supported by Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Document Editor user interface" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -29,20 +30,20 @@
                     <p><img alt="Symbole in der Kopfzeile des Editors" src="../images/interface/leftpart.png" /></p>
                     <p>Im rechten Bereich der <b>Kopfzeile des Editors</b> werden der Benutzername und 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>
+                <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 <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>In der <b>Statusleiste</b> am unteren Rand des Editorfensters finden Sie die Anzeige der Seitennummer und Benachrichtigungen vom System (wie beispielsweise „Alle Änderungen wurden gespeichert" etc.), außerdem können Sie die <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">Textsprache festlegen und die Rechtschreibprüfung aktivieren</a>, den Modus <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">Änderungen nachverfolgen</a> einschalten und den <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Zoom</a> anpassen.</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><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>
                     </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/ReferencesTab.htm

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

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

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

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add borders to your document selecting their style" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content=">Eine Beschriftung ist eine nummerierte Bezeichnung eines Objektes, z.B. Gleichungen, Tabellen, Formen und Bilder." />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -21,7 +22,7 @@
                <li>wählen Sie das gewünschte Objekt aus;</li>
                <li>öffnen Sie die Registerkarte <b>Quellenangaben</b>;</li>
                <li>
-                   ·	klicken Sie auf das Bild <b>Beschriftung</b> <img alt="Rich Text Inhaltssteuerelement" src="../images/caption_icon.png" /> oder drücken Sie die rechte Maustaste und wählen Sie die Option <b>Beschriftung einfügen</b> aus, um das Feld <b>Beschriftung einfügen</b> zu öffnen:
+                   ·	klicken Sie auf das Bild <b>Beschriftung</b> <div class = "icon icon-caption_icon"></div> oder drücken Sie die rechte Maustaste und wählen Sie die Option <b>Beschriftung einfügen</b> aus, um das Feld <b>Beschriftung einfügen</b> zu öffnen:
                    <ul>
                        <li>öffnen Sie das Bezeichnung-Dropdown-Menü, um den Bezeichnungstyp für die Beschriftung auszuwählen oder</li>
                        <li>klicken Sie die <b>Hinzufügen</b>-Taste, um eine neue Bezeichnung zu erstellen. Geben Sie den neuen Namen im Textfeld <b>Bezeichnung</b> ein. Klicken Sie <b>OK</b>, um eine neue Bezeichnung zu erstellen;</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie Formeln in Tabellenzellen ein, um einfache Berechnungen der Daten durchzuführen" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add hyperlinks to a word or text fragment leading to an external website" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,7 +19,7 @@
 			<ol>
 				<li>Platzieren Sie Ihren Mauszeiger an der Position wo der Hyperlink eingefügt werden soll.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b> oder <b>Verweise</b>.</li>
-				<li>Klicken Sie auf das Symbol <img alt="Hyperlink" src="../images/addhyperlink.png" /> <b>Hyperlink</b> in der oberen Symbolleiste.</li>
+				<li>Klicken Sie auf das Symbol <div class = "icon icon-addhyperlink"></div> <b>Hyperlink</b> in der oberen Symbolleiste.</li>
 				<li>Im sich nun öffnenden Fenster <b>Einstellungen Hyperlink</b> können Sie die Parameter für den Hyperlink festlegen:<ul>
                         <li>Wählen Sie den gewünschten Linktyp aus:<p>Wenn Sie einen Hyperlink einfügen möchten, der auf eine externe Website verweist, wählen Sie <b>Website</b> und geben Sie eine URL im Format <em>http://www.example.com</em> in das Feld <b>Link zu</b> ein.</p>
                             <p><img alt="Fenster Einstellungen Hyperlink" src="../images/hyperlinkwindow.png" /></p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Abbildungsverzeichnis hinzufügen, formatieren und aktualisieren: Mit Objekten und Stilen" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,7 +17,7 @@
 			<h1>Abbildungsverzeichnis hinzufügen und formatieren</h1>
 			<p><b>Abbildungsverzeichnis</b> bietet einen Überblick über Gleichungen, Abbildungen und Tabellen, die einem Dokument hinzugefügt wurden. Ähnlich wie bei einem Inhaltsverzeichnis werden in einem <b>Abbildungsverzeichnis</b> Objekte oder Textüberschriften mit einem bestimmten Stil aufgelistet, sortiert und angeordnet. Dies macht es einfach, sie in Ihrem Dokument zu referenzieren und zwischen Abbildungen zu navigieren. Klicken Sie auf den Link im als Links formatierten <b>Abbildungsverzeichnis</b>, und Sie werden direkt zur Abbildung oder Überschrift weitergeleitet. Alle Tabellen, Gleichungen, Diagramme, Zeichnungen, Schaubilder, Fotos oder anderen Arten von Illustration werden als Abbildungen dargestellt.
 <p><img alt="Registerkarte Verweise" src="../images/referencestab.png" /></p>
-			<p>Um ein <b>Abbildungsverzeichnis</b> hinzuzufügen im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, öffnen Sie die Registerkarte <b>Verweise</b> und klicken Sie auf das Symbol <b>Abbildungsverzeichnis</b> <img alt="Abbildungsverzeichnus Schaltfläche" src="../images/table_figures_button.png" />, um ein Abbildungsverzeichnis zu erstellen und formatieren. Verwenden Sie die Schaltfläche <b>Aktualisieren</b>, um das Abbildungsverzeichnis jedes Mal zu aktualisieren, wenn Sie Ihrem Dokument eine neue Abbildung hinzufügen.</p>
+			<p>Um ein <b>Abbildungsverzeichnis</b> hinzuzufügen im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, öffnen Sie die Registerkarte <b>Verweise</b> und klicken Sie auf das Symbol <b>Abbildungsverzeichnis</b> <div class = "icon icon-table_figures_button"></div>, um ein Abbildungsverzeichnis zu erstellen und formatieren. Verwenden Sie die Schaltfläche <b>Aktualisieren</b>, um das Abbildungsverzeichnis jedes Mal zu aktualisieren, wenn Sie Ihrem Dokument eine neue Abbildung hinzufügen.</p>
 			<h2>Abbildungsverzeichnis erstellen</h2>
 			<p class="note"><b>Hinweis:</b> Sie können ein Abbildungsverzeichnis entweder mit Beschriftungen oder mit Stilen erstellen. Eine <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">Beschriftung</a> soll jeder Gleichung, jedem Abbildungsverzeichnis hinzugefügt werden, oder ein <a href="../UsageInstructions/FormattingPresets.htm" onclick="onhyperlinkclick(this)">Stil</a> soll auf dem Text angewendet werden, damit der Text korrekt in ein Abbildungsverzeichnis aufgenommen ist.</p>
 			<ol>
@@ -79,7 +80,7 @@
 				<li>Das Vorschaufenster zeigt an, wie das Abbildungsverzeichnis im Dokument oder beim Drucken angezeigt wird.</li>
 			</ul>
 			<h2>Abbildungsverzeichnis aktualisieren</h2>
-			<p>Aktualisieren Sie ein <b>Abbildungsverzeichnis</b> jedes Mal, wenn Sie Ihrem Dokument eine neue Gleichung, Abbildung oder Tabelle hinzufügen. Die Schaltfläche <b>Aktualisieren</b> wird aktiv, wenn Sie auf das Abbildungsverzeichnis klicken oder es auswählen. Klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf die Schaltfläche <b>Aktualisieren</b> <img alt="Aktualisieren" src="../images/refresh_button.png"> und wählen Sie die gewünschte Option aus dem Menü:</p>
+			<p>Aktualisieren Sie ein <b>Abbildungsverzeichnis</b> jedes Mal, wenn Sie Ihrem Dokument eine neue Gleichung, Abbildung oder Tabelle hinzufügen. Die Schaltfläche <b>Aktualisieren</b> wird aktiv, wenn Sie auf das Abbildungsverzeichnis klicken oder es auswählen. Klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf die Schaltfläche <b>Aktualisieren</b> <div class = "icon icon-refresh_button"></div> und wählen Sie die gewünschte Option aus dem Menü:</p>
 			<img alt="Aktualisieren - Pop-Up" src="../images/refresh_table-figures_popup.png" />
 			<ul style="list-style-type:disc">
 				<li><b>Nur Seitenzahlen aktualisieren</b> - um Seitenzahlen zu aktualisieren, ohne Änderungen an den Überschriften vorzunehmen.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Mit Text Wasserzeichen können Sie den Status Ihres Dokuments markieren (z.B. Vertraulich, Entwurf, usw.) und Bilder wie z.B. das Logo Ihres Unternehmens hinzufügen" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,7 +19,7 @@
 			<p>Um ein Wasserzeichen in ein Dokument einzufügen 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 zum <b>Layout-Tab</b> in der Hauptmenüleiste.</li>
-                <li>Klicken Sie das <img alt="Wasserzeichen" src="../images/watermark.png" /> <b>Wasserzeichen</b>  Symbol in der Menüleiste und wählen Sie die Option <b>Benutzerdefiniertes Wasserzeichen</b> aus dem Menü. Danach erscheint das Fenster mit den <b>Wasserzeichen-Einstellungen</b>.</li>
+                <li>Klicken Sie das <div class = "icon icon-watermark"></div> <b>Wasserzeichen</b>  Symbol in der Menüleiste und wählen Sie die Option <b>Benutzerdefiniertes Wasserzeichen</b> aus dem Menü. Danach erscheint das Fenster mit den <b>Wasserzeichen-Einstellungen</b>.</li>
                 <li>Wählen Sie die Art des Wasserzeichens:
                     <ul>
                         <li>Benutzen Sie die Option <b>Text-Wasserzeichen</b> und passen Sie die Parameter an:
@@ -43,7 +44,7 @@
                 <li>Bestätigen Sie die Einstellungen mit <b>OK</b>.</li>
 			</ol>
             <p>Um ein Wasserzeichen zu bearbeiten, öffnen Sie das Fenster mit den <b>Wasserzeichen-Einstellungen</b> wie oben beschrieben, ändern Sie die benötigten Parameter und speichern dies mit <b>OK</b>.</p>
-            <p>Um ein Wasserzeichen zu löschen, klicken Sie das <img alt="Wasserzeichen Symbol" src="../images/watermark.png" /> <b>Wasserzeichen </b> Symbol in der Menüleiste und wählen Sie die Option <b>Wasserzeichen entfernen</b> aus dem Menü. Sie können auch die Option <b>Kein</b> aus dem Fenster mit den <b>Wasserzeichen-Einstellungen</b> benutzen.</p>
+            <p>Um ein Wasserzeichen zu löschen, klicken Sie das <div class = "icon icon-watermark"></div> <b>Wasserzeichen </b> Symbol in der Menüleiste und wählen Sie die Option <b>Wasserzeichen entfernen</b> aus dem Menü. Sie können auch die Option <b>Kein</b> aus dem Fenster mit den <b>Wasserzeichen-Einstellungen</b> benutzen.</p>
             
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Align and arrange text boxes, autoshapes, images and charts on a page." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,19 +19,19 @@
 			<h3>Objekte ausrichten</h3>
             <p><b>Ausrichten</b> von <em>zwei oder mehr</em> ausgewählten Objekten:</p>
 			    <ol>
-                    <li>Klicken Sie auf das Symbol <img alt="Ausrichten" src="../images/align_toptoolbar.png" /> <b>ausrichten</b> auf der oberen Symbolleiste in der Registerkarte <b>Layout</b> und wählen Sie eine der verfügbaren Optionen:<ul>
+                    <li>Klicken Sie auf das Symbol <div class = "icon icon-align_toptoolbar"></div> <b>ausrichten</b> auf der oberen Symbolleiste in der Registerkarte <b>Layout</b> und wählen Sie eine der verfügbaren Optionen:<ul>
                             <li><b>An Seite ausrichten</b>, um Objekte relativ zu den Rändern der Seite auszurichten.</li>
                             <li><b>Am Seitenrand ausrichten</b>, um Objekte relativ zu den Seitenrändern auszurichten.</li>
                             <li><b>Ausgewählte Objekte ausrichten</b> (diese Option ist standardmäßig ausgewählt), um Objekte im Verhältnis zueinander auszurichten.</li>
                         </ul>
                     </li>
-                    <li>Klicken Sie erneut auf das Symbol <img alt="Ausrichten" src="../images/align_toptoolbar.png" /> <b>ausrichten</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:<ul>
-                            <li><b>Linksbündig ausrichten</b> <img alt="Linksbündig ausrichten" src="../images/alignobjectleft.png" /> - Objekte horizontal am linken Rand des am weitesten links befindlichen Objekts/linken Rand der Seite/linken Seitenrands ausrichten.</li>
-                            <li><b>Mittig ausrichten</b> <img alt="Zentriert ausrichten" src="../images/alignobjectcenter.png" /> - Objekte horizontal an ihrer Mitte/der Seitenmitte/der Mitte des Abstands zwischen dem linken und rechten Seitenrand ausrichten.</li>
-                            <li><b>Rechtsbündig ausrichten</b> <img alt="Rechtsbündig ausrichten" src="../images/alignobjectright.png" /> - Objekte horizontal am rechten Rand des am weitesten rechts befindlichen Objekts/rechten Rand der Seite/rechten Seitenrands ausrichten.</li>
-                            <li><b>Oben ausrichten</b> <img alt="Oben ausrichten" src="../images/alignobjecttop.png" /> - Objekte vertikal an der Oberkante des obersten Objekts/der Oberkante der Seite/des oberen Seitenrands ausrichten.</li>
-                            <li><b>Mitte ausrichten</b> <img alt="Mittig ausrichten" src="../images/alignobjectmiddle.png" /> - Objekte vertikal an ihrer Mitte/Seitenmitte/ Zwischenraummitte zwischen dem oberen und unteren Seitenrand ausrichten.</li>
-                            <li><b>Unten ausrichten</b> <img alt="Unten ausrichten" src="../images/alignobjectbottom.png" /> - Objekte vertikal an der Unterkante des unteresten Objekts/der Unterkante der Seite/des unteren Seitenrands ausrichten.</li>
+                    <li>Klicken Sie erneut auf das Symbol <div class = "icon icon-align_toptoolbar"></div> <b>ausrichten</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:<ul>
+                            <li><b>Linksbündig ausrichten</b> <div class = "icon icon-alignobjectleft"></div> - Objekte horizontal am linken Rand des am weitesten links befindlichen Objekts/linken Rand der Seite/linken Seitenrands ausrichten.</li>
+                            <li><b>Mittig ausrichten</b> <div class = "icon icon-alignobjectcenter"></div> - Objekte horizontal an ihrer Mitte/der Seitenmitte/der Mitte des Abstands zwischen dem linken und rechten Seitenrand ausrichten.</li>
+                            <li><b>Rechtsbündig ausrichten</b> <div class = "icon icon-alignobjectright"></div> - Objekte horizontal am rechten Rand des am weitesten rechts befindlichen Objekts/rechten Rand der Seite/rechten Seitenrands ausrichten.</li>
+                            <li><b>Oben ausrichten</b> <div class = "icon icon-alignobjecttop"></div> - Objekte vertikal an der Oberkante des obersten Objekts/der Oberkante der Seite/des oberen Seitenrands ausrichten.</li>
+                            <li><b>Mitte ausrichten</b> <div class = "icon icon-alignobjectmiddle"></div> - Objekte vertikal an ihrer Mitte/Seitenmitte/ Zwischenraummitte zwischen dem oberen und unteren Seitenrand ausrichten.</li>
+                            <li><b>Unten ausrichten</b> <div class = "icon icon-alignobjectbottom"></div> - Objekte vertikal an der Unterkante des unteresten Objekts/der Unterkante der Seite/des unteren Seitenrands ausrichten.</li>
                         </ul>
                     </li>
                 </ol>
@@ -39,39 +40,39 @@
             <h3>Objekte verteilen</h3>
             <p><em>Drei oder mehr</em> ausgewählte Objekte horizontal oder vertikal so <b>verteilen</b>, dass der gleiche Abstand zwischen ihnen angezeigt wird:</p>
             <ol>
-                <li>Klicken Sie auf das Symbol <img alt="Ausrichten" src="../images/align_toptoolbar.png" /> <b>ausrichten</b> auf der oberen Symbolleiste in der Registerkarte <b>Layout</b> und wählen Sie eine der verfügbaren Optionen:<ul>
+                <li>Klicken Sie auf das Symbol <div class = "icon icon-align_toptoolbar"></div> <b>ausrichten</b> auf der oberen Symbolleiste in der Registerkarte <b>Layout</b> und wählen Sie eine der verfügbaren Optionen:<ul>
                         <li><b>An Seite ausrichten</b>, um Objekte zwischen den Rändern der Seite zu verteilen.</li>
                         <li><b>An Seitenrand ausrichten</b>, um Objekte zwischen den Seitenrändern zu verteilen.</li>
                         <li><b>Ausgewählte Objekte ausrichten</b> (diese Option ist standardmäßig ausgewählt), um Objekte zwischen zwei ausgewählten äußersten Objekten zu verteilen.</li>
                     </ul>
                 </li>
-                <li>Klicken Sie erneut auf das Symbol <img alt="Ausrichten" src="../images/align_toptoolbar.png" /> <b>Ausrichten</b> und wählen Sie den gewünschten Verteilungstyp aus der Liste aus:<ul>
-                        <li><b>Horizontal verteilen</b> <img alt="Horizontal verteilen" src="../images/distributehorizontally.png" /> - um Objekte gleichmäßig zwischen den am weitesten links und rechts liegenden ausgewählten Objekten/dem linken und rechten Seitenrand zu verteilen<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
-                        <li><b>Vertikal verteilen</b> <img alt="Vertikal verteilen" src="../images/distributevertically.png" /> - um Objekte gleichmäßig zwischen den am weitesten oben und unten liegenden ausgewählten Objekten / dem oberen und unteren Rand der Seite zu verteilen<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
+                <li>Klicken Sie erneut auf das Symbol <div class = "icon icon-align_toptoolbar"></div> <b>Ausrichten</b> und wählen Sie den gewünschten Verteilungstyp aus der Liste aus:<ul>
+                        <li><b>Horizontal verteilen</b> <div class = "icon icon-distributehorizontally"></div> - um Objekte gleichmäßig zwischen den am weitesten links und rechts liegenden ausgewählten Objekten/dem linken und rechten Seitenrand zu verteilen<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
+                        <li><b>Vertikal verteilen</b> <div class = "icon icon-distributevertically"></div> - um Objekte gleichmäßig zwischen den am weitesten oben und unten liegenden ausgewählten Objekten / dem oberen und unteren Rand der Seite zu verteilen<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
                     </ul>
                 </li>
             </ol>
             <p>Alternativ können Sie mit der rechten Maustaste auf die ausgewählten Objekte klicken, wählen Sie anschließend im Kontextmenü die Option <b>Ausrichten</b> aus und nutzen Sie dann eine der verfügbaren Verteilungsoptionen.</p>
             <p class="note"><b>Hinweis</b>: Die Verteilungsoptionen sind deaktiviert, wenn Sie weniger als drei Objekte auswählen.</p>
             <h3>Objekte gruppieren</h3>
-            <p>Um <em>zwei oder mehr</em> Objekte zu <b>gruppieren</b> oder die <b>Gruppierung aufzuheben</b>, klicken Sie auf den Pfeil links neben dem Symbol <img alt="Gruppieren" src="../images/group_toptoolbar.png" /> <b>Gruppieren</b> in der Registerkarte <b>Layout</b> und wählen Sie die gewünschte Option aus der Liste aus:</p>
+            <p>Um <em>zwei oder mehr</em> Objekte zu <b>gruppieren</b> oder die <b>Gruppierung aufzuheben</b>, klicken Sie auf den Pfeil links neben dem Symbol <div class = "icon icon-group_toptoolbar"></div> <b>Gruppieren</b> in der Registerkarte <b>Layout</b> und wählen Sie die gewünschte Option aus der Liste aus:</p>
             <ul>
-                <li><b>Gruppieren</b> <img alt="Gruppieren" src="../images/group.png" /> - um mehrere Objekte zu einer Gruppe zusammenzufügen, so dass sie gleichzeitig gedreht, verschoben, skaliert, ausgerichtet, angeordnet, kopiert, eingefügt und formatiert werden können, wie ein einzelnes Objekt.</li>
-                <li><b>Gruppierung aufheben</b> <img alt="Gruppierung aufheben" src="../images/ungroup.png" /> - um die ausgewählte Gruppe der zuvor gruppierten Objekte aufzulösen.</li>
+                <li><b>Gruppieren</b> <div class = "icon icon-group"></div> - um mehrere Objekte zu einer Gruppe zusammenzufügen, so dass sie gleichzeitig gedreht, verschoben, skaliert, ausgerichtet, angeordnet, kopiert, eingefügt und formatiert werden können, wie ein einzelnes Objekt.</li>
+                <li><b>Gruppierung aufheben</b> <div class = "icon icon-ungroup"></div> - um die ausgewählte Gruppe der zuvor gruppierten Objekte aufzulösen.</li>
             </ul>
             <p>Alternativ können Sie mit der rechten Maustaste auf die ausgewählten Objekte klicken, wählen Sie anschließend im Kontextmenü die Option <b>Anordnung</b> aus und nutzen Sie dann die Optionen <b>Gruppieren</b> oder <b>Gruppierung</b> aufheben.</p>
             <p class="note"><b>Hinweis</b>: Die Option <b>Gruppieren</b> ist deaktiviert, wenn Sie weniger als zwei Objekte auswählen. Die Option <b>Gruppierung aufheben</b> ist nur verfügbar, wenn Sie eine zuvor gruppierte Objektgruppe auswählen.</p>
             <h3>Objekte anordnen</h3>
-            <p>Um <b>Objekte anzuordnen</b> (z.B. die Reihenfolge bei einer Überlappung zu ändern), klicken Sie auf die Smbole <img alt="Eine Ebene nach vorne" src="../images/bringforward_toptoolbar.png" /> <b>eine Ebene nach vorne</b> und <img alt="Eine Ebene nach hinten" src="../images/sendbackward_toptoolbar.png" /> <b>eine Ebene nach hinten</b> in der Registerkarte <b>Layout</b> und wählen Sie die gewünschte Anordnung aus der Liste aus.</p>
-			<p>Um das/die ausgewählte(n) Objekt(e) nach vorne zu bringen, klicken Sie auf das Symbol <img alt="Eine Ebene nach vorne" src="../images/bringforward_toptoolbar.png" /> <b>Eine Ebene nach vorne</b> in der Registerkarte <b>Layout</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:</p>
+            <p>Um <b>Objekte anzuordnen</b> (z.B. die Reihenfolge bei einer Überlappung zu ändern), klicken Sie auf die Smbole <div class = "icon icon-bringforward_toptoolbar"></div> <b>eine Ebene nach vorne</b> und <div class = "icon icon-sendbackward_toptoolbar"></div> <b>eine Ebene nach hinten</b> in der Registerkarte <b>Layout</b> und wählen Sie die gewünschte Anordnung aus der Liste aus.</p>
+			<p>Um das/die ausgewählte(n) Objekt(e) nach vorne zu bringen, klicken Sie auf das Symbol <div class = "icon icon-bringforward_toptoolbar"></div> <b>Eine Ebene nach vorne</b> in der Registerkarte <b>Layout</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:</p>
             <ul>
-                <li><b>In den Vordergrund</b> <img alt="In den Vordergrund" src="../images/bringtofront.png" /> - Objekt(e) in den Vordergrund bringen.</li>
-                <li><b>Eine Ebene nach vorne</b> <img alt="Eine Ebene nach vorne" src="../images/bringforward.png" /> - um ausgewählte Objekte eine Ebene nach vorne zu schieben.</li>
+                <li><b>In den Vordergrund</b> <div class = "icon icon-bringtofront"></div> - Objekt(e) in den Vordergrund bringen.</li>
+                <li><b>Eine Ebene nach vorne</b> <div class = "icon icon-bringforward"></div> - um ausgewählte Objekte eine Ebene nach vorne zu schieben.</li>
             </ul>
-            <p>Um das/die ausgewählte(n) Objekt(e) nach hinten zu verschieben, klicken Sie auf den Pfeil <img alt="Eine Ebene nach hinten" src="../images/sendbackward_toptoolbar.png" /> <b>nach hinten verschieben</b> in der Registerkarte <b>Layout</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:</p>
+            <p>Um das/die ausgewählte(n) Objekt(e) nach hinten zu verschieben, klicken Sie auf den Pfeil <div class = "icon icon-sendbackward_toptoolbar"></div> <b>nach hinten verschieben</b> in der Registerkarte <b>Layout</b> und wählen Sie den gewünschten Ausrichtungstyp aus der Liste aus:</p>
             <ul>
-                <li><b>In den Hintergrund</b> <img alt="In den Hintergrund" src="../images/sendtoback.png" /> - um ein Objekt/Objekte in den Hintergrund zu schieben.</li>
-                <li><b>Eine Ebene nach hinten</b> <img alt="Eine Ebene nach hinten" src="../images/sendbackward.png" /> - um ausgewählte Objekte nur eine Ebene nach hinten zu schieben.</li>
+                <li><b>In den Hintergrund</b> <div class = "icon icon-sendtoback"></div> - um ein Objekt/Objekte in den Hintergrund zu schieben.</li>
+                <li><b>Eine Ebene nach hinten</b> <div class = "icon icon-sendbackward"></div> - um ausgewählte Objekte nur eine Ebene nach hinten zu schieben.</li>
             </ul>
             <p>Alternativ können Sie mit der rechten Maustaste auf die ausgewählten Objekte klicken, wählen Sie anschließend im Kontextmenü die Option <b>Anordnen</b> aus und nutzen Sie dann eine der verfügbaren Optionen.</p>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Zu Ausrichtungstypen in einem Absatz gehören die Folgenden: Linksbündig, Rechtsbündig, Im Blocksatz, Zentriert" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,10 +21,10 @@
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b>.</li>
                 <li>
                     Wählen Sie den gewünschten Ausrichtungstyp:<ul>
-                        <li>Um den Text <b>linksbündig</b> auszurichten (der linke Textrand wird am linken Seitenrand ausgerichtet, der rechte Textrand bleibt wie vorher), klicken Sie aufs Symbol <b>Linksbündig</b> <img alt="Linksbündig ausrichten" src="../images/alignleft.png" /> auf der oberen Symbolleiste.</li>
-                        <li>Um den Text <b>zentriert</b> auszurichten (rechter und linker Textrand bleiben ungleichmäßig), klicken Sie aufs Symbol <b>Zentriert</b> <img alt="Zentrieren" src="../images/aligncenter.png" /> auf der oberen Symbolleiste.</li>
-                        <li>Um den Text <b>rechtsbündig</b> auszurichten (der rechte Textrand verläuft parallel zum rechten Seitenrand, der linke Textrand bleibt ungleichmäßig), klicken Sie auf der oberen Symbolleiste auf das Symbol <b>Rechtsbündig</b> <img alt="Rechtsbündig ausrichten" src="../images/alignright.png" />.</li>
-                        <li>Um den Text <b>im Blocksatz</b> auszurichten (der Text wird gleichmäßig ausgerichtet, dazu werden zusätzliche Leerräume im Text eingefügt), klicken Sie aufs Symbol <b>Blocksatz</b> <img alt="Blocksatz" src="../images/onecolumn.png" /> auf der oberen Symbolleiste.</li>
+                        <li>Um den Text <b>linksbündig</b> auszurichten (der linke Textrand wird am linken Seitenrand ausgerichtet, der rechte Textrand bleibt wie vorher), klicken Sie aufs Symbol <b>Linksbündig</b> <div class = "icon icon-alignleft"></div> auf der oberen Symbolleiste.</li>
+                        <li>Um den Text <b>zentriert</b> auszurichten (rechter und linker Textrand bleiben ungleichmäßig), klicken Sie aufs Symbol <b>Zentriert</b> <div class = "icon icon-aligncenter"></div> auf der oberen Symbolleiste.</li>
+                        <li>Um den Text <b>rechtsbündig</b> auszurichten (der rechte Textrand verläuft parallel zum rechten Seitenrand, der linke Textrand bleibt ungleichmäßig), klicken Sie auf der oberen Symbolleiste auf das Symbol <b>Rechtsbündig</b> <div class = "icon icon-alignright"></div>.</li>
+                        <li>Um den Text <b>im Blocksatz</b> auszurichten (der Text wird gleichmäßig ausgerichtet, dazu werden zusätzliche Leerräume im Text eingefügt), klicken Sie aufs Symbol <b>Blocksatz</b> <div class = "icon icon-onecolumn"></div> auf der oberen Symbolleiste.</li>
                     </ul>
             </ol>
             <p>Die Ausrichtungparameter sind im <b>Paragraph - Erweiterte Einstellungen</b> verfügbar.</p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Learn how to select background color for a paragraph" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,23 +18,23 @@
 			<p>Im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> der gesamte Absatz, einschließlich Leerzeichen und Zeilenabständen wird mit der gewählten Farbe hinterlegt.</p>
 			<p>Einen Absatz mit Farbe hinterlegen oder die aktuelle Farbe ändern:</p>
 			<ol>
-				<li>Wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie auf das Symbol <img alt="Farbschema ändern" src="../images/changecolorscheme.png" /> <b>Farbschema ändern</b> und wählen Sie aus den verfügbaren Vorlagen ein Farbschema für Ihr Dokument aus.</li>
+				<li>Wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie auf das Symbol <div class = "icon icon-changecolorscheme"></div> <b>Farbschema ändern</b> und wählen Sie aus den verfügbaren Vorlagen ein Farbschema für Ihr Dokument aus.</li>
 				<li>Postitionieren Sie den Cursor innerhalb des gewünschten Absatzes oder wählen Sie mehrere Absätze mit der Maus aus oder markieren Sie den gesamten Text mithilfe der Tastenkombination <b>Strg+A</b>.</li>
 				<li>Öffnen Sie die Farbpalette mit den verfügbaren Farben. Sie haben dazu verschiedene Möglichkeiten:<ul>
-				<li>Klicken Sie auf der Registerkarte <b>Start</b> auf das Pfeilsymbol <img alt="Hintergrundfarbe Absatz" src="../images/backgroundcolor.png" /> oder</li>
+				<li>Klicken Sie auf der Registerkarte <b>Start</b> auf das Pfeilsymbol <div class = "icon icon-backgroundcolor"></div> oder</li>
 				<li>klicken Sie in der rechten Seitenleiste auf das Farbfeld neben der Überschrift <b>Hintergrundfarbe</b> oder</li>
 				<li>klicken Sie in der rechten Seitenleiste auf den Verweis "Erweiterte Einstellungen anzeigen" oder wählen Sie über einen Rechtsklick im Kontextmenü die Option "Absatz Erweiterte Einstellungen“ aus und wechseln Sie dann im Fenster "Absatz - Erweiterte Einstellungen" in die Registerkarte "Rahmen &amp; Füllungen" und klicken Sie auf das Farbfeld neben der Beschriftung <b>Hintergrundfarbe</b>.</li>
 				</ul>
 				</li>
 				<li>Wählen Sie eine beliebige Farbe auf den verfügbaren <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">Paletten</a> aus.</li>
 			</ol>
-			<p>Nachdem Sie die über das <img alt="Hintergrundfarbe Absatz" src="../images/backgroundcolor.png" /> Symbol die gewünschte Farbe ausgewählt haben, können Sie diese Farbe auf jeden ausgewählten Absatz anwenden, indem Sie einfach auf das <img alt="Ausgewählte Absatzhintergrundfarbe" src="../images/backgroundcolor_selected.png" /> Symbol klicken (die ausgewählte Farbe wird angezeigt), ohne diese Farbe erneut auf der Palette auswählen zu müssen. Beachten Sie, dass die ausgewählte Farbe nicht für im Schnellzugriff gespeichert wird, wenn Sie die Option <b>Hintergrundfarbe</b> in der rechten Seitenleiste oder im Fenster "Absatz - Erweiterte Einstellungen" verwenden. (Diese Optionen können nützlich sein, wenn Sie über das <img alt="Hintergrundfarbe Absatz" src="../images/backgroundcolor.png" /> Symbol eine allgemeine Farbe für das Dokument festgelegt haben und für einen bestimmten Absatz eine andere Hintergrundfarbe auswählen möchten).</p>
+			<p>Nachdem Sie die über das <div class = "icon icon-backgroundcolor"></div> Symbol die gewünschte Farbe ausgewählt haben, können Sie diese Farbe auf jeden ausgewählten Absatz anwenden, indem Sie einfach auf das <div class = "icon icon-backgroundcolor_selected"></div> Symbol klicken (die ausgewählte Farbe wird angezeigt), ohne diese Farbe erneut auf der Palette auswählen zu müssen. Beachten Sie, dass die ausgewählte Farbe nicht für im Schnellzugriff gespeichert wird, wenn Sie die Option <b>Hintergrundfarbe</b> in der rechten Seitenleiste oder im Fenster "Absatz - Erweiterte Einstellungen" verwenden. (Diese Optionen können nützlich sein, wenn Sie über das <div class = "icon icon-backgroundcolor"></div> Symbol eine allgemeine Farbe für das Dokument festgelegt haben und für einen bestimmten Absatz eine andere Hintergrundfarbe auswählen möchten).</p>
 			<hr />
 			<p>Die Hintergrundfarbe eines bestimmten Absatzes löschen:</p>
 			<ol>
 				<li>Postitionieren Sie den Cursor innerhalb des gewünschten Absatzes oder wählen Sie mehrere Absätze mit der Maus aus oder markieren Sie den gesamten Text mithilfe der Tastenkombination <b>Strg+A</b>.</li>
 				<li>Klicken Sie in der rechten Seitenleiste auf das Farbfeld neben der Überschrift <b>Hintergrundfarbe</b>.</li>
-				<li>Wählen Sie das <img alt="Keine Füllung" src="../images/nofill.png" /> Symbol.</li>
+				<li>Wählen Sie das <div class = "icon icon-nofill"></div> Symbol.</li>
 			</ol>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Erfahren Sie, wie man Farbschema in einem Dokument ändert" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -15,9 +16,9 @@
         </div>
 			<h1>Farbschema ändern</h1>
             <p>Im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> farbschemata werden auf das gesamte Dokument angewendet. Sie werden verwendet, um das Aussehen Ihres Dokuments zu verändern, da sie die Palette der <b>Designfarben</b> für Dokumentenelemente (<a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">Schrift</a>, <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)">Hintergrund</a>, <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">Tabellen</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">AutoFormen</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">Diagramme</a>). Wenn Sie bestimmte <b>Designfarben</b> auf Dokumentenelemente angewendet haben und dann ein anderes <b>Farbschema</b> auswählen, ändern sich die Farben in Ihrem Dokument entsprechend.</p>
-            <p>Um ein Farbschema zu ändern, klicken Sie auf den Abwärtspfeil neben dem Symbol <b>Farbschema ändern</b> <img alt="Farbschema ändern" src="../images/changecolorscheme.png" /> in der Registerkarte <b>Start</b> auf der Haupt-Symbolleiste und wählen Sie aus den verfügbaren Vorgaben das gewünschte Farbschema aus: <b>New Office</b>, <b>Office</b>, <b>Graustufen</b>, <b>Apex</b>, <b>Aspect</b>, <b>Civic</b>, <b>Concourse</b>, <b>Equity</b>, <b>Flow</b>, <b>Foundry</b>, <b>Median</b>, <b>Metro</b>, <b>Module</b>, <b>Odulent</b>, <b>Oriel</b>, <b>Origin</b>, <b>Paper</b>, <b>Solstice</b>, <b>Technic</b>, <b>Trek</b>, <b>Urban</b>, <b>Verve</b>. Das ausgewählte Farbschema wird in der Liste hervorgehoben.</p>
+            <p>Um ein Farbschema zu ändern, klicken Sie auf den Abwärtspfeil neben dem Symbol <b>Farbschema ändern</b> <div class = "icon icon-changecolorscheme"></div> in der Registerkarte <b>Start</b> auf der Haupt-Symbolleiste und wählen Sie aus den verfügbaren Vorgaben das gewünschte Farbschema aus: <b>New Office</b>, <b>Office</b>, <b>Graustufen</b>, <b>Apex</b>, <b>Aspect</b>, <b>Civic</b>, <b>Concourse</b>, <b>Equity</b>, <b>Flow</b>, <b>Foundry</b>, <b>Median</b>, <b>Metro</b>, <b>Module</b>, <b>Odulent</b>, <b>Oriel</b>, <b>Origin</b>, <b>Paper</b>, <b>Solstice</b>, <b>Technic</b>, <b>Trek</b>, <b>Urban</b>, <b>Verve</b>. Das ausgewählte Farbschema wird in der Liste hervorgehoben.</p>
 			<p><img alt="Farbschemata" src="../images/colorscheme.png" /></p>
-			<p>Wenn Sie das gewünschte Farbschema ausgewählt haben, können Sie im Fenster Farbpalette die Farben für das jeweilige Dokumentelement auswählen, auf das Sie die Farbe anwenden möchten. Bei den meisten Dokumentelementen können Sie auf das Fenster mit der Farbpalette zugreifen, indem Sie das gewünschte Element markieren und in der rechten Seitenleiste auf das farbige Feld klicken. Für die Schriftfarbe kann dieses Fenster über den Abwärtspfeil neben dem Symbol <b>Schriftfarbe</b> <img alt="Schriftfarbe" src="../images/fontcolor.png" /> in der Registerkarte <b>Start</b> geöffnet werden. Folgende Farbauswahlmöglichkeiten stehen zur Verfügung:</p>
+			<p>Wenn Sie das gewünschte Farbschema ausgewählt haben, können Sie im Fenster Farbpalette die Farben für das jeweilige Dokumentelement auswählen, auf das Sie die Farbe anwenden möchten. Bei den meisten Dokumentelementen können Sie auf das Fenster mit der Farbpalette zugreifen, indem Sie das gewünschte Element markieren und in der rechten Seitenleiste auf das farbige Feld klicken. Für die Schriftfarbe kann dieses Fenster über den Abwärtspfeil neben dem Symbol <b>Schriftfarbe</b> <div class = "icon icon-fontcolor"></div> in der Registerkarte <b>Start</b> geöffnet werden. Folgende Farbauswahlmöglichkeiten stehen zur Verfügung:</p>
 			<p><img alt="Palette" src="../images/palette.png" /></p>
 					<ul>
 						<li><b>Designfarben</b> - die Farben, die dem gewählten Farbschema der Tabelle entsprechen.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Change the text wrapping style to specify the way the object is positioned relative to the text." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,28 +21,28 @@
             <ol>
                 <li>Wählen Sie über einen Linksklick ein einzelnes Objekt auf der Seite aus. Um ein Textfeld auszuwählen, klicken Sie auf den Rahmen und nicht auf den darin befindlichen Text.</li>
                 <li>Öffnen Sie die Einstellungen für den Textumbruch:<ul>
-                        <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Layout</b> und klicken Sie auf das den Pfeil neben dem Symbol <img alt="Textumbruch" src="../images/wrapping_toptoolbar.png" /> <b>Textumbruch</b> oder</li>
+                        <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Layout</b> und klicken Sie auf das den Pfeil neben dem Symbol <div class = "icon icon-wrapping_toptoolbar"></div> <b>Textumbruch</b> oder</li>
                         <li>klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie die Option <b>Textumbruch</b> im Kontextmenü aus oder</li>
                         <li>klicken Sie mit der rechten Maustaste auf das Objekt, wählen Sie die Option <b>Erweiterte Einstellungen</b> und wechseln Sie im Fenster <b>Erweitere Einstellungen</b> in die Gruppe <b>Textumbruch</b>.</li>
                     </ul>
                 </li>
                 <li>Wählen Sie den gewünschten Umbruchstil aus:<ul>
                         <li>
-                            <p><img alt="Textumbruch - Mit Text verschieben" src="../images/wrappingstyle_inline_toptoolbar.png" /> <b>Mit Text verschieben</b> - das Bild wird als Teil vom Text behandelt und wenn der Text verschoben wird, wird auch das Bild verschoben. In diesem Fall sind die Positionsoptionen nicht verfügbar.</p>
+                            <p><div class = "icon icon-wrappingstyle_inline_toptoolbar"></div> <b>Mit Text verschieben</b> - das Bild wird als Teil vom Text behandelt und wenn der Text verschoben wird, wird auch das Bild verschoben. In diesem Fall sind die Positionsoptionen nicht verfügbar.</p>
                             <p>Falls einer der folgenden Stile gewählt ist, kann das Bild unabhängig vom Text verschoben werden und genau auf der Seite positioniert werden:</p>
                         </li>
-                        <li><p><img alt="Textumbruch - Quadrat" src="../images/wrappingstyle_square_toptoolbar.png" /> <b>Quadrat</b> - der Text bricht um den rechteckigen Kasten, der das Bild begrenzt.</p></li>
-                        <li><p><img alt="Textumbruch - Eng" src="../images/wrappingstyle_tight_toptoolbar.png" /> <b>Eng</b> - der Text bricht um die Bildkanten um.</p></li>
-                        <li><p><img alt="Textumbruch - Transparent" src="../images/wrappingstyle_through_toptoolbar.png" /> <b>Transparent</b> - der Text bricht um die Bildkanten um und füllt den offenen weißen Raum innerhalb des Bildes. Wählen Sie für diesen Effekt die Option <b>Umbruchsgrenze bearbeiten</b> aus dem Rechtsklickmenü aus.</p></li>
-                        <li><p><img alt="Textumbruch - Oben und unten" src="../images/wrappingstyle_topandbottom_toptoolbar.png" /> <b>Oben und unten</b> - der Text ist nur oberhalb und unterhalb des Bildes.</p></li>
-                        <li><p><img alt="Textumbruch - Vorne" src="../images/wrappingstyle_infront_toptoolbar.png" /> <b>Vor den Text</b> - das Bild überlappt mit dem Text.</p></li>
-                        <li><p><img alt="Textumbruch - Hinten" src="../images/wrappingstyle_behind_toptoolbar.png" /> <b>Hinter den Text</b> - der Text überlappt sich mit dem Bild.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_square_toptoolbar"></div> <b>Quadrat</b> - der Text bricht um den rechteckigen Kasten, der das Bild begrenzt.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_tight_toptoolbar"></div> <b>Eng</b> - der Text bricht um die Bildkanten um.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_through_toptoolbar"></div> <b>Transparent</b> - der Text bricht um die Bildkanten um und füllt den offenen weißen Raum innerhalb des Bildes. Wählen Sie für diesen Effekt die Option <b>Umbruchsgrenze bearbeiten</b> aus dem Rechtsklickmenü aus.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_topandbottom_toptoolbar"></div> <b>Oben und unten</b> - der Text ist nur oberhalb und unterhalb des Bildes.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_infront_toptoolbar"></div> <b>Vor den Text</b> - das Bild überlappt mit dem Text.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_behind_toptoolbar"></div> <b>Hinter den Text</b> - der Text überlappt sich mit dem Bild.</p></li>
                     </ul>
                 </li>
             </ol>
             <p>Wenn Sie die Formate <b>Quadrat</b>, <b>Eng</b>, <b>Transparent</b> oder <b>Oben und unten</b> auswählen, haben Sie die Möglichkeit zusätzliche Parameter festzulegen - <b>Abstand vom Text</b> auf allen Seiten (oben, unten, links, rechts). Klicken Sie dazu mit der rechten Maustaste auf das Objekt, wählen Sie die Option <b>Erweiterte Einstellungen</b> und wechseln Sie im Fenster <b>Erweiterte Einstellungen</b> in die Gruppe <b>Textumbruch</b>. Wählen Sie die gewünschten Werte und klicken Sie auf <b>OK</b>.</p>
             <p>Wenn Sie einen anderen Umbruchstil als <b>Inline</b> auswählen, steht Ihnen im Fenster <b>Erweiterte Einstellungen</b> auch die Gruppe <b>Position</b> zur Verfügung. Weitere Informationen zu diesen Parametern finden Sie auf den entsprechenden Seiten mit Anweisungen zum Umgang mit <a href="../UsageInstructions/InsertAutoshapes.htm#position" onclick="onhyperlinkclick(this)">Formen</a>, <a href="../UsageInstructions/InsertImages.htm#position" onclick="onhyperlinkclick(this)">Bildern</a> oder <a href="../UsageInstructions/InsertCharts.htm#position" onclick="onhyperlinkclick(this)">Diagrammen</a>.</p>
-            <p>Wenn Sie einen anderen Umbruchstil als <b>Inline</b> auswählen, haben Sie außerdem die Möglichkeit, die Umbruchränder für <b>Bilder</b> oder <b>Formen</b> zu bearbeiten. Klicken Sie mit der rechten Maustaste auf das Objekt, wählen Sie die Option <b>Textumbruch</b> im Kontextmenü aus und klicken Sie auf <b>Bearbeitung der Umbruchsgrenze</b>. Sie können auch die Option <b>Umbrüche</b> -> <b>Umbruchsgrenze bearbeiten</b> auf der Registerkarte <b>Layout</b> in der oberen Symbolleiste verwenden. Ziehen Sie die Umbruchpunkte, um die Grenze benutzerdefiniert anzupassen. Um einen neuen Rahmenpunkt zu erstellen, klicken Sie auf eine beliebige Stelle auf der roten Linie und ziehen Sie diese an die gewünschte Position. <img alt="Umbruchgrenze bearbeiten" src="../images/wrap_boundary.png" /></p>
+            <p>Wenn Sie einen anderen Umbruchstil als <b>Inline</b> auswählen, haben Sie außerdem die Möglichkeit, die Umbruchränder für <b>Bilder</b> oder <b>Formen</b> zu bearbeiten. Klicken Sie mit der rechten Maustaste auf das Objekt, wählen Sie die Option <b>Textumbruch</b> im Kontextmenü aus und klicken Sie auf <b>Bearbeitung der Umbruchsgrenze</b>. Sie können auch die Option <b>Umbrüche</b> -> <b>Umbruchsgrenze bearbeiten</b> auf der Registerkarte <b>Layout</b> in der oberen Symbolleiste verwenden. Ziehen Sie die Umbruchpunkte, um die Grenze benutzerdefiniert anzupassen. Um einen neuen Rahmenpunkt zu erstellen, klicken Sie auf eine beliebige Stelle auf der roten Linie und ziehen Sie diese an die gewünschte Position. <div class = "big big-wrap_boundary"></div></p>
             <h3>Textumbruch für Tabellen ändern</h3>
             <p>Für <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">Tabellen</a> stehen die folgenden Umbruchstile zur Verfügung: <b>Mit Text verschieben</b> und <b>Umgebend</b>.</p>
             <p>Ändern des aktuellen Umbruchstils:</p>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Konvertieren Sie Endnoten in Fußnoten und umgekehrt mit ein paar Mausklicken" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -16,7 +17,7 @@
         <h1>Fußnoten und Endnoten konvertieren</h1>
         <p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>ONLYOFFICE Dokumenteneditor</b></a> ermöglicht das schnelle <b>Konvertieren von Fuß-</b> und <b>Endnoten</b> und umgekehrt, z. B. wenn Sie sehen, dass einige Fußnoten im resultierenden Dokument am Ende platziert werden sollten. Verwenden Sie das entsprechende Tool für eine mühelose Konvertierung, anstatt sie als Endnoten neu zu erstellen.</p>
         <ol>
-            <li>Klicken Sie auf den Pfeil neben dem Symbol <img alt="Fußnoten Symbol" src="../images/addfootnote.png" /> <b>Fußnote</b> auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste,</li>
+            <li>Klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b> auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste,</li>
             <li>Bewegen Sie den Mauszeiger über den Menüpunkt <b>Alle Anmerkungen konvertieren</b> und wählen Sie eine der Optionen aus der Liste rechts aus:
                 <p><img alt="Fußnoten_Endnoten konvertieren" src="../images/convert_all_notes.png" /></p></li>
                 <li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Copy/clear text formatting within your document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,20 +18,20 @@
 			<p>Kopieren einer bestimmte Textformatierung im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>:</p>
 			<ol>
 				<li>Wählen Sie mit der Maus oder <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">mithilfe der Tastatur</a> den Textabschnitt aus, dessen Formatierung Sie kopieren möchten.</li>
-				<li>Klicken Sie in der oberen Symbolleiste unter der Registerkarte <b>Start</b> auf das Symbol <img alt="Format übertragen" src="../images/copystyle.png" /> <b>Format übertragen</b> (der Mauszeiger ändert sich wie folgt <img alt="Mauszeiger bei der Übertragung der Formatierung" src="../images/paste_style.png" />).</li>
+				<li>Klicken Sie in der oberen Symbolleiste unter der Registerkarte <b>Start</b> auf das Symbol <div class = "icon icon-copystyle"></div> <b>Format übertragen</b> (der Mauszeiger ändert sich wie folgt <div class = "icon icon-paste_style"></div>).</li>
 				<li>Wählen Sie einen Textabschnitt, auf den Sie die Formatierung übertragen möchten.</li>
 			</ol>
             <p>Übertragung der Formatierung auf mehrere Textabschnitte.</p>
             <ol>
                 <li>Wählen Sie mit der Maus oder <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">mithilfe der Tastatur</a> den Textabschnitt aus, dessen Formatierung Sie kopieren möchten.</li>
-                <li>Führen Sie in der oberen Symbolleiste unter der Registerkarte <b>Start</b> einen Doppelklick auf das Symbol <img alt="Format übertragen" src="../images/copystyle.png" /> <b>Format übertragen</b> aus (der Mauszeiger ändert sich wie folgt <img alt="Mauszeiger bei der Übertragung der Formatierung" src="../images/paste_style.png" /> und das Symbol <b>Format übertragen</b> bleibt ausgewählt: <img alt="Format auf mehrere Textstellen übertragen" src="../images/copystyle_selected.png" />).</li>
+                <li>Führen Sie in der oberen Symbolleiste unter der Registerkarte <b>Start</b> einen Doppelklick auf das Symbol <div class = "icon icon-copystyle"></div> <b>Format übertragen</b> aus (der Mauszeiger ändert sich wie folgt <div class = "icon icon-paste_style"></div> und das Symbol <b>Format übertragen</b> bleibt ausgewählt: <div class = "icon icon-copystyle_selected"></div>).</li>
                 <li>Markieren Sie die gewünschten Textabschnitte Schritt für Schritt, um die Formatierung zu übertragen.</li>
-                <li>Wenn Sie den Modus beenden möchten, klicken Sie erneut auf das Symbol <b>Format übertragen</b> <img alt="Format auf mehrere Textstellen übertragen" src="../images/copystyle_selected.png" /> oder drücken Sie die <b>ESC-Taste</b> auf Ihrer Tastatur.</li>
+                <li>Wenn Sie den Modus beenden möchten, klicken Sie erneut auf das Symbol <b>Format übertragen</b> <div class = "icon icon-copystyle_selected"></div> oder drücken Sie die <b>ESC-Taste</b> auf Ihrer Tastatur.</li>
             </ol>
 			<p>Wenn Sie die angewandte Formatierung wieder entfernen möchten,</p>
 			<ol>
 				<li>markieren Sie den entsprechenden Textabschnitt und</li>
-				<li>klicken Sie auf der oberen Symbolleiste, unter der Registerkarte <b>Start</b> auf das Symbol <b>Formatierung löschen</b> <img alt="Formatierung löschen" src="../images/clearstyle.png" />.</li>
+				<li>klicken Sie auf der oberen Symbolleiste, unter der Registerkarte <b>Start</b> auf das Symbol <b>Formatierung löschen</b> <div class = "icon icon-clearstyle"></div>.</li>
 			</ol>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Perform the basic operations with the document text: copy, paste, undo, redo" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,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>
@@ -29,7 +30,7 @@
             </ul>
 			<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>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>
@@ -44,8 +45,8 @@
             <h3>Vorgänge rückgängig machen/wiederholen</h3>
 			<p>Verwenden Sie die entsprechenden Symbole, um Vorgänge rückgängig zu machen/zu wiederholen oder nutzen Sie die entsprechenden Tastenkombinationen:</p>
             <ul>
-                <li><b>Rückgängig</b> – klicken Sie im linken Teil der Kopfzeile des Editors auf das Symbol <b>Rückgängig</b> <img alt="Rückgängig machen" src="../images/undo.png" /> oder verwenden Sie die Tastenkombination <b>STRG+Z</b>, um die zuletzt durchgeführte Aktion rückgängig zu machen.</li>
-                <li><b>Wiederholen</b> – klicken Sie im linken Teil der Kopfzeile des Editors auf das Symbol <b>Wiederholen</b> <img alt="Wiederholen" src="../images/redo.png" /> oder verwenden Sie die Tastenkombination <b>STRG+Y</b>, um die zuletzt durchgeführte Aktion zu wiederholen.</li>
+                <li><b>Rückgängig</b> – klicken Sie im linken Teil der Kopfzeile des Editors auf das Symbol <b>Rückgängig</b> <div class = "icon icon-undo"></div> oder verwenden Sie die Tastenkombination <b>STRG+Z</b>, um die zuletzt durchgeführte Aktion rückgängig zu machen.</li>
+                <li><b>Wiederholen</b> – klicken Sie im linken Teil der Kopfzeile des Editors auf das Symbol <b>Wiederholen</b> <div class = "icon icon-redo"></div> oder verwenden Sie die Tastenkombination <b>STRG+Y</b>, um die zuletzt durchgeführte Aktion zu wiederholen.</li>
             </ul>
             <p class="note"><b>Hinweis</b>: Wenn Sie ein Dokument im Modus <b>Schnell</b> gemeinsam bearbeiten, ist die Option letzten rückgängig gemachten Vorgang <b>wiederherstellen</b> nicht verfügbar.</p>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Erstellen Sie Aufzählungen oder nummerierte Listen in einem Dokument und ändern Sie die Gliederung der Seiten" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,9 +21,9 @@
                 <li>Wechseln Sie zur Registerkarte <b>Startseite</b> der oberen Symbolleiste.</li>
                 <li>
                     Wählen Sie den Listentyp aus, den Sie starten möchten:<ul>
-                        <li><b>Eine ungeordnete Liste</b> mit Markierungen wird mithilfe des <b>Aufzählungssymbols</b> <img alt="Aufzählungszeichen" src="../images/bullets.png" /> in der oberen Symbolleiste erstellt</li>
+                        <li><b>Eine ungeordnete Liste</b> mit Markierungen wird mithilfe des <b>Aufzählungssymbols</b> <div class = "icon icon-bullets"></div> in der oberen Symbolleiste erstellt</li>
                         <li>
-                            <b>Die geordnete Liste</b> mit Ziffern oder Buchstaben wird mithilfe des <b>Nummerierungssymbols</b> <img alt="Nummerierte Liste" src="../images/numbering.png" /> in der oberen Symbolleiste erstellt
+                            <b>Die geordnete Liste</b> mit Ziffern oder Buchstaben wird mithilfe des <b>Nummerierungssymbols</b> <div class = "icon icon-numbering"></div> in der oberen Symbolleiste erstellt
                             <p class="note">Klicken Sie auf den Abwärtspfeil neben dem Symbol <b>Aufzählungszeichen</b> oder <b>Nummerierung</b>, um auszuwählen, wie die Liste aussehen soll.</p>
                         </li>
                     </ul>
@@ -30,8 +31,8 @@
                 <li>Jedes Mal, wenn Sie die <b>Eingabetaste</b> am Ende der Zeile drücken, wird ein neues geordnetes oder ungeordnetes Listenelement angezeigt. Um dies zu stoppen, drücken Sie die <b>Rücktaste</b> und fahren Sie mit dem allgemeinen Textabsatz fort.</li>
             </ol>
             <p>Das Programm erstellt auch automatisch nummerierte Listen, wenn Sie Ziffer 1 mit einem Punkt oder einer Klammer und einem Leerzeichen danach eingeben: <b>1.</b>, <b>1)</b>. Listen mit Aufzählungszeichen können automatisch erstellt werden, wenn Sie die Zeichen <b>-</b>, <b>*</b> und ein Leerzeichen danach eingeben.</p>
-            <p>Sie können den Texteinzug in den Listen und ihre Verschachtelung auch mithilfe der Symbole <b>Liste mit mehreren Ebenen</b> <img alt="Liste mit mehreren Ebenen" src="../images/outline.png" />, <b>Einzug verringern</b> <img alt="Einzug verkleinern" src="../images/decreaseindent.png" /> und <b>Einzug vergrößern</b> <img alt="Einzug vergrößern" src="../images/increaseindent.png" /> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste ändern.</p>
-            <p>Um die Listenebene zu ändern, klicken Sie auf das Symbol <b>Nummerierung</b> <img alt="Nummerierte Liste" src="../images/numbering.png" />, <b>Aufzählungszeichen</b> <img alt="Aufzählungszeichen" src="../images/bullets.png" /> oder <b>Liste mit mehreren Ebenen</b> <img alt="Liste mit mehreren Ebenen Symbol" src="../images/outline.png" /> und wählen Sie die Option <b>Listenebene ändern</b>, oder positionieren Sie den Cursor am Zeilenanfang und drücken Sie die Tabulatortaste auf der Tastatur, um zur nächsten Ebene der Liste zu gelangen. Fahren Sie mit der erforderlichen Listenebene fort.</p>
+            <p>Sie können den Texteinzug in den Listen und ihre Verschachtelung auch mithilfe der Symbole <b>Liste mit mehreren Ebenen</b> <div class = "icon icon-outline"></div>, <b>Einzug verringern</b> <div class = "icon icon-decreaseindent"></div> und <b>Einzug vergrößern</b> <div class = "icon icon-increaseindent"></div> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste ändern.</p>
+            <p>Um die Listenebene zu ändern, klicken Sie auf das Symbol <b>Nummerierung</b> <div class = "icon icon-numbering"></div>, <b>Aufzählungszeichen</b> <div class = "icon icon-bullets"></div> oder <b>Liste mit mehreren Ebenen</b> <div class = "icon icon-outline"></div> und wählen Sie die Option <b>Listenebene ändern</b>, oder positionieren Sie den Cursor am Zeilenanfang und drücken Sie die Tabulatortaste auf der Tastatur, um zur nächsten Ebene der Liste zu gelangen. Fahren Sie mit der erforderlichen Listenebene fort.</p>
             <p><img alt="Listenebene ändern" src="../images/listlevel.png" /></p>
             <p class="note">Die zusätzlichen Einrückungs- und Abstandsparameter können in der rechten Seitenleiste und im Fenster mit den erweiterten Einstellungen geändert werden. Weitere Informationen finden Sie im Abschnitt <a href="ParagraphIndents.htm" onclick="onhyperlinkclick(this)">Ändern von Absatzeinzügen</a> und <a href="LineSpacing.htm" onclick="onhyperlinkclick(this)">Festlegen des Absatzzeilenabstands</a>.</p>
 
@@ -68,7 +69,7 @@
             <p>So ändern Sie die Listeneinstellungen mit Aufzählungszeichen oder nummerierten Listen, z. B. Aufzählungszeichen / Nummerntyp, Ausrichtung, Größe und Farbe:</p>
             <ol>
                 <li>Klicken Sie auf ein vorhandenes Listenelement oder wählen Sie den Text aus, den Sie als Liste formatieren möchten.</li>
-                <li>Klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Aufzählungszeichen</b> <img alt="Aufzählungszeichen" src="../images/bullets.png" /> oder <b>Nummerierung</b> <img alt="Nummerierte Liste" src="../images/numbering.png" />.</li>
+                <li>Klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Aufzählungszeichen</b> <div class = "icon icon-bullets"></div> oder <b>Nummerierung</b> <div class = "icon icon-numbering"></div>.</li>
                 <li>Wählen Sie die Option <b>Listeneinstellungen</b>.</li>
                 <li>
                     Das Fenster <b>Listeneinstellungen</b> wird geöffnet. Das Fenster mit den Listen mit Aufzählungszeichen sieht folgendermaßen aus:
@@ -90,7 +91,7 @@
             <p>So ändern Sie die Einstellungen für mehrstufige Listen:</p>
             <ol>
                 <li>Klicken Sie auf ein Listenelement.</li>
-                <li>Klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Mehrstufige Liste</b> <img alt="Mehrstufige Liste" src="../images/outline.png" />.</li>
+                <li>Klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Mehrstufige Liste</b> <div class = "icon icon-outline"></div>.</li>
                 <li>Wählen Sie die Option <b>Listeneinstellungen</b>.</li>
                 <li>
                     Das Fenster <b>Listeneinstellungen</b> wird geöffnet. Das Fenster mit den Einstellungen für mehrstufige Listen sieht folgendermaßen aus:

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Create a Table of Contents" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -25,7 +26,7 @@
                 </li>
             </ol>
             <p id="navigation"><b>Überschriften verwalten</b></p>
-            <p>Wenn Sie die Überschriften formatiert haben, können Sie in der linken Seitenleiste auf <img alt="Navigation" src="../images/navigationicon.png" /> <b>Navigation</b> klicken, um das Fenster mit den Überschriften mit den entsprechenden Verschachtelungsebenen zu öffnen. Dieser Bereich ermöglicht die einfache Navigation zwischen Überschriften im Dokumenttext sowie die Verwaltung der Überschriftenstruktur</p>
+            <p>Wenn Sie die Überschriften formatiert haben, können Sie in der linken Seitenleiste auf <div class = "icon icon-navigationicon"></div> <b>Navigation</b> klicken, um das Fenster mit den Überschriften mit den entsprechenden Verschachtelungsebenen zu öffnen. Dieser Bereich ermöglicht die einfache Navigation zwischen Überschriften im Dokumenttext sowie die Verwaltung der Überschriftenstruktur</p>
             <p>Klicken Sie mit der rechten Maustaste auf eine Überschrift in der Liste und verwenden Sie eine der verfügbaren Optionen aus dem Menü:</p>
             <p><img alt="Navigationsleiste" src="../images/navigationpanel.png" /></p>
             <ul>
@@ -41,35 +42,35 @@
                 <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>
             <h3>Inhaltsverzeichnis in Ihr aktuelles Dokument einfügen</h3>
             <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"><b>Hinweis</b>: Die Formatierung des Inhaltsverzeichnisses kann später über die Einstellungen des Inhaltsverzeichnisses angepasst werden.</p>
                 </li>
             </ol>
-            <p>Das Inhaltsverzeichnis wird an der aktuellen Cursorposition eingefügt. Um die Position des Inhaltsverzeichnisses zu ändern, können Sie das Inhaltsverzeichnis auswählen (Steuerelement) und einfach an die gewünschte Position ziehen. Klicken Sie dazu auf die Schaltfläche <img alt="Inhaltsverzeichnis - Steuerelement" src="../images/toccontentcontrol.png" />, in der oberen linken Ecke des Inhaltsverzeichnisses und ziehen Sie es mit gedrückter Maustaste an die gewünschte Position.</p>
+            <p>Das Inhaltsverzeichnis wird an der aktuellen Cursorposition eingefügt. Um die Position des Inhaltsverzeichnisses zu ändern, können Sie das Inhaltsverzeichnis auswählen (Steuerelement) und einfach an die gewünschte Position ziehen. Klicken Sie dazu auf die Schaltfläche <div class = "icon icon-toccontentcontrol"></div>, in der oberen linken Ecke des Inhaltsverzeichnisses und ziehen Sie es mit gedrückter Maustaste an die gewünschte Position.</p>
             <p><img alt="Inhaltsverzeichnis verschieben" src="../images/tocmove.png" /></p>
             <p>Um zwischen den Überschriften zu navigieren, drücken Sie die Taste <b>STRG</b> auf Ihrer Tastatur und klicken Sie dann auf die gewünschte Überschrift im Inhaltsverzeichnis. Sie wechseln automatisch auf die entsprechende Seite.</p>
             <h3>Inhaltsverzeichnis anpassen</h3>
             <p><b>Inhaltsverzeichnis aktualisieren</b></p>
             <p>Nach dem Erstellen des Inhaltsverzeichnisses, können Sie Ihren Text weiter bearbeiten und beispielsweise neue Kapitel hinzufügen, die Reihenfolge ändern, Absätze entfernen oder den Text für eine Überschrift erweitern. Durch solche Vorgänge ändern sich die Seitenzahlen. Über die Option <b>Aktualisieren</b> übernehmen Sie alle Änderungen in Ihrem Inhaltsverzeichnis.</p>
-            <p>Klicken Sie auf der Registerkarte <b>Referenzen</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Aktualisieren" src="../images/tocrefreshicon.png" /> <b>Aktualisieren</b> und wählen Sie die gewünschte Option aus dem Menü aus.</p>
+            <p>Klicken Sie auf der Registerkarte <b>Referenzen</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-tocrefreshicon"></div> <b>Aktualisieren</b> und wählen Sie die gewünschte Option aus dem Menü aus.</p>
             <ul>
                 <li><b>Gesamtes Verzeichnis aktualisieren</b> - die von Ihnen eingefügten Überschriften werden dem Verzeichnis hinzugefügt, gelöschte Überschriften werden entfernt, bearbeitete (umbenannte) Überschriften sowie Seitenzahlen werden aktualisiert.</li>
                 <li><b>Nur Seitenzahlen aktualisieren</b> - nur die Seitenzahlen werden aktualisiert, Änderungen an Überschriften werden nicht übernommen.</li>
             </ul>
-            <p>Alternativ können Sie das Inhaltsverzeichnis direkt im Dokument auswählen, wählen Sie dann oben im Verzeichnis das Symbol <img alt="Aktualisieren" src="../images/tocrefreshiconcc.png" /> <b>Aktualisieren</b> aus, um die zuvor beschriebenen Optionen anzuzeigen.</p>
+            <p>Alternativ können Sie das Inhaltsverzeichnis direkt im Dokument auswählen, wählen Sie dann oben im Verzeichnis das Symbol <div class = "icon icon-tocrefreshiconcc"></div> <b>Aktualisieren</b> aus, um die zuvor beschriebenen Optionen anzuzeigen.</p>
             <p><img alt="Inhaltsverzeichnis aktualisieren" src="../images/tocrefreshcc.png" /></p>
             <p>Sie können auch einfach mit der rechten Maustaste an eine beliebige Stelle im Inhaltsverzeichnis klicken und die gewünschte Option aus dem Kontextmenü auswählen.</p>
             <p><img alt="Kontextmenü" src="../images/tocrefreshcontextual.png" /></p>
             <p><b>Einstellungen für das Inhaltsverzeichnis anpassen</b></p>
             <p>Zum Öffnen der Einstellungen für das Inhaltsverzeichnis, gehen Sie vor wie folgt:</p>
             <ul>
-                <li>Klicken Sie auf den Pfeil neben <img alt="Inhaltsverzeichnis" src="../images/tocicon.png" /> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste und wählen Sie die Option <b>Einstellungen</b> aus dem Menü aus.</li>
+                <li>Klicken Sie auf den Pfeil neben <div class = "icon icon-tocicon"></div> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste und wählen Sie die Option <b>Einstellungen</b> aus dem Menü aus.</li>
                 <li>Wählen Sie das Inhaltsverzeichnis aus, klicken Sie auf den Pfeil und wählen Sie die Option <b>Einstellungen</b> aus dem Menü aus.<p><img alt="Inhaltsverzeichnis - Optionen" src="../images/tocsettingscc.png" /></p>    
                 </li>
                 <li>Klicken Sie mit der rechten Maustaste an eine beliebige Stelle im Inhaltsverzeichnis und wählen sie die Option <b>Inhaltsverzeichnis - Einstellungen</b> aus dem Kontextmenü aus.</li>
@@ -94,7 +95,7 @@
             <p><b>Stil des Inhaltsverzeichnisses anpassen</b></p>
             <p>Nachdem Sie eine der Standardvorlagen für Verzeichnisstile Fenster <b>Inhaltsverzeichnis - Einstellungen</b> angewendet haben, können Sie diesen Stil auch ändern, sodass der Text im Feld Inhaltsverzeichnis Ihren Wünschen entsprechend formatiert ist.</p>
             <ol>
-                <li>Wählen Sie den Text innerhalb des Inhaltsverzeichnisfelds aus, z. B. indem Sie im Steuerungskasten für das Inhaltsverzeichnis auf die Schaltfläche <img alt="Inhaltsverzeichnis - Steuerelement" src="../images/toccontentcontrol.png" /> klicken.</li>
+                <li>Wählen Sie den Text innerhalb des Inhaltsverzeichnisfelds aus, z. B. indem Sie im Steuerungskasten für das Inhaltsverzeichnis auf die Schaltfläche <div class = "icon icon-toccontentcontrol"></div> klicken.</li>
                 <li>Sie können die Elemente des Inhaltsverzeichnisses wie gewohnt formatieren und z. B. Schriftart, Größe, Farbe oder den Stile für die Schriftgestaltung ändern.</li>
                 <li>Aktualisieren Sie entsprechend die Stile für die Elemente jeder Ebene. Um den Stil zu aktualisieren, klicken Sie mit der rechten Maustaste auf das formatierte Element, wählen Sie im Kontextmenü die Option <b>Formatierung als Stil</b> aus und klicken Sie auf die Option <b>toc N Stil aktualisieren</b> (Stil <em>toc 2</em> entspricht Elementen der <em>Ebene 2</em>, Stil <em>toc 3</em> entspricht Elementen der <em>Ebene 3</em> usw.).<p><img alt="Stili des Inhaltsverzeichnisses aktualisieren" src="../images/toccustomize.png" /></p>
                 </li>
@@ -103,7 +104,7 @@
             <p><b>Inhaltsverzeichnis entfernen</b></p>
             <p>Inhaltsverzeichnis aus dem Dokument entfernen:</p>
             <ul>
-                <li>Klicken Sie auf den Pfeil neben <img alt="Inhaltsverzeichnis" src="../images/tocicon.png" /> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste und wählen Sie die Option <b>Inhaltsverzeichnis entfernen</b> aus dem Menü aus,</li>
+                <li>Klicken Sie auf den Pfeil neben <div class = "icon icon-tocicon"></div> <b>Inhaltsverzeichnis</b> in der oberen Symbolleiste und wählen Sie die Option <b>Inhaltsverzeichnis entfernen</b> aus dem Menü aus,</li>
                 <li>oder klicken Sie auf den Pfeil neben dem Steuerelement Inhaltsverzeichnis und wählen Sie die Option <b>Inhaltsverzeichnis entfernen</b> aus.</li>
             </ul>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Apply font decoration styles: increment/decrement values, bold, italic, underline, strikeout, superscript/subscript" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -19,32 +20,32 @@
 			<table>
 				<tr>
 					<td>Fett</td>
-					<td><img alt="Fett" src="../images/bold.png" /></td>
+					<td><div class = "icon icon-bold"></div></td>
 					<td>Der gewählte Textabschnitt wird durch fette Schrift hervorgehoben.</td>
 				</tr>
 				<tr>
 					<td>Kursiv</td>
-					<td><img alt="Kursiv" src="../images/italic.png" /></td>
+					<td><div class = "icon icon-italic"></div></td>
 					<td>Der gewählte Textabschnitt wird durch die Schrägstellung der Zeichen hervorgehoben.</td>
 				</tr>
 				<tr>
 					<td>Unterstrichen</td>
-					<td><img alt="Unterstrichen" src="../images/underline.png" /></td>
+					<td><div class = "icon icon-underline"></div></td>
 					<td>Der gewählten Textabschnitt wird mit einer Linie unterstrichen.</td>
 				</tr>
 				<tr>
 					<td>Durchgestrichen</td>
-					<td><img alt="Durchgestrichen" src="../images/strike.png" /></td>
+					<td><div class = "icon icon-strike"></div></td>
 					<td>Der gewählten Textabschnitt wird mit einer Linie durchgestrichen.</td>
 				</tr>
 				<tr>
 					<td>Hochgestellt</td>
-					<td><img alt="Hochgestellt" src="../images/sup.png" /></td>
+					<td><div class = "icon icon-sup"></div></td>
 					<td>Der gewählte Textabschnitt wird verkleinert und im oberen Teil der Textzeile platziert z.B. in Bruchzahlen.</td>
 				</tr>
 				<tr>
 					<td>Tiefgestellt</td>
-					<td><img alt="Tiefgestellt" src="../images/sub.png" /></td>
+					<td><div class = "icon icon-sub"></div></td>
 					<td>Der gewählte Textabschnitt wird verkleinert und im unteren Teil der Textzeile platziert z.B. in chemischen Formeln.</td>
 				</tr>
 			</table>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Change the following text formatting parameters: font type, size, and color" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -19,37 +20,37 @@
 			<table>
 				<tr>
                     <td width="10%">Schriftart</td>
-                    <td width="15%"><img alt="Schriftart" src="../images/fontfamily.png" /></td>
+                    <td width="15%"><div class = "big big-fontfamily"></div></td>
 					<td>Wird verwendet, um eine Schriftart aus der Liste mit den verfügbaren Schriftarten zu wählen. <span class="desktopDocumentFeatures">Wenn eine gewünschte Schriftart nicht in der Liste verfügbar ist, können Sie diese runterladen und in Ihrem Betriebssystem speichern. Anschließend steht Ihnen diese Schrift in der <em>Desktop-Version</em> zur Nutzung zur Verfügung.</span></td>
 				</tr>
 				<tr>
 					<td>Schriftgröße</td>
-					<td><img alt="Schriftgröße" src="../images/fontsize.png" /></td>
+					<td><div class = "icon icon-fontsize"></div></td>
 					<td>Über diese Option kann der gewünschte Wert für die Schriftgröße aus der Dropdown-List ausgewählt werden (die Standardwerte sind: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 und 96). Sie können auch manuell einen Wert in das Feld für die Schriftgröße eingeben und anschließend die <em>Eingabetaste</em> drücken.</td>
 				</tr>
                 <tr>
                     <td>Schrift vergrößern</td>
-                    <td><img alt="Schrift vergrößern" src="../images/larger.png" /></td>
+                    <td><div class = "icon icon-larger"></div></td>
                     <td>Wird verwendet, um die Schriftgröße mit jedem Klick auf das Symbol um einen Punkt zu vergrößern.</td>
                 </tr>
                 <tr>
                     <td>Schrift verkleinern</td>
-                    <td><img alt="Schrift verkleinern" src="../images/smaller.png" /></td>
+                    <td><div class = "icon icon-smaller"></div></td>
                     <td>Wird verwendet, um die Schriftgröße mit jedem Klick auf das Symbol um einen Punkt zu verkleinern.</td>
                 </tr>
 				<tr>
 					<td>Groß-/Kleinschreibung</td>
-					<td><img alt="Groß-/Kleinschreibung" src="../images/change_case.png" /></td>
+					<td><div class = "icon icon-change_case"></div></td>
 					<td>Wird verwendet, um die Groß- und Kleinschreibung zu ändern. <em>Ersten Buchstaben im Satz großschreiben</em> - die Buchstaben werden wie in einem Satz geschrieben. <em>Kleinbuchstaben</em> - alle Buchstaben sind klein. <em>GROSSBUCHSTABEN</em> - alle Buchstaben sind groß. <em>Ersten Buchstaben im Wort großschreiben</em> - jedes Wort beginnt mit einem Großbuchstaben. <em>gROSS-/kLEINSCHREIBUNG</em> - kehrt die Groß- und Kleinschreibung des ausgewählten Textes oder des Wortes um, an dem sich der Mauszeiger befindet.</td>
 				</tr>
 				<tr>
 					<td>Texthervorhebungsfarbe</td>
-					<td><img alt="Texthervorhebungsfarbe" src="../images/highlightcolor.png" /></td>
-					<td>Wird verwendet, um den Hintergrund für einzelne Sätze, Phrasen, Wörter oder sogar Zeichen durch Hinzufügen eines Farbbandes zu markieren, das den Effekt eines Textmarker um den Text herum imitiert. Wählen Sie dazu den gewünschten Text aus und klicken Sie anschließend auf den Abwärtspfeil neben dem Symbol, um eine Farbe auf der Palette auszuwählen (diese Farbeinstellung ist unabhängig vom ausgewählten <b>Farbschema</b> und enthält 16 Farben) - die Farbe wird auf den ausgewählten Text angewendet. Alternativ können Sie zuerst eine Hervorhebungsfarbe auswählen und dann den Text mit der Maus auswählen - der Mauszeiger sieht in diesem Fall so aus <img alt="Mauszeiger bei der Texthervorhebung" src="../images/highlight_color_mouse_pointer.png" /> und Sie können mehrere verschiedene Teile Ihres Textes nacheinander markieren. Um die Hervorhebung zu beenden, klicken Sie einfach erneut auf das Symbol. Um die Markierungsfarbe zu löschen, klicken Sie auf die Option <b>Keine Füllung</b>. Bei <b>Hervorhebungen</b> werden nur die Zeichen hinterlegt, im Gegensatz zu <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)"><b>Hintergrundfarbe,</b></a> <img alt="Hintergrundfarbe Absatz" src="../images/backgroundcolor.png" /> die auf den gesamten Absatz angewendet wird und auch Leerräume im Absatz farblich hinterlegt.</td>
+					<td><div class = "icon icon-highlightcolor"></div></td>
+					<td>Wird verwendet, um den Hintergrund für einzelne Sätze, Phrasen, Wörter oder sogar Zeichen durch Hinzufügen eines Farbbandes zu markieren, das den Effekt eines Textmarker um den Text herum imitiert. Wählen Sie dazu den gewünschten Text aus und klicken Sie anschließend auf den Abwärtspfeil neben dem Symbol, um eine Farbe auf der Palette auszuwählen (diese Farbeinstellung ist unabhängig vom ausgewählten <b>Farbschema</b> und enthält 16 Farben) - die Farbe wird auf den ausgewählten Text angewendet. Alternativ können Sie zuerst eine Hervorhebungsfarbe auswählen und dann den Text mit der Maus auswählen - der Mauszeiger sieht in diesem Fall so aus <div class = "icon icon-highlight_color_mouse_pointer"></div> und Sie können mehrere verschiedene Teile Ihres Textes nacheinander markieren. Um die Hervorhebung zu beenden, klicken Sie einfach erneut auf das Symbol. Um die Markierungsfarbe zu löschen, klicken Sie auf die Option <b>Keine Füllung</b>. Bei <b>Hervorhebungen</b> werden nur die Zeichen hinterlegt, im Gegensatz zu <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)"><b>Hintergrundfarbe,</b></a> <div class = "icon icon-backgroundcolor"></div> die auf den gesamten Absatz angewendet wird und auch Leerräume im Absatz farblich hinterlegt.</td>
 				</tr>
 				<tr>
 					<td>Schriftfarbe</td>
-					<td><img alt="Schriftfarbe" src="../images/fontcolor.png" /></td>
+					<td><div class = "icon icon-fontcolor"></div></td>
 					<td>Wird verwendet, um die Farbe der Buchstaben/Zeichen im Text zu ändern. Standardmäßig wird die Schriftfarbe in einem neuen leeren Dokument automatisch festgelegt, als schwarze Schrift auf weißem Hintergrund. Wenn Sie die Hintergrundfarbe auf schwarz ändern, wechselt die Schriftfarbe automatisch auf weiß, damit sie weiter zu erkennen ist. Um eine andere Farbe auszuwählen, klicken Sie auf den Abwärtspfeil neben dem Symbol und wählen Sie eine Farbe aus den verfügbaren Paletten aus (die angezeigten <b>Designfarben</b> sind abhängig vom ausgewählten <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">Farbschema</a>. Wenn Sie die Standardschriftfarbe geändert haben, können Sie die Standardfarbe für die ausgewählte Textpassage über die Option <b>Automatisch</b> in der Gruppe Farbpaletten wiederherstellen.</td>
 				</tr>
 			</table>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Apply formatting styles: normal, heading, quote, list, etc." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Code-hervorheben-Plugins für ONLYOFFICE Editoren, mit dem Code mit dem bereits angepassten Stil in Dokumente eingefügt werden kann" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -17,7 +18,7 @@
         <p>Im <a href="https://www.onlyoffice.com/de/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> können Sie hervorgehobenen Code mit dem schon angepassten Stil entsprechend der Programmiersprache und dem Farbstil des von Ihnen ausgewählten Programms einfügen.</p>
         <ol>
             <li>Gehen Sie zu Ihrem Dokument und platzieren Sie den Cursor an der Stelle, an der Sie den Code einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Code hervorheben Plugin - Symbol" src="../images/highlight.png" /> <b>Code hervorheben</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-highlight"></div> <b>Code hervorheben</b> aus.</li>
             <li>Geben Sie die Programmier<b>sprache</b> an.</li>
             <li>Wählen Sie einen Code-<b>Stil</b> aus, der so aussieht, als wäre er in diesem Programm geöffnet.</li>
             <li>Geben Sie an, ob Sie Tabulatoren durch Leerzeichen ersetzen möchten.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Fügen Sie eine Form in Ihrem Dokument ein und ändern Sie ihre Eigenschaften" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,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: Grundformen, figürliche Pfeile, Mathematik, Diagramme, Sterne und Bänder, Beschriftungen, Schaltflächen, Rechtecke, Linien,</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>
@@ -27,10 +28,10 @@
 			</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>Verwenden Sie zum Ändern der Position für die automatische Form das <img alt="Pfeil" src="../images/arrow.png" /> Symbol, das angezeigt wird, nachdem Sie den Mauszeiger über die automatische Form bewegt haben. Ziehen Sie die automatische Form an die gewünschte Position, ohne die Maustaste loszulassen. Wenn Sie die automatische Form 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). Um die automatische Form in Schritten von einem Pixel zu verschieben, halten Sie die <b>Strg-Taste</b> gedrückt und verwenden Sie die Tastenkombinationen. Halten Sie beim Ziehen die <b>Umschalttaste</b> gedrückt, um die automatische Form streng horizontal / vertikal zu verschieben und zu verhindern, dass sie sich senkrecht bewegt.</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 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 für die automatische Form das <div class = "icon icon-arrow"></div> Symbol, das angezeigt wird, nachdem Sie den Mauszeiger über die automatische Form bewegt haben. Ziehen Sie die automatische Form an die gewünschte Position, ohne die Maustaste loszulassen. Wenn Sie die automatische Form 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). Um die automatische Form in Schritten von einem Pixel zu verschieben, halten Sie die <b>Strg-Taste</b> gedrückt und verwenden Sie die Tastenkombinationen. Halten Sie beim Ziehen die <b>Umschalttaste</b> gedrückt, um die automatische Form streng horizontal / vertikal zu verschieben und zu verhindern, dass sie sich senkrecht bewegt.</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"><b>Hinweis</b>: 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>Passen Sie die Autoshape-Einstellungen an</h3>
@@ -39,12 +40,12 @@
                 <li><b>Ausschneiden, Kopieren, Einfügen</b> - Standardoptionen, mit denen ein ausgewählter Text / ein ausgewähltes Objekt ausgeschnitten oder kopiert und eine zuvor ausgeschnittene / kopierte Textpassage oder ein Objekt an die aktuelle Zeigerposition eingefügt wird.</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>
 			<hr />
-			<p>Einige der Einstellungen für die automatische Form können über die Registerkarte Formeinstellungen in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf die Form und wählen Sie rechts das Symbol <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" />.  Hier können Sie folgende Eigenschaften ändern:</p>
+			<p>Einige der Einstellungen für die automatische Form können über die Registerkarte Formeinstellungen in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf die Form und wählen Sie rechts das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div>.  Hier können Sie folgende Eigenschaften ändern:</p>
 			<ul>
 			<li  id="shape_fill"><b>Füllen</b> - Verwenden Sie diesen Abschnitt, um die automatische Formfüllung auszuwählen. Sie können folgende Optionen auswählen:<ul>
 				<li><b>Farbfüllung</b> - Wählen Sie diese Option aus, um die Volltonfarbe anzugeben, mit der Sie den Innenraum der ausgewählten Autoform füllen möchten.<p><img alt="Einfarbige Füllung" src="../images/fill_color.png" /></p>
@@ -69,7 +70,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>
@@ -112,10 +113,10 @@
 				</ul>
 			</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>
@@ -150,15 +151,15 @@
 			<p>Die Registerkarte <b>Textumbruch</b> enthält die folgenden Parameter:</p>
 			<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/InsertBookmarks.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Lesezeichen ermöglichen den schnellen Wechsel zu einer bestimmten Position im aktuellen Dokument oder das Hinzufügen eines Links an dieser Position im Dokument" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -23,14 +24,14 @@
                 </ul>
                 </li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Verweise</b>.</li>
-                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Lesezeichen" src="../images/bookmark.png" /> <b>Lesezeichen</b>.</li>
+                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-bookmark"></div> <b>Lesezeichen</b>.</li>
 				<li>Geben Sie im sich öffnenden Fenster <b>Lesezeichen</b> den <b>Namen des Lesezeichens</b> ein und klicken Sie auf die Schaltfläche <b>Hinzufügen</b> - das Lesezeichen wird der unten angezeigten Lesezeichenliste hinzugefügt.<p class="note"><b>Hinweis</b>: Der Name des Lesezeichens sollte mit einem Buchstaben beginnen, er kann jedoch auch Zahlen enthalten. Der Name des Lesezeichens darf keine Leerzeichen enthalten, ein Unterstrich "_" ist jedoch möglich.</p>
                     <p><img alt="Fenster Lesezeichen" src="../images/bookmark_window.png" /></p>
                 </li>
 			</ol>
             <p>So wechseln Sie zu einem der hinzugefügten Lesezeichen im Dokumenttext:</p>
             <ol>
-                <li>Klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Verweise</b> auf das Symbol <img alt="Lesezeichen" src="../images/bookmark.png" /> <b>Lesezeichen</b>.</li>
+                <li>Klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Verweise</b> auf das Symbol <div class = "icon icon-bookmark"></div> <b>Lesezeichen</b>.</li>
                 <li>Wählen Sie im sich öffnenden Fenster <b>Lesezeichen</b> das Lesezeichen aus, zu dem Sie springen möchten. Um das erforderliche Lesezeichen in der Liste zu finden, können Sie die Liste nach <b>Name</b> oder <b>Position</b> eines Lesezeichens im Dokumenttext sortieren.</li>
                 <li>Aktivieren Sie die Option <b>Versteckte Lesezeichen</b>, um ausgeblendete Lesezeichen in der Liste anzuzeigen (z. B. die vom Programm automatisch erstellten Lesezeichen, wenn Sie Verweise auf einen bestimmten Teil des Dokuments hinzufügen. Wenn Sie beispielsweise einen Hyperlink zu einer bestimmten Überschrift innerhalb des Dokuments erstellen, erzeugt der Dokumenteditor automatisch ein ausgeblendetes Lesezeichen für das Ziel dieses Links).</li>
                 <li>Klicken Sie auf die Schaltfläche <b>Gehe zu</b> - der Zeiger wird an der Stelle innerhalb des Dokuments positioniert, an der das ausgewählte Lesezeichen hinzugefügt wurde oder es wird die entsprechende Textpassage ausgewählt.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie Formen in Ihrem Dokument ein und ändern Sie ihre Eigenschaften" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -19,7 +20,7 @@
             <ol>
                 <li>Setzen Sie den Zeiger an die Stelle, an der Sie ein Diagramm hinzufügen möchten.</li>
                 <li>Wechseln Sie zur Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.</li>
-                <li>Klicken Sie auf das Symbol <img alt="Diagramm Symbol" src="../images/insertchart.png" /> <b>Diagramm</b> in der oberen Symbolleiste.</li>
+                <li>Klicken Sie auf das Symbol <div class = "icon icon-insertchart"></div> <b>Diagramm</b> in der oberen Symbolleiste.</li>
                 <li>
                     Wählen Sie den gewünschten Diagrammtyp aus der Liste der verfügbaren Typen aus:
                     <details class="details-example">
@@ -99,10 +100,10 @@
                 <li>
                     Danach erscheint das Fenster <b>Diagrammeditor</b>, in dem Sie die erforderlichen Daten mit den folgenden Steuerelementen in die Zellen eingeben können:
                     <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" /> zum Rückgängigmachen und Wiederherstellen von Aktionen</li>
-                        <li><img alt="Funktion einfügen" src="../images/insertfunction.png" /> zum Einfügen einer Funktion</li>
-                        <li><img alt="Dezimalstelle löschen" src="../images/decreasedec.png" /> und <img alt="Dezimalstelle hinzufügen" src="../images/increasedec.png" /> zum Verringern und Erhöhen von Dezimalstellen</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> zum Rückgängigmachen und Wiederherstellen von Aktionen</li>
+                        <li><div class = "icon icon-insertfunction"></div> zum Einfügen einer Funktion</li>
+                        <li><div class = "icon icon-decreasedec"></div> und <div class = "icon icon-increasedec"></div> zum Verringern und Erhöhen von Dezimalstellen</li>
                         <li><img alt="Zahlenformat" src="../images/numberformat.png" /> zum Ändern des Zahlenformats, d. h. der Art und Weise, wie die von Ihnen eingegebenen Zahlen in Zellen angezeigt werden</li>
                         <li><img alt="Diagrammtyp" src="../images/charttypebutton.png" /> zur Auswahl eines anderen Diagrammtyps.</li>
                     </ul>
@@ -119,7 +120,7 @@
                                     <b>Diagrammdatenbereich</b> - wählen Sie Daten für Ihr Diagramm aus.
                                     <ul>
                                         <li>
-                                            Klicken Sie auf das Symbol <img alt="Quelldatenbereich - Symbol" src="../images/changerange.png" /> rechts neben dem Feld <b>Diagrammdatenbereich</b>, um den Datenbereicht auszuwählen.
+                                            Klicken Sie auf das Symbol <div class = "icon icon-changerange"></div> rechts neben dem Feld <b>Diagrammdatenbereich</b>, um den Datenbereicht auszuwählen.
                                             <p><img alt="Datenbereich auswählen - Fenster" src="../images/selectdata.png" /></p>
                                         </li>
                                     </ul>
@@ -129,7 +130,7 @@
                                     <ul>
                                         <li>Im Feld <b>Legendeneinträge (Reihen)</b> klicken Sie auf die Schaltfläche <b>Hinzufügen</b>.</li>
                                         <li>
-                                            Im Fenster <b>Datenreihe bearbeiten</b> geben Sie einen neuen Legendeneintrag ein oder klicken Sie auf das Symbol <img alt="Quelldatenbereich - Symbol" src="../images/changerange.png" /> rechts neben dem Feld <b>Reihenname</b>.
+                                            Im Fenster <b>Datenreihe bearbeiten</b> geben Sie einen neuen Legendeneintrag ein oder klicken Sie auf das Symbol <div class = "icon icon-changerange"></div> rechts neben dem Feld <b>Reihenname</b>.
                                             <p><img alt="Datenreihe bearbeiten - Fenster" src="../images/editseries.png" /></p>
                                         </li>
                                     </ul>
@@ -139,7 +140,7 @@
                                     <ul>
                                         <li>Im Feld <b>Horizontale Achsenbeschriftungen (Rubrik)</b> klicken Sie auf <b>Bearbeiten</b>.</li>
                                         <li>
-                                            Im Feld <b>Der Bereich von Achsenbeschriftungen</b> geben Sie die gewünschten Achsenbeschriftungen ein oder klicken Sie auf das Symbol <img alt="Quelldatenbereich - Symbol" src="../images/changerange.png" /> rechts neben dem Feld <b>Der Bereich von Achsenbeschriftungen</b>, um den Datenbereich auszuwählen.
+                                            Im Feld <b>Der Bereich von Achsenbeschriftungen</b> geben Sie die gewünschten Achsenbeschriftungen ein oder klicken Sie auf das Symbol <div class = "icon icon-changerange"></div> rechts neben dem Feld <b>Der Bereich von Achsenbeschriftungen</b>, um den Datenbereich auszuwählen.
                                             <p><img alt="Der Bereich von Achsenbeschriftungen - Fenster" src="../images/axislabels.png" /></p>
                                         </li>
                                     </ul>
@@ -322,14 +323,14 @@
             </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>
             <hr />
             <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"><b>Hinweis</b>: Die Option <b>Schatten</b> anzeigen ist auch auf der Registerkarte <b>Formeinstellungen</b> verfügbar, für Diagrammelemente jedoch deaktiviert.</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>
@@ -338,7 +339,7 @@
             <hr />
             <h3>Passen Sie die Diagrammeinstellungen an</h3>
             <p><img class="floatleft" alt="Registerkarte Diagrammeinstellungen" src="../images/right_chart.png" /></p>
-            <p>Einige Diagrammeigenschaften können über der Registerkarte <b>Diagrammeinstellungen</b> in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf das Diagramm und wählen Sie rechts das Symbol <b>Diagrammeinstellungen</b> <img alt="Diagrammeinstellungen" src="../images/chart_settings_icon.png" />. Hier können die folgenden Eigenschaften ändern:</p>
+            <p>Einige Diagrammeigenschaften können über der Registerkarte <b>Diagrammeinstellungen</b> in der rechten Seitenleiste geändert werden. Um es zu aktivieren, klicken Sie auf das Diagramm und wählen Sie rechts das Symbol <b>Diagrammeinstellungen</b> <div class = "icon icon-chart_settings_icon"></div>. Hier können die folgenden Eigenschaften ändern:</p>
             <ul style="margin-left: 280px;">
                 <li><b>Größe</b> wird verwendet, um die aktuelle <b>Diagrammbreite</b> und <b>-höhe</b> anzuzeigen.</li>
                 <li><b>Umbruchstil</b> wird verwendet, um einen Textumbruchstil auszuwählen - inline, quadratisch, eng, durch, oben und unten, vorne, hinten (weitere Informationen finden Sie in der Beschreibung der erweiterten Einstellungen unten).</li>
@@ -364,7 +365,7 @@
             <p><img alt="Diagramme - Erweiterte Einstellungen: Größe" src="../images/chart_properties.png" /></p>
             <p>Die Registerkarte <b>Größe</b> enthält die folgenden Parameter:</p>
             <ul>
-                <li><b>Breite</b> und <b>Höhe</b> - Verwenden Sie diese Optionen, um die Diagrammbreite und / oder -höhe zu ändern. Wenn Sie auf die Schaltfläche <b>Konstante Proportionen</b> <img alt="Seitenverhältnis sperren" src="../images/constantproportions.png" /> klicken (in diesem Fall sieht es so aus <img alt="Symbol Seitenverhältnis sperren aktiviert" src="../images/constantproportionsactivated.png" />), werden Breite und Höhe zusammen geändert, wobei das ursprüngliche Diagrammseitenverhältnis beibehalten wird.</li>
+                <li><b>Breite</b> und <b>Höhe</b> - Verwenden Sie diese Optionen, um die Diagrammbreite und / oder -höhe zu ändern. Wenn Sie auf die Schaltfläche <b>Konstante Proportionen</b> <div class = "icon icon-constantproportions"></div> klicken (in diesem Fall sieht es so aus <div class = "icon icon-constantproportionsactivated"></div>), werden Breite und Höhe zusammen geändert, wobei das ursprüngliche Diagrammseitenverhältnis beibehalten wird.</li>
             </ul>
             <p><img alt="Diagramme - Erweiterte Einstellungen: Textumbruch" src="../images/chart_properties_1.png" /></p>
             <p>Die Registerkarte <b>Textumbruch</b> enthält die folgenden Parameter:</p>
@@ -372,15 +373,15 @@
                 <li>
                     <b>Umbruchstil</b> - Verwenden Sie diese Option, um die Position des Diagramms 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 Diagramm wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch das Diagramm. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
+                            <p><div class = "icon icon-wrappingstyle_inline"></div> <b>Inline</b> - Das Diagramm wird wie ein Zeichen als Teil des Textes betrachtet. Wenn sich der Text bewegt, bewegt sich auch das Diagramm. In diesem Fall sind die Positionierungsoptionen nicht zugänglich.</p>
                             <p>Wenn einer der folgenden Stile ausgewählt ist, kann das Diagramm 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 Diagramm begrenzt.</p></li>
-                        <li><p><img alt="Textumbruch - Eng" src="../images/wrappingstyle_tight.png" /> <b>Eng</b> - Der Text umschließt die tatsächlichen Diagrammkanten.</p></li>
-                        <li><p><img alt="Textumbruch - Transparent" src="../images/wrappingstyle_through.png" /> <b>Durch</b> - Der Text wird um die Diagrammkanten gewickelt und füllt den offenen weißen Bereich innerhalb des Diagramms aus.</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 Diagramm.</p></li>
-                        <li><p><img alt="Textumbruch - Vorne" src="../images/wrappingstyle_infront.png" /> <b>Vorne</b> - das Diagramm überlappt dem Text.</p></li>
-                        <li><p><img alt="Textumbruch - Hinten" src="../images/wrappingstyle_behind.png" /> <b>Dahinter</b> - der Text überlappt das Diagramm.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_square"></div> <b>Quadratisch</b> - Der Text umschließt das rechteckige Feld, das das Diagramm begrenzt.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_tight"></div> <b>Eng</b> - Der Text umschließt die tatsächlichen Diagrammkanten.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_through"></div> <b>Durch</b> - Der Text wird um die Diagrammkanten gewickelt und füllt den offenen weißen Bereich innerhalb des Diagramms aus.</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 Diagramm.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_infront"></div> <b>Vorne</b> - das Diagramm überlappt dem Text.</p></li>
+                        <li><p><div class = "icon icon-wrappingstyle_behind"></div> <b>Dahinter</b> - der Text überlappt das Diagramm.</p></li>
                     </ul>
                 </li>
             </ul>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Insert content controls to create a form with input fields that can be filled in by other users, or protect some parts of the document from being edited or deleted" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -22,7 +23,7 @@
             <ol>
                 <li>Positionieren Sie den Einfügepunkt innerhalb einer Textzeile, in die das Steuerelement eingefügt werden soll<br />oder wählen Sie eine Textpassage aus, die Sie zum Steuerungsinhalt machen wollen.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-                <li>Klicken Sie auf den Pfeil neben dem Symbol <img alt="Inhaltssteuerelemente" src="../images/insertccicon.png" /> <b>Inhaltssteuerelemente</b>.</li>
+                <li>Klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-insertccicon"></div> <b>Inhaltssteuerelemente</b>.</li>
                 <li>Wählen sie die Option <b>Inhaltssteuerelement für einfachen Text einfügen</b> aus dem Menü aus.</li>
             </ol>
             <p>Das Steuerelement wird an der Einfügemarke innerhalb einer Zeile des vorhandenen Texts eingefügt. Bei Steuerelementen für einfachen Text können keine Zeilenumbrüche hinzugefügt werden und sie dürfen keine anderen Objekte wie Bilder, Tabellen usw. enthalten.</p>
@@ -31,7 +32,7 @@
             <ol>
                 <li>Positionieren Sie die Einfügemarke am Ende eines Absatzes, nach dem das Steuerelement hinzugefügt werden soll <br />oder wählen Sie einen oder mehrere der vorhandenen Absätze aus, die Sie zum Steuerungsinhalt machen wollen.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-                <li>Klicken Sie auf den Pfeil neben dem Symbol <img alt="Inhaltssteuerelemente" src="../images/insertccicon.png" /> <b>Inhaltssteuerelemente</b>.</li>
+                <li>Klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-insertccicon"></div> <b>Inhaltssteuerelemente</b>.</li>
                 <li>Wählen sie die Option <b>Inhaltssteuerelement für Rich-Text einfügen</b> aus dem Menü aus.</li>
             </ol>
             <p>Das Steuerungselement wird in einem neuen Paragraphen eingefügt. Rich-Text-Inhaltssteuerelemente ermöglichen das Hinzufügen von Zeilenumbrüchen und Sie können multiple Absätze sowie auch Objekte enthalten z. B. Bilder, Tabellen, andere Inhaltssteuerelemente usw.</p>
@@ -47,7 +48,7 @@
             <h3>Einstellungen für Inhaltssteuerelemente ändern</h3>
             <p>Die Einstellungen für Inhaltssteuerelemente öffnen Sie wie folgt:</p>
             <ul>
-                <li>Wählen Sie das gewünschte Inhaltssteuerelement aus und klicken Sie auf den Pfeil neben dem Symbol <img alt="Inhaltssteuerelemente" src="../images/insertccicon.png" /> <b>Inhaltssteuerelemente</b> in der oberen Symbolleiste und wählen Sie dann die Option <b>Einstellungen Inhaltssteuerelemente</b> aus dem Menü aus.</li>
+                <li>Wählen Sie das gewünschte Inhaltssteuerelement aus und klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-insertccicon"></div> <b>Inhaltssteuerelemente</b> in der oberen Symbolleiste und wählen Sie dann die Option <b>Einstellungen Inhaltssteuerelemente</b> aus dem Menü aus.</li>
                 <li>Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Inhaltssteuerelement und nutzen Sie die Option <b>Einstellungen Steuerungselement</b> im Kontextmenü.</li>
             </ul>
             <p>Im sich nun öffnenden Fenstern können Sie die folgenden Parameter festlegen:</p>
@@ -65,7 +66,7 @@
             <p>Es ist auch möglich Inhaltssteuerelemente mit einer bestimmten Farbe hervorzuheben. Inhaltssteuerelemente farblich hervorheben:</p>
             <ol>
                 <li>Klicken Sie auf die Schaltfläche links neben dem Rahmen des Steuerelements, um das Steuerelement auszuwählen.</li>
-                <li>Klicken Sie auf der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Inhaltssteuerelemente" src="../images/insertccicon.png" /> <b>Inhaltssteuerelemente</b>.</li>
+                <li>Klicken Sie auf der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-insertccicon"></div> <b>Inhaltssteuerelemente</b>.</li>
                 <li>Wählen Sie die Option <b>Einstellungen hervorheben</b> aus dem Menü aus.</li>
                 <li>Wählen Sie die gewünschte Farbe aus den verfügbaren Paletten aus: <b>Themenfarben</b>, <b>Standardfarben</b> oder neue <b>benutzerdefinierte Farbe</b> angeben. Um zuvor angewendete Farbmarkierungen zu entfernen, verwenden Sie die Option <b>Keine Markierung</b>.</li>
             </ol>
@@ -73,7 +74,7 @@
             <h3>Inhaltssteuerelemente entfernen</h3>
             <p>Um ein Steuerelement zu entfernen ohne den Inhalt zu löschen, klicken Sie auf das entsprechende Steuerelement und gehen Sie vor wie folgt:</p>
             <ul>
-                <li>Klicken Sie auf den Pfeil neben dem Symbol <img alt="Inhaltssteuerelemente" src="../images/insertccicon.png" /> <b>Inhaltssteuerelemente</b> in der oberen Symbolleiste und wählen Sie dann die Option <b>Steuerelement entfernen</b> aus dem Menü aus.</li>
+                <li>Klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-insertccicon"></div> <b>Inhaltssteuerelemente</b> in der oberen Symbolleiste und wählen Sie dann die Option <b>Steuerelement entfernen</b> aus dem Menü aus.</li>
                 <li>Klicken Sie mit der rechten Maustaste auf das Steuerelement und wählen Sie die Option <b>Steuerungselement entfernen</b> im Kontextmenü aus.</li>
             </ul>
             <p>Um ein Steuerelement einschließlich Inhalt zu entfernen, wählen Sie das entsprechende Steuerelement aus und drücken Sie die Taste <b>Löschen</b> auf der Tastatur.</p>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Verwenden Sie Querverweise, um Links zu erstellen, die zu anderen Teilen desselben Dokuments führen" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Datum und Uhrzeit einfügen" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -18,7 +19,7 @@
         <ol>
             <li>positionieren Sie den Textkursor an der Stelle, an der Sie das <b>Datum</b> und die <b>Uhrzeit</b> einfügen wollen,</li>
             <li>öffnen Sie die Registerkarte <b>Einfügen</b>,</li>
-            <li>klicken Sie das Symbol <b>Datum & Uhrzeit</b> <img alt="Datum und Uhrzeit Symbol" src="../images/date_time_icon.png" /> an,</li>
+            <li>klicken Sie das Symbol <b>Datum & Uhrzeit</b> <div class = "icon icon-date_time_icon"></div> an,</li>
             <li>
                 im geöffneten Fenster <b>Datum & Uhrzeit</b> konfigurieren Sie die folgenden Einstellungen:
                 <ul>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert a drop cap and adjust its frame properties to make your document look more expressive." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -19,19 +20,19 @@
 			<ol>
 				<li>Positionieren Sie den Mauszeiger an der gewünschten Stelle.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-				<li>klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Initial einfügen" src="../images/insert_dropcap_icon.png" /> <b>Initial einfügen</b>.</li>
+				<li>klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-insert_dropcap_icon"></div> <b>Initial einfügen</b>.</li>
 				<li>Wählen Sie im geöffneten Listenmenü die gewünschte Option:<ul>
-				    <li><b>Im Text</b> <img alt="Initial einfügen - Im Text" src="../images/dropcap_text.png" /> - um das Initial innerhalb des Absatzes zu positionieren.</li>
-				    <li><b>Am Seitenrand</b> <img alt="Initial einfügen - Im Seitenrand" src="../images/dropcap_margin.png" /> - um das Initial am linken Seitenrand zu positionieren.</li>
+				    <li><b>Im Text</b> <div class = "icon icon-dropcap_text"></div> - um das Initial innerhalb des Absatzes zu positionieren.</li>
+				    <li><b>Am Seitenrand</b> <div class = "icon icon-dropcap_margin"></div> - um das Initial am linken Seitenrand zu positionieren.</li>
 				    </ul>
 				</li>
 			</ol>
 			<p><img class="floatleft" alt="Beispiel für ein Initial" src="../images/dropcap_example.png" />Das erste Zeichen des ausgewählten Absatzes wird in ein Initial umgewandelt. Wenn das Initial mehrere Zeichen umfassen soll, fügen Sie diese manuell hinzu - wählen Sie das Initial aus und geben Sie die restlichen gewünschten Buchstaben ein.</p>
 			<p>Um das Initial anzupassen (d.h. Schriftgrad, Typ, Formatvorlage oder Farbe), markieren Sie den Buchstaben und nutzen Sie die entsprechenden Symbole in der Registerkarte <b>Start</b> in der oberen Symbolleiste.</p>
-			<p>Wenn das Initial markiert ist, wird es von einem <b>Rahmen</b> umgeben (eine Box, um das Initial auf der Seite zu positionieren). Sie können die Rahmengröße leicht ändern, indem Sie mit dem Mauszeiger an den Rahmenlinien ziehen, oder die Position ändern, indem Sie auf das <img alt="Pfeil" src="../images/arrow.png" /> Symbol klicken, das angezeigt wird, wenn Sie den Mauszeiger über den Rahmen bewegen.</p>
-			<p>Um das hinzugefügte Initial zu löschen, wählen Sie es aus, klicken Sie in der Registerkarte <b>Einfügen</b> auf das Symbol <img alt="Initial einfügen" src="../images/insert_dropcap_icon.png" /> <b>Intial</b> und wählen Sie die Option <b>Keins</b> <img alt="Initial einfügen - Keine" src="../images/dropcap_none.png" /> aus dem Listenmenü aus.</p>
+			<p>Wenn das Initial markiert ist, wird es von einem <b>Rahmen</b> umgeben (eine Box, um das Initial auf der Seite zu positionieren). Sie können die Rahmengröße leicht ändern, indem Sie mit dem Mauszeiger an den Rahmenlinien ziehen, oder die Position ändern, indem Sie auf das <div class = "icon icon-arrow"></div> Symbol klicken, das angezeigt wird, wenn Sie den Mauszeiger über den Rahmen bewegen.</p>
+			<p>Um das hinzugefügte Initial zu löschen, wählen Sie es aus, klicken Sie in der Registerkarte <b>Einfügen</b> auf das Symbol <div class = "icon icon-insert_dropcap_icon"></div> <b>Intial</b> und wählen Sie die Option <b>Keins</b> <div class = "icon icon-dropcap_none"></div> aus dem Listenmenü aus.</p>
 			<hr />
-			<p>Um die Parameter des hinzugefügten Initials anzupassen, wählen Sie es aus, klicken Sie in der Registerkarte <b>Einfügen</b> auf die Option <img alt="Initial einfügen" src="../images/insert_dropcap_icon.png" /> <b>Initial</b> und wählen Sie die Option <b>Initialformatierung</b> aus dem Listenmenü aus. Das Fenster <b>Initial - Erweiterte Einstellungen</b> wird geöffnet:</p>
+			<p>Um die Parameter des hinzugefügten Initials anzupassen, wählen Sie es aus, klicken Sie in der Registerkarte <b>Einfügen</b> auf die Option <div class = "icon icon-insert_dropcap_icon"></div> <b>Initial</b> und wählen Sie die Option <b>Initialformatierung</b> aus dem Listenmenü aus. Das Fenster <b>Initial - Erweiterte Einstellungen</b> wird geöffnet:</p>
             <p><img alt="Initial - Erweiterte Einstellungen" src="../images/dropcap_properties_1.png" /></p>
 			<p>Über die Gruppe <b>Initial</b> können Sie die folgenden Parameter festlegen:</p>
 			    <ul>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Fügen Sie die Endnoten ein, um Kommentare zu bestimmten Sätzen oder Begriffen in Ihrem Text einzufügen, Referenzen und Quellen anzugeben usw." />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -21,7 +22,7 @@
             <li>positionieren Sie den Einfügepunkt am Ende der Textpassage, der Sie eine Endnote hinzufügen möchten,</li>
             <li>wechseln Sie in der oberen Symbolleiste zur Registerkarte <b>Verweise</b>,</li>
             <li>
-                klicken Sie auf das Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b> in der oberen Symbolleiste oder<br /> klicken Sie auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /><b>Fußnote</b> und wählen Sie die Option <b>Endnote einfügen</b> aus dem Menü aus.<br />
+                klicken Sie auf das Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b> in der oberen Symbolleiste oder<br /> klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div><b>Fußnote</b> und wählen Sie die Option <b>Endnote einfügen</b> aus dem Menü aus.<br />
                 <p>Das Endnotenzeichen (d.h. das hochgestellte Zeichen, das eine Endnote anzeigt) wird im Dokumenttext angezeigt und die Textmarke springt zum Ende des Dokuments.</p>
             </li>
             <li>geben Sie den Text der Endnote ein.</li>
@@ -34,13 +35,13 @@
         <h2>Navigieren durch Endnoten</h2>
         <p>Um zwischen den hinzugefügten Endnoten im Dokument zu navigieren,</p>
         <ol>
-            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>,</li>
-            <li>navigieren Sie im Abschnitt <b>Zu Endnoten</b> über die Pfeile <img alt="Vorherige Endnote" src="../images/previousfootnote.png" /> und <img alt="Nächste Endnote" src="../images/nextfootnote.png" /> zur nächsten oder zur vorherigen Endnote.</li>
+            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>,</li>
+            <li>navigieren Sie im Abschnitt <b>Zu Endnoten</b> über die Pfeile <div class = "icon icon-previousfootnote"></div> und <div class = "icon icon-nextfootnote"></div> zur nächsten oder zur vorherigen Endnote.</li>
         </ol>
         <h2>Endnoten bearbeiten</h2>
         <p>Um die Einstellungen der Endnoten zu ändern,</p>
         <ol>
-            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>.</li>
+            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>.</li>
             <li>wählen Sie die Option <b>Hinweise Einstellungen</b> aus dem Menü aus,</li>
             <li>ändern Sie im Fenster <b>Hinweise Einstellungen</b> die aktuellen Parameter:<p><img alt="Fenster Endnoteneinstellungen" src="../images/endnotes_settings.png" /></p>
                 <ul>
@@ -80,7 +81,7 @@
         <p>Um eine einzelne Endnote zu entfernen, positionieren Sie den Einfügepunkt direkt vor der Endnotenmarkierung und drücken Sie auf <b>ENTF</b>. Andere Endnoten werden automatisch neu nummeriert.</p>
         <p>Um alle Endnoten in einem Dokument zu entfernen,</p>
         <ol>
-            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>,</li>
+            <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>,</li>
             <li>Wählen Sie die Option <b>Alle Anmerkungen löschen</b> aus dem Menü aus und klicken Sie auf die Option <b>Alle Endnoten löschen</b> im geöffneten Fenster <b>Anmerkungen löschen</b>.</li>
         </ol>
     </div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert equations and mathematical symbols." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,21 +21,21 @@
 			<ol>
 				<li>Positionieren Sie den Mauszeiger an der gewünschten Stelle.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-				<li>Klicken Sie auf den Pfeil neben dem Symbol <img alt="Formel" src="../images/insertequationicon.png" /> <b>Formel</b>.</li>
+				<li>Klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-insertequationicon"></div> <b>Formel</b>.</li>
 				<li>Wählen Sie im geöffneten Listenmenü die gewünschte Option: Derzeit sind die folgenden Kategorien verfügbar: <em>Symbole</em>, <em>Brüche</em>, <em>Skripte</em>, <em>Wurzeln</em>, <em>Integrale</em>, <em>Große Operatoren</em>, <em>Klammern</em>, <em>Funktionen</em>, <em>Akzente</em>, <em>Grenzwerte und Logarithmen</em>, <em>Operators</em>, <em>Matrizen</em>.</li>
                 <li>Klicken Sie im entsprechenden Vorlagensatz auf das gewünschte Symbol/die gewünschte Gleichung.</li>
 			</ol>
-            <p>Das ausgewählte Symbol/die ausgewählte Formel wird an der aktuellen Cursorposition eingefügt. Wenn die ausgewählte Zeile leer ist, wird die Gleichung zentriert. Um die Formel links- oder rechtsbündig auszurichten, klicken Sie auf der Registerkarte <b>Start</b> auf <img alt="Linksbündig ausrichten" src="../images/alignleft.png" /> oder <img alt="Rechtsbündig ausrichten" src="../images/alignright.png" />.</p><img alt="Formel einfügen" src="../images/insertedequation.png" /><p>Jede Formelvorlage steht für eine Reihe von Slots. Ein Slot für jedes Element, aus dem die Gleichung besteht Ein leerer Slot (auch Platzhalter genannt) hat eine gepunktete Linie <img alt="Platzhalter" src="../images/equationplaceholder.png" /> Setzen Sie in alle Platzhalter die gewünschten Werte ein.</p>
+            <p>Das ausgewählte Symbol/die ausgewählte Formel wird an der aktuellen Cursorposition eingefügt. Wenn die ausgewählte Zeile leer ist, wird die Gleichung zentriert. Um die Formel links- oder rechtsbündig auszurichten, klicken Sie auf der Registerkarte <b>Start</b> auf <div class = "icon icon-alignleft"></div> oder <div class = "icon icon-alignright"></div>.</p><div class = "icon icon-insertedequation"></div><p>Jede Formelvorlage steht für eine Reihe von Slots. Ein Slot für jedes Element, aus dem die Gleichung besteht Ein leerer Slot (auch Platzhalter genannt) hat eine gepunktete Linie <div class = "icon icon-equationplaceholder"></div> Setzen Sie in alle Platzhalter die gewünschten Werte ein.</p>
             <p class="note"><b>Hinweis</b>: Um eine Gleichung zu erstellen, können Sie auch die Tastenkombination <b>Alt + =</b> verwenden.</p>
             <h3>Werte eingeben</h3>
             <p>Der <b>Einfügepunkt</b> zeigt an, an welcher Stelle das nächste Zeichen erscheint, das Sie eingeben. Um den Cursor präzise zu positionieren, klicken Sie in einen Platzhalter und verschieben Sie den Einfügepunkt mithilfe der Tastaturpfeile um ein Zeichen nach links/rechts oder eine Zeile nach oben/unten.</p>
-            <p>Wenn Sie unter dem Slot einen neuen Platzhalter erstellen wollen, positionieren Sie den Cursor in der ausgwählten Vorlage und drücken Sie die <b>Eingabetaste</b>.</p><img alt="Bearbeitete Formel" src="../images/newslot.png" /><p>Wenn Sie den Einfügepunkt positioniert haben, können Sie die Werte in den Platzhaltern einfügen:<ul>
+            <p>Wenn Sie unter dem Slot einen neuen Platzhalter erstellen wollen, positionieren Sie den Cursor in der ausgwählten Vorlage und drücken Sie die <b>Eingabetaste</b>.</p><div class = "big big-newslot"></div><p>Wenn Sie den Einfügepunkt positioniert haben, können Sie die Werte in den Platzhaltern einfügen:<ul>
                 <li>Geben Sie geben Sie den gewünschten numerischen/literalen Wert über die Tastatur ein.</li>
-                <li>Wechseln Sie zum Einfügen von Sonderzeichen in die Registerkarte <b>Einfügen</b> und wählen Sie im Menü <img alt="Formel" src="../images/insertequationicon.png" /> <b>Formel</b> das gewünschte Zeichen aus der Palette mit den <b>Symbolen</b> aus.</li>
+                <li>Wechseln Sie zum Einfügen von Sonderzeichen in die Registerkarte <b>Einfügen</b> und wählen Sie im Menü <div class = "icon icon-insertequationicon"></div> <b>Formel</b> das gewünschte Zeichen aus der Palette mit den <b>Symbolen</b> aus.</li>
                 <li>Fügen Sie eine weitere Vorlage aus der Palette hinzu, um eine komplexe verschachtelte Gleichung zu erstellen. Die Größe der primären Formel wird automatisch an den Inhalt angepasst. Die Größe der verschachtelten Gleichungselemente hängt von der Platzhaltergröße der primären Gleichung ab, sie darf jedoch nicht kleiner sein als die Vorlage für tiefgestellte Zeichen.</li>                
             </ul>
             </p>
-            <p><img alt="Bearbeitete Formel" src="../images/nestedfraction.png" /></p>
+            <p><div class = "big big-nestedfraction"></div></p>
             <p>Alternativ können Sie auch über das <b>Rechtsklickmenü</b> neue Elemente in Ihre Formel einfügen:</p>
             <ul>
                 <li>Um ein neues Argument vor oder nach einem vorhandenen Argument einzufügen, das in <em>Klammern</em> steht, klicken Sie mit der rechten Maustaste auf das vorhandene Argument und wählen Sie die Option <b>Argument vorher/nachher</b> einfügen.</li>
@@ -45,8 +46,8 @@
             <p>Wenn Sie die Werte der mathematischen Ausdrücke eingeben, ist es nicht notwendig die <b>Leertaste</b> zu verwenden, da die Leerzeichen zwischen den Zeichen und Werten automatisch gesetzt werden.</p>
             <p>Wenn die Formel zu lang ist und nicht in eine einzelnen Zeile passt, wird während der Eingabe automatisch ein Zeilenumbruch ausgeführt. Bei Bedarf können Sie auch manuell einen Zeilenumbruch an einer bestimmten Position einfügen. Klicken sie dazu mit der rechten Maustaste auf einen der Platzhalter und wählen Sie im Menü die Option <b>manuellen Umbruch einfügen</b> aus. Der ausgewählte Platzhalter wird in die nächste Zeile verschoben. Wenn Sie einen manuellen Zeilenumbruch eingefügt haben können Sie die neue Zeile mithilfe der <b>Tab-</b> Taste an die mathematischen Operatoren der vorherigen Zeile anpassen und die Zeile entsprechend ausrichten. Um einen manuell hinzugefügten Zeilenumbruch zu entfernen, klicken Sie mit der rechten Maustaste auf den Platzhalter der die neue Zeile einleitet und wählen Sie die Option <b>manuellen Umbruch entfernen</b>.</p>
             <h3>Formeln formatieren</h3>
-            <p>Um die <b>Schriftgröße</b> der Formel zu verkleinern oder zu vergrößern, klicken Sie an eine beliebige Stelle im Formelfeld und verwenden Sie die Schaltflächen <img alt="Schrift vergrößern" src="../images/larger.png" /> und <img alt="Schrift verkleinern" src="../images/smaller.png" /> in der Registerkarte <b>Start</b> oder wählen Sie die gewünschte Schriftgröße aus der Liste aus. Alle Elemente in der Formel werden entsprechend angepasst.</p>
-            <p>Die Buchstaben innerhalb der Formel werden standardmäßig kursiv gestellt. Bei Bedarf können Sie <b>Schriftart</b> (<em>fett, kursiv, durchgestrichen</em>) oder <b>Schriftfarbe</b> für die gesamte Formel oder Teile davon ändern. <em>Unterstreichen</em> ist nur für die gesamte Formel nötig und nicht für einzelne Zeichen. Wählen Sie den gewünschten Teil der Formel durch anklicken und ziehen aus. Der ausgewählte Teil wird blau markiert. Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b>, um die Auswahl zu formatieren. Sie können zum Beispiel das Kursivformat für gewöhnliche Wörter entfernen, die keine Variablen oder Konstanten darstellen.</p><img alt="Bearbeitete Formel" src="../images/formatastext.png" /><p>Einige Elemente aus der Formel lassen sich auch über das <b>Rechtsklickmenü</b> ändern:</p>
+            <p>Um die <b>Schriftgröße</b> der Formel zu verkleinern oder zu vergrößern, klicken Sie an eine beliebige Stelle im Formelfeld und verwenden Sie die Schaltflächen <div class = "icon icon-larger"></div> und <div class = "icon icon-smaller"></div> in der Registerkarte <b>Start</b> oder wählen Sie die gewünschte Schriftgröße aus der Liste aus. Alle Elemente in der Formel werden entsprechend angepasst.</p>
+            <p>Die Buchstaben innerhalb der Formel werden standardmäßig kursiv gestellt. Bei Bedarf können Sie <b>Schriftart</b> (<em>fett, kursiv, durchgestrichen</em>) oder <b>Schriftfarbe</b> für die gesamte Formel oder Teile davon ändern. <em>Unterstreichen</em> ist nur für die gesamte Formel nötig und nicht für einzelne Zeichen. Wählen Sie den gewünschten Teil der Formel durch anklicken und ziehen aus. Der ausgewählte Teil wird blau markiert. Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b>, um die Auswahl zu formatieren. Sie können zum Beispiel das Kursivformat für gewöhnliche Wörter entfernen, die keine Variablen oder Konstanten darstellen.</p><div class = "big big-formatastext"></div><p>Einige Elemente aus der Formel lassen sich auch über das <b>Rechtsklickmenü</b> ändern:</p>
             <ul><li>Um das Format von <em>Brüchen</em> zu ändern, klicken Sie mit der rechten Maustaste auf einen Bruch und wählen Sie im Menü die Option <b>in schrägen/linearen/gestapelten Bruch ändern</b> (die verfügbaren Optionen hängen vom ausgewählten Bruchtyp ab). <!--The <b>Remove/Add fraction bar</b> option is also available for stacked fractions.--></li>
                 <li>Um die Position der <em>Skripte</em> in Bezug auf Text zu ändern, klicken Sie mit der rechten Maustaste auf die Formel, die Skripte enthält und wählen Sie die Option <b>Skripte vor/nach Text</b> aus dem Menü aus.</li>
                 <li>Um die Größe der Argumente für <em>Skripte, Wurzeln, Integrale, Große Operatoren, Grenzwerte und Logarithmen und Operatoren</em> sowie für über- und untergeordnete Klammern und Vorlagen mit Gruppierungszeichen aus der Gruppe <em>Akzente</em> zu ändern, klicken Sie mit der rechten Maustaste auf das Argument, das Sie ändern wollen und wählen Sie die Option <b>Argumentgröße vergrößern/verkleinern</b> aus dem Menü aus.</li>
@@ -69,7 +70,7 @@
             <h3>Formelelemente löschen</h3>
             <p>Um Teile einer Formel zu löschen, wählen Sie den Teil den Sie löschen wollen mit der Maus aus oder halten Sie die <b>Umschalttaste</b> gedrückt, und drücken sie dann auf Ihrer Tastatur auf <b>ENTF</b>.</p>
             <p>Ein Slot kann nur zusammen mit der zugehörigen Vorlage gelöscht werden.</p>
-            <p>Um die gesamte Formel zu löschen, wählen Sie diese aus, entweder durch Markieren mit der Maus oder durch einen Doppelklick auf das Formelfeld und drücken Sie dann auf die Taste <b>ENTF</b> auf Ihrer Tastatur.</p><img alt="Formel löschen" src="../images/deleteequation.png" /><p>Einige Elemente aus der Formel lassen sich auch über das <b>Rechtsklickmenü</b> löschen:</p>
+            <p>Um die gesamte Formel zu löschen, wählen Sie diese aus, entweder durch Markieren mit der Maus oder durch einen Doppelklick auf das Formelfeld und drücken Sie dann auf die Taste <b>ENTF</b> auf Ihrer Tastatur.</p><div class = "icon icon-deleteequation"></div><p>Einige Elemente aus der Formel lassen sich auch über das <b>Rechtsklickmenü</b> löschen:</p>
             <ul>
                 <li>Um eine <em>Wurzel</em> zu löschen, klicken Sie diese mit der rechten Maustaste an und wählen Sie die Option <b>Wurzel löschen</b> im Menü aus.</li>
                 <li>Um ein <em>tiefgestelltes Zeichen</em> bzw. ein <em>hochgestelltes Zeichen</em> zu löschen, klicken sie mit der rechten Maustaste auf das entsprechende Element und wählen Sie die Option <b>hochgestelltes/tiefgestelltes Zeichen entfernen</b> im Menü aus. Wenn der Ausdruck Skripte mit Vorrang vor dem Text enthält, ist die Option <b>Skripte entfernen</b> verfügbar.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie die Fußnoten ein, um Kommentare zu bestimmten Sätzen oder Begriffen in Ihrem Text einzufügen, Referenzen und Quellen anzugeben usw." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,7 +21,7 @@
 			<ol>
                 <li>positionieren Sie den Einfügepunkt am Ende der Textpassage, der Sie eine Fußnote hinzufügen möchten,</li>
                 <li>wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Verweise</b>,</li>
-				<li>klicken Sie auf das Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b> in der oberen Symbolleiste oder<br/> klicken Sie auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b> und wählen Sie die Option <b>Fußnote einfügen</b> aus dem Menü aus.
+				<li>klicken Sie auf das Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b> in der oberen Symbolleiste oder<br/> klicken Sie auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b> und wählen Sie die Option <b>Fußnote einfügen</b> aus dem Menü aus.
                 <p>Das Fußnotenzeichen (d.h. das hochgestellte Zeichen, das eine Fußnote anzeigt) wird im Dokumenttext angezeigt und die Textmarke springt an das unteren Ende der aktuellen Seite.</p>
                 </li>
 				<li>Geben Sie den Text der Fußnote ein.</li>
@@ -33,14 +34,14 @@
             <h2>Navigieren durch Fußnoten</h2>
             <p>Um zwischen den hinzugefügten Fußnoten im Dokument zu navigieren,</p>
             <ol>
-                <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>,</li>
-                <li>navigieren Sie im Abschnitt <b>Zu Fußnoten übergehen</b> über die Pfeile <img alt="Vorherige Fußnote" src="../images/previousfootnote.png" /> und <img alt="Nächste Fußnote" src="../images/nextfootnote.png" /> zur nächsten oder zur vorherigen Fußnote.</li>
+                <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>,</li>
+                <li>navigieren Sie im Abschnitt <b>Zu Fußnoten übergehen</b> über die Pfeile <div class = "icon icon-previousfootnote"></div> und <div class = "icon icon-nextfootnote"></div> zur nächsten oder zur vorherigen Fußnote.</li>
             </ol>
             <hr />
             <h2>Fußnoten bearbeiten</h2>
 			<p>Um die Einstellungen der Fußnoten zu ändern,</p>
 			<ol>
-				<li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>.</li>
+				<li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>.</li>
                 <li>wählen Sie die Option <b>Hinweise Einstellungen</b> aus dem Menü aus,</li>
 				<li>ändern Sie im Fenster <b>Hinweise Einstellungen</b> die aktuellen Parameter:<p><img alt="Fenster Fußnoteneinstellungen" src="../images/footnotes_settings.png" /></p>
 				<ul>
@@ -75,7 +76,7 @@
             <p>Um eine einzelne Fußnote zu entfernen, positionieren Sie den Einfügepunkt direkt vor der Fußnotenmarkierung und drücken Sie auf <b>ENTF</b>. Andere Fußnoten werden automatisch neu nummeriert.</p>
             <p>Um alle Fußnoten in einem Dokument zu entfernen,</p>
             <ol>
-                <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <img alt="Fußnote" src="../images/addfootnote.png" /> <b>Fußnote</b>,</li>
+                <li>klicken Sie auf der Registerkarte <b>Verweise</b> in der oberen Symbolleiste auf den Pfeil neben dem Symbol <div class = "icon icon-addfootnote"></div> <b>Fußnote</b>,</li>
                 <li>wählen Sie die Option <b>Alle Anmerkungen löschen</b> aus dem Menü aus und klicken Sie auf die Option <b>Alle Fußnoten löschen</b> im geöffneten Fenster <b>Anmerkungen löschen</b>.</li>
             </ol>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert headers and footers into your document, add different headers and footer to the first page or odd and even pages" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,7 +18,7 @@
 			<p>Kopf- oder Fußzeile hinzuzufügen oder die vorhandene Kopf- oder Fußzeile bearbeiten 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 in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-				<li>Klicken Sie aufs Symbol <img alt="Kopf-/Fußzeile bearbeiten" src="../images/headerfooter.png" /> <b>Kopf-/Fußzeile bearbeiten</b></li>
+				<li>Klicken Sie aufs Symbol <div class = "icon icon-headerfooter"></div> <b>Kopf-/Fußzeile bearbeiten</b></li>
 				<li>Wählen Sie eine der folgenden Optionen:<ul>
 						<li><b>Kopfzeile bearbeiten</b>, um den Text in der Kopfzeile einzugeben oder zu bearbeiten.</li>
 						<li><b>Fußzeile bearbeiten</b>, um den Text in der Fußzeile einzugeben oder zu bearbeiten.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie ein Bild in Ihrem Dokument ein und ändern Sie seine Position und Eigenschaften" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,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>.
 							<p class="note">Im <em>Online-Editor</em> können Sie mehrere Bilder gleichzeitig auswählen.</p></li>
@@ -32,16 +33,16 @@
 				<p>Es ist auch möglich, dem Bild eine Beschriftung hinzuzufügen. Weitere Informationen zum Arbeiten mit Bildunterschriften finden Sie in diesem Artikel.</p></li>
 			</ol>
             <h3>Verschieben und ändern Sie die Größe von Bildern</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 <div class = "big big-moving_image"></div>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"><b>Hinweis</b>: 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>Passen Sie die Bildeinstellungen an</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>
+				<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 <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>
@@ -56,10 +57,10 @@
                 </ul>
                 </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>
@@ -70,14 +71,14 @@
                 <li><b>Ausschneiden, Kopieren, Einfügen</b> - Standardoptionen, mit denen ein ausgewählter Text / ein ausgewähltes Objekt ausgeschnitten oder kopiert und eine zuvor ausgeschnittene / kopierte Textpassage oder ein Objekt an die aktuelle Zeigerposition eingefügt wird.</li>
 				<li><b>Anordnen</b> wird verwendet, um das ausgewählte Bild in den Vordergrund zu bringen, in den Hintergrund zu senden, vorwärts oder rückwärts zu bewegen sowie Bilder zu gruppieren oder die Gruppierung aufzuheben, um Operationen mit sieben auszuführen von ihnen sofort. 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 das Bild links, in der Mitte, rechts, oben, in der Mitte und 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 zu bearbeiten</b>. 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 zu bearbeiten</b>. 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 das Bild um 90 Grad im oder gegen den Uhrzeigersinn zu drehen sowie um das Bild horizontal oder vertikal zu spiegeln.</li>
                 <li><b>Zuschneiden</b> wird verwendet, um eine der Zuschneideoptionen anzuwenden: <b>Zuschneiden</b>, <b>Füllen</b> oder <b>Anpassen</b>. Wählen Sie im Untermenü die Option Zuschneiden, ziehen Sie dann die Zuschneidegriffe, um den Zuschneidebereich festzulegen, und klicken Sie im Untermenü erneut auf eine dieser drei Optionen, um die Änderungen zu übernehmen.</li>
                 <li>Die <b>Tatsächliche Größe</b> wird verwendet, um die aktuelle Bildgröße in die tatsächliche zu ändern.</li>
 				<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 />
@@ -86,7 +87,7 @@
 			<p><img alt="Bild - Erweiterte Einstellungen: Größe" src="../images/image_properties.png" /></p>
 			<p>Die Registerkarte <b>Größe</b> enthält die folgenden Parameter:</p>
 			<ul>
-				<li><b>Breite</b> und <b>Höhe</b> - Verwenden Sie diese Optionen, um die Bildbreite und / oder -höhe zu ändern. Wenn Sie auf die Schaltfläche <b>Konstante Proportionen</b> <img alt="Seitenverhältnis sperren" src="../images/constantproportions.png" /> klicken (in diesem Fall sieht es so aus <img alt="Symbol Seitenverhältnis sperren aktiviert" src="../images/constantproportionsactivated.png" />), werden Breite und Höhe zusammen geändert, wobei das ursprüngliche Bildseitenverhältnis beibehalten wird. Klicken Sie auf die Schaltfläche <b>Tatsächliche Größe</b>, um die tatsächliche Größe des hinzugefügten Bilds wiederherzustellen.</li>
+				<li><b>Breite</b> und <b>Höhe</b> - Verwenden Sie diese Optionen, um die Bildbreite und / oder -höhe zu ändern. Wenn Sie auf die Schaltfläche <b>Konstante Proportionen</b> <div class = "icon icon-constantproportions"></div> klicken (in diesem Fall sieht es so aus <div class = "icon icon-constantproportionsactivated"></div>), werden Breite und Höhe zusammen geändert, wobei das ursprüngliche Bildseitenverhältnis beibehalten wird. Klicken Sie auf die Schaltfläche <b>Tatsächliche Größe</b>, um die tatsächliche Größe des hinzugefügten Bilds wiederherzustellen.</li>
 			</ul>
             <p><img alt="Bild - Erweiterte Einstellungen: Drehen" src="../images/image_properties_4.png" /></p>
             <p>Die Registerkarte <b>Rotation</b> enthält die folgenden Parameter:</p>
@@ -98,15 +99,15 @@
 			<p>Die Registerkarte <b>Textumbruch</b> enthält die folgenden Parameter:</p>
 			<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/InsertLineNumbers.htm

@@ -1,4 +1,4 @@
-
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -6,6 +6,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Fügen Sie Zeilennnummern im Dokumenteneditor ein" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -15,10 +16,10 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
         <h1>Zeilennummern einfügen</h1>
-        <p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>ONLYOFFICE Dokumenteneditor</b></a> kann Zeilen in Ihrem Dokument automatisch zählen. Diese Funktion kann nützlich sein, wenn Sie auf eine bestimmte Zeile des Dokuments verweisen müssen, z.B. in einer Vereinbarung oder einem Code-Skript. Verwenden Sie das Tool <img alt="Zeilennummern Symbol" src="../images/linenumbers_icon.png" /> <b>Zeilennummern</b>, um die Zeilennummerierung auf das Dokument anzuwenden. Bitte beachten Sie, dass die Zeilennummerierungssequenz nicht auf den Text in den Objekten wie Tabellen, Textfeldern, Diagrammen, Kopf- / Fußzeilen usw. angewendet wird. Diese Objekte werden als eine Zeile behandelt.</p>
+        <p>Der <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>ONLYOFFICE Dokumenteneditor</b></a> kann Zeilen in Ihrem Dokument automatisch zählen. Diese Funktion kann nützlich sein, wenn Sie auf eine bestimmte Zeile des Dokuments verweisen müssen, z.B. in einer Vereinbarung oder einem Code-Skript. Verwenden Sie das Tool <div class = "icon icon-linenumbers_icon"></div> <b>Zeilennummern</b>, um die Zeilennummerierung auf das Dokument anzuwenden. Bitte beachten Sie, dass die Zeilennummerierungssequenz nicht auf den Text in den Objekten wie Tabellen, Textfeldern, Diagrammen, Kopf- / Fußzeilen usw. angewendet wird. Diese Objekte werden als eine Zeile behandelt.</p>
         <h2>Zeilennummern anwenden</h2>
         <ol>
-            <li>Öffnen Sie die Registerkarte <b>Layout</b> in der oberen Symbolleiste und klicken Sie auf das Symbol <img alt="Zeilennummern Symbol" src="../images/linenumbers_icon.png" /><b>Zeilennummern</b>.</li>
+            <li>Öffnen Sie die Registerkarte <b>Layout</b> in der oberen Symbolleiste und klicken Sie auf das Symbol <div class = "icon icon-linenumbers_icon"></div><b>Zeilennummern</b>.</li>
             <li>
                 Wählen Sie im geöffneten Drop-Down-Menü die gewünschten Parameter für eine schnelle Einrichtung:
                 <ul>
@@ -46,7 +47,7 @@
         <h2>Zeilennummern entfernen</h2>
         <p>Um die Zeilennummerierungssequenz zu entfernen,</p>
         <ol>
-            <li>öffnen Sie die Registerkarte <b>Layout</b> in der oberen Symbolleiste und klicken Sie auf das Symbol <img alt="Zeilennummern Symbol" src="../images/linenumbers_icon.png" /><b>Zeilennummern</b>,</li>
+            <li>öffnen Sie die Registerkarte <b>Layout</b> in der oberen Symbolleiste und klicken Sie auf das Symbol <div class = "icon icon-linenumbers_icon"></div><b>Zeilennummern</b>,</li>
             <li>wählen Sie die Option <b>Kein</b> im geöffneten Drop-Down-Menü oder wählen Sie den Menüpunkt <b>Zeilennummerierungsoptionen</b> aus und im geöffneten Fenster <b>Zeilennummern</b> deaktivieren Sie das Kästchen <b>Zeilennummer hinzufügen</b>.</li>
         </ol>
     </div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Für die einfache Navigation durch das Dokument fügen Sie Seitennummer hinzu" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,7 +18,7 @@
             <p>Um Seitenzahlen in ein Dokument einfügen 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 zu der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopf- und Fußzeile bearbeiten</b> <img alt="Kopf-/Fußzeile bearbeiten" src="../images/headerfooter.png" />.</li>
+                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopf- und Fußzeile bearbeiten</b> <div class = "icon icon-headerfooter"></div>.</li>
                 <li>Klicken Sie auf <b>Seitenzahl einfügen</b>.</li>
                 <li>
                     Wählen Sie eine der folgenden Optionen:
@@ -34,7 +35,7 @@
             <p> Um die Anzahl der Seiten einfügen (z.B. wenn Sie den Eintrag <em>Seite X von Y</em> erstellen möchten):</p>
             <ol>
                 <li>Platzieren Sie den Zeiger an die Position an der Sie die Anzahl der Seiten einfügen wollen.</li>
-                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopf- und Fußzeile bearbeiten</b> <img alt="Kopf-/Fußzeile bearbeiten" src="../images/headerfooter.png" />.</li>
+                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopf- und Fußzeile bearbeiten</b> <div class = "icon icon-headerfooter"></div>.</li>
                 <li>Wählen Sie die Option <b>Anzahl der Seiten einfügen</b>.</li>
             </ol>
             <hr />

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung der Mendeley-, Zotero- und EasyBib-Plugins für ONLYOFFICE Editoren, mit denen Verweisen in Dokumente eingefügt werden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -20,7 +21,7 @@
         <h3>ONLYOFFICE mit Mendeley verbinden</h3>
         <ol>
             <li>Melden Sie sich bei Ihrem <b>Mendeley</b>-Konto an.</li>
-            <li>Wechseln Sie in Ihrem Dokument zur Registerkarte <b>Plugins</b> und wählen Sie <img alt="Mendeley Plugin Symbol" src="../images/mendeley.png" /> <b>Mendeley</b> aus. Eine Seitenleiste wird links in Ihrem Dokument geöffnet.<li>
+            <li>Wechseln Sie in Ihrem Dokument zur Registerkarte <b>Plugins</b> und wählen Sie <div class = "icon icon-mendeley"></div> <b>Mendeley</b> aus. Eine Seitenleiste wird links in Ihrem Dokument geöffnet.<li>
     Klicken Sie auf die Schaltfläche <b>Link kopieren und Formular öffnen</b>.<br />
     Der Browser öffnet ein Formular auf der Mendeley-Seite. Füllen Sie dieses Formular aus und notieren Sie die Anwendungs-ID für ONLYOFFICE.
 </li>
@@ -33,7 +34,7 @@
         <h3>Verweise einfügen</h3>
         <ol>
             <li>Öffnen Sie das Dokument und platzieren Sie den Cursor an der Stelle, an der Sie den Verweis(-e) einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Mendeley Plugin Symbol" src="../images/mendeley.png" /> <b>Mendeley</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-mendeley"></div> <b>Mendeley</b> aus.</li>
             <li>Geben Sie einen Suchtext ein und drücken Sie die <b>Eingabetaste</b> auf Ihrer Tastatur.</li>
             <li>Klicken Sie auf ein oder mehrere Kontrollkästchen.</li>
             <li>[Optional] Geben Sie einen neuen Suchtext ein und klicken Sie auf ein oder mehrere Kontrollkästchen.</li>
@@ -45,7 +46,7 @@
         <h3>ONLYOFFICE mit Zotero verbinden</h3>
         <ol>
             <li>Melden Sie sich bei Ihrem <b>Zotero</b>-Konto an.</li>
-            <li>Wechseln Sie in Ihrem Dokument zur Registerkarte <b>Plugins</b> und wählen Sie <img alt="Zotero Plugin Symbol" src="../images/zotero.png" /> <b>Zotero</b> aus. Eine Seitenleiste wird links in Ihrem Dokument geöffnet.</li>
+            <li>Wechseln Sie in Ihrem Dokument zur Registerkarte <b>Plugins</b> und wählen Sie <div class = "icon icon-zotero"></div> <b>Zotero</b> aus. Eine Seitenleiste wird links in Ihrem Dokument geöffnet.</li>
             <li>Klicken Sie auf <b>Zotero API-Einstellungen</b>.</li>
             <li>Erstellen Sie auf der Zotero-Seite einen neuen Schlüssel für Zotero, kopieren Sie ihn und speichern Sie ihn für später.</li>
             <li>Wechseln Sie zu Ihrem Dokument und fügen Sie den API-Schlüssel ein.</li>
@@ -55,7 +56,7 @@
         <h3>Verweise einfügen</h3>
         <ol>
             <li>Öffnen Sie das Dokument und platzieren Sie den Cursor an der Stelle, an der Sie den Verweis(-e) einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Zotero Plugin Symbol" src="../images/zotero.png" /> <b>Zotero</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-zotero"></div> <b>Zotero</b> aus.</li>
             <li>Geben Sie einen Suchtext ein und drücken Sie die <b>Eingabetaste</b> auf Ihrer Tastatur.</li>
             <li>Klicken Sie auf ein oder mehrere Kontrollkästchen.</li>
             <li>[Optional] Geben Sie einen neuen Suchtext ein und klicken Sie auf ein oder mehrere Kontrollkästchen.</li>
@@ -66,7 +67,7 @@
         <h2 id="EasyBib_block">EasyBib</h2>
         <ol>
             <li>Öffnen Sie das Dokument und platzieren Sie den Cursor an der Stelle, an der Sie den Verweis(-e) einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="EasyBib plugin icon" src="../images/easybib.png" /> <b>EasyBib</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-easybib"></div> <b>EasyBib</b> aus.</li>
             <li>Wählen Sie den Quellentyp aus, den Sie suchen möchten.</li>
             <li>Geben Sie einen Suchtext ein und drücken Sie die <b>Eingabetaste</b> auf Ihrer Tastatur.</li>
             <li>Klicken Sie auf der rechten Seite des entsprechenden Buch-/Zeitschriftenartikels/der Website auf '+'. Es wird der Bibliographie hinzugefügt.</li>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Symbole und Sonderzeichen einfügen" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -14,13 +15,13 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
         <h1>Symbole und Sonderzeichen einfügen</h1>
-        <p>Während des Arbeitsprozesses im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> wollen Sie ein Symbol einfügen, das sich nicht auf der Tastatur befindet. Um solche Symbole einzufügen, verwenden Sie die Option <img alt="Symbolbild" src="../images/insert_symbol_icon.png" /> <b>Symbol einfügen</b>:
+        <p>Während des Arbeitsprozesses im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> wollen Sie ein Symbol einfügen, das sich nicht auf der Tastatur befindet. Um solche Symbole einzufügen, verwenden Sie die Option <div class = "icon icon-insert_symbol_icon"></div> <b>Symbol einfügen</b>:
         </p>
         <ul>
             <li>positionieren Sie den Textcursor an der Stelle für das Sonderzeichen,</li>
             <li>öffnen Sie die Registerkarte <b>Einfügen</b>,</li>
             <li>
-                klicken Sie <img alt="Symbolbild" src="../images/insert_symbol_icon.png" /> <b>Symbol</b> an,
+                klicken Sie <div class = "icon icon-insert_symbol_icon"></div> <b>Symbol</b> an,
                 <p><img alt="Symbolrandleiste" src="../images/insert_symbol_window.png" /></p>
             </li>
             <li>Das Dialogfeld <b>Symbol</b> wird angezeigt, in dem Sie das gewünschte Symbol auswählen können,</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie eine Tabelle in Ihrem Dokument ein und ändern Sie ihre Eigenschaften" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -19,7 +20,7 @@
 			<ol>
                 <li>Plazieren Sie den Zeiger an der Stelle, an der die Tabelle plaziert werden soll.</li>
                 <li>Wechseln Sie zur Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.</li>
-                <li>Klicken Sie auf das <b>Tabellensymbol</b> <img alt="Tabelle" src="../images/table.png" /> in der oberen Symbolleiste.</li>
+                <li>Klicken Sie auf das <b>Tabellensymbol</b> <div class = "icon icon-table"></div> in der oberen Symbolleiste.</li>
                 <li>Wählen Sie die Option zum Erstellen einer Tabelle aus:<ul>
     <li>
         <p>entweder eine Tabelle mit einer vordefinierten Anzahl von Zellen (maximal 10 mal 8 Zellen)</p>
@@ -31,7 +32,7 @@
         <p><img alt="Benutzerdefinierte Tabelle" src="../images/customtable.png" /></p>
     </li>
     <li>
-        Wenn Sie eine Tabelle mit der Maus zeichnen möchten, wählen Sie die Option <b>Tabelle zeichnen</b>. Dies kann nützlich sein, wenn Sie eine Tabelle mit Zeilen und Spalten unterschiedlicher Größe erstellen möchten. Der Mauszeiger verwandelt sich in einen Bleistift <img alt="Mouse Cursor when drawing a table" src="../images/pencil_tool.png" />. Zeichnen Sie eine rechteckige Form, in der Sie eine Tabelle hinzufügen möchten, und fügen Sie dann Zeilen hinzu, indem Sie horizontale Linien  zeichnen, und Spalten, indem Sie vertikale Linien innerhalb der Tabellengrenze zeichnen.
+        Wenn Sie eine Tabelle mit der Maus zeichnen möchten, wählen Sie die Option <b>Tabelle zeichnen</b>. Dies kann nützlich sein, wenn Sie eine Tabelle mit Zeilen und Spalten unterschiedlicher Größe erstellen möchten. Der Mauszeiger verwandelt sich in einen Bleistift <div class = "icon icon-pencil_tool"></div>. Zeichnen Sie eine rechteckige Form, in der Sie eine Tabelle hinzufügen möchten, und fügen Sie dann Zeilen hinzu, indem Sie horizontale Linien  zeichnen, und Spalten, indem Sie vertikale Linien innerhalb der Tabellengrenze zeichnen.
     </li>
     <li>
         Wenn Sie einen vorhandenen Text in eine Tabelle umwandeln möchten, wählen Sie die Option <b>Text in Tabelle umwandeln</b>. Diese Funktion kann sich als nützlich erweisen, wenn Sie bereits Text haben, den Sie in einer Tabelle anordnen möchten. Das Fenster <b>Text in Tabelle umwandeln</b> besteht aus 3 Abschnitten:
@@ -47,17 +48,17 @@
                 </li>
                 <li>Sobald die Tabelle hinzugefügt wurde, können Sie ihre Eigenschaften, Größe und Position ändern.</li>
 			</ol>
-            <p>Um die Größe einer Tabelle zu ändern, bewegen Sie den Mauszeiger über den Griff <img alt="Quadrat" src="../images/resizetable_handle.png" /> in der unteren rechten Ecke und ziehen Sie ihn, bis die Tabelle die erforderliche Größe erreicht hat.</p>
-            <p><img alt="Tabellengröße ändern" src="../images/resizetable.png" /></p>
-            <p>Sie können die Breite einer bestimmten Spalte oder die Höhe einer Zeile auch manuell ändern. Bewegen Sie den Mauszeiger über den rechten Rand der Spalte, sodass sich der Zeiger in einen bidirektionalen Pfeil <img alt="Cursor bei der Änderung der Spaltenbreite" src="../images/changecolumnwidth.png" /> verwandelt, und ziehen Sie den Rand nach links oder rechts, um die erforderliche Breite festzulegen. Um die Höhe einer einzelnen Zeile manuell zu ändern, bewegen Sie den Mauszeiger über den unteren Rand der Zeile, sodass sich der Zeiger in den bidirektionalen Pfeil <img alt="Cursor bei der Änderung der Zeilenhöhe" src="../images/changerowheight.png" /> verwandelt, und ziehen Sie den Rand nach oben oder nach unten.</p>
-            <p>Um eine Tabelle zu verschieben, halten Sie den Griff <img alt="Tabellen-Handle auswählen" src="../images/movetable_handle.png" /> in der oberen linken Ecke gedrückt und ziehen Sie ihn an die gewünschte Stelle im Dokument.</p>
+            <p>Um die Größe einer Tabelle zu ändern, bewegen Sie den Mauszeiger über den Griff <div class = "icon icon-resizetable_handle"></div> in der unteren rechten Ecke und ziehen Sie ihn, bis die Tabelle die erforderliche Größe erreicht hat.</p>
+            <p><div class = "big big-resizetable"></div></p>
+            <p>Sie können die Breite einer bestimmten Spalte oder die Höhe einer Zeile auch manuell ändern. Bewegen Sie den Mauszeiger über den rechten Rand der Spalte, sodass sich der Zeiger in einen bidirektionalen Pfeil <div class = "icon icon-changecolumnwidth"></div> verwandelt, und ziehen Sie den Rand nach links oder rechts, um die erforderliche Breite festzulegen. Um die Höhe einer einzelnen Zeile manuell zu ändern, bewegen Sie den Mauszeiger über den unteren Rand der Zeile, sodass sich der Zeiger in den bidirektionalen Pfeil <div class = "icon icon-changerowheight"></div> verwandelt, und ziehen Sie den Rand nach oben oder nach unten.</p>
+            <p>Um eine Tabelle zu verschieben, halten Sie den Griff <div class = "icon icon-movetable_handle"></div> in der oberen linken Ecke gedrückt und ziehen Sie ihn an die gewünschte Stelle im Dokument.</p>
             <p>Es ist auch möglich, der Tabelle eine Beschriftung hinzuzufügen. Weitere Informationen zum Arbeiten mit Beschriftungen für Tabellen finden Sie <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">in diesem Artikel</a>.</p>
             <hr />
             <h3>Wählen Sie eine Tabelle oder deren Teil aus</h3>
-            <p>Um eine gesamtee Tabelle auszuwählen, klicken Sie auf den <img alt="Tabellen-Handle auswählen" src="../images/movetable_handle.png" /> Griff in der oberen linken Ecke.</p>
-            <p>Um eine bestimmte Zelle auszuwählen, bewegen Sie den Mauszeiger auf die linke Seite der gewünschten Zelle, sodass sich der Zeiger in den schwarzen Pfeil <img alt="Zelle auswählen" src="../images/selectcellpointer.png" /> verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
-            <p>Um eine bestimmte Zeile auszuwählen, bewegen Sie den Mauszeiger an den linken Rand der Tabelle neben der erforderlichen Zeile, sodass sich der Zeiger in den horizontalen schwarzen Pfeil <img alt="Zeile auswählen" src="../images/selectrowpointer.png" /> verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
-            <p>Um eine bestimmte Spalte auszuwählen, bewegen Sie den Mauszeiger an den oberen Rand der erforderlichen Spalte, sodass sich der Zeiger  in den schwarzen Pfeil <img alt="Spalte auswählen" src="../images/selectcolumnpointer.png" /> nach unten verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
+            <p>Um eine gesamtee Tabelle auszuwählen, klicken Sie auf den <div class = "icon icon-movetable_handle"></div> Griff in der oberen linken Ecke.</p>
+            <p>Um eine bestimmte Zelle auszuwählen, bewegen Sie den Mauszeiger auf die linke Seite der gewünschten Zelle, sodass sich der Zeiger in den schwarzen Pfeil <div class = "icon icon-selectcellpointer"></div> verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
+            <p>Um eine bestimmte Zeile auszuwählen, bewegen Sie den Mauszeiger an den linken Rand der Tabelle neben der erforderlichen Zeile, sodass sich der Zeiger in den horizontalen schwarzen Pfeil <div class = "icon icon-selectrowpointer"></div> verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
+            <p>Um eine bestimmte Spalte auszuwählen, bewegen Sie den Mauszeiger an den oberen Rand der erforderlichen Spalte, sodass sich der Zeiger  in den schwarzen Pfeil <div class = "icon icon-selectcolumnpointer"></div> nach unten verwandelt, und klicken Sie dann mit der linken Maustaste.</p>
             <p>Es ist auch möglich, eine Zelle, Zeile, Spalte oder Tabelle mithilfe von Optionen aus dem Kontextmenü oder aus dem Abschnitt <b>Zeilen und Spalten</b> in der rechten Seitenleiste auszuwählen.</p>
             <p class="note">Um sich in einer Tabelle zu bewegen, können Sie <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)"><b>Tastaturkürzel</b></a> verwenden.</p>
             <hr />
@@ -71,10 +72,10 @@
                 </li>
 				<li><b>Löschen</b> wird verwendet, um eine Zeile, Spalte, Tabelle oder Zellen zu löschen. Wenn Sie die Option Zellen auswählen, wird das Fenster Zellen löschen geöffnet, in dem Sie auswählen können, ob Sie Zellen nach links verschieben, die gesamte Zeile löschen oder die gesamte Spalte löschen möchten.</li>
                 <li><p><b>Zellen zusammenführen</b> ist verfügbar, wenn zwei oder mehr Zellen ausgewählt sind, und wird zum Zusammenführen verwendet.</p>
-                <p>Es ist auch möglich, Zellen zusammenzuführen, indem mit dem Radiergummi eine Grenze zwischen ihnen gelöscht wird. Klicken Sie dazu in der oberen Symbolleiste auf das <b>Tabellensymbol</b> <img alt="Tabelle" src="../images/table.png" /> und wählen Sie die Option <b>Tabelle löschen</b>. Der Mauszeiger wird zum <b>Radiergummi</b> <img alt="Radiergummi" src="../images/eraser_tool.png" />. Bewegen Sie den Mauszeiger über den Rand zwischen den Zellen, die Sie zusammenführen und löschen möchten.
+                <p>Es ist auch möglich, Zellen zusammenzuführen, indem mit dem Radiergummi eine Grenze zwischen ihnen gelöscht wird. Klicken Sie dazu in der oberen Symbolleiste auf das <b>Tabellensymbol</b> <div class = "icon icon-table"></div> und wählen Sie die Option <b>Tabelle löschen</b>. Der Mauszeiger wird zum <b>Radiergummi</b> <div class = "icon icon-eraser_tool"></div>. Bewegen Sie den Mauszeiger über den Rand zwischen den Zellen, die Sie zusammenführen und löschen möchten.
                 </p></li>
                 <li><p><b>Zelle teilen...</b> wird verwendet, um ein Fenster zu öffnen, in dem Sie die erforderliche Anzahl von Spalten und Zeilen auswählen können, in die die Zelle aufgeteilt werden soll.</p>
-                <p>Sie können eine Zelle auch teilen, indem Sie mit dem Bleistiftwerkzeug Zeilen oder Spalten zeichnen. Klicken Sie dazu in der oberen Symbolleiste auf das <b>Tabellensymbol</b> <img alt="Tabelle" src="../images/table.png" /> und wählen Sie die Option <b>Tabelle zeichnen</b>. Der Mauszeiger verwandelt sich in einen <b>Bleistift</b> <img alt="Bleistift" src="../images/pencil_tool.png" />. Zeichnen Sie eine horizontale Linie, um eine Zeile zu erstellen, oder eine vertikale Linie, um eine Spalte zu erstellen.
+                <p>Sie können eine Zelle auch teilen, indem Sie mit dem Bleistiftwerkzeug Zeilen oder Spalten zeichnen. Klicken Sie dazu in der oberen Symbolleiste auf das <b>Tabellensymbol</b> <div class = "icon icon-table"></div> und wählen Sie die Option <b>Tabelle zeichnen</b>. Der Mauszeiger verwandelt sich in einen <b>Bleistift</b> <div class = "icon icon-pencil_tool"></div>. Zeichnen Sie eine horizontale Linie, um eine Zeile zu erstellen, oder eine vertikale Linie, um eine Spalte zu erstellen.
                 </p></li>
 				<li>Mit <b>Zeilen verteilen</b> werden die ausgewählten Zellen so angepasst, dass sie dieselbe Höhe haben, ohne die Gesamthöhe der Tabelle zu ändern..</li>
                 <li>Mit <b>Spalten verteilen</b> werden die ausgewählten Zellen so angepasst, dass sie dieselbe Breite haben, ohne die Gesamtbreite der Tabelle zu ändern.</li>
@@ -119,7 +120,7 @@
             <ul>
                 <li>Der Abschnitt <b>Tabellengröße</b> enthält die folgenden Parameter:<ul>
                     <li><b>Breite</b> - Standardmäßig wird die Tabellenbreite automatisch an die Seitenbreite angepasst, d. H. Die Tabelle nimmt den gesamten Raum zwischen dem linken und rechten Seitenrand ein. Sie können dieses Kontrollkästchen aktivieren und die erforderliche Tabellenbreite manuell angeben.</li>
-                    <li><b>Messen in</b> - Ermöglicht die Angabe, ob Sie die Tabellenbreite in absoluten Einheiten festlegen möchten, d. H. <b>Zentimeter</b> / <b>Punkte</b> / <b>Zoll</b> (abhängig von der auf der Registerkarte <b>Datei</b> -&gt; <b>Erweiterte Einstellungen...</b>angegebenen Option) oder in <b>Prozent</b> der Gesamtseitenbreite.<p class="note"><b>Hinweis</b>: Sie können die Tabellengröße auch manuell anpassen, indem Sie die Zeilenhöhe und Spaltenbreite ändern. Bewegen Sie den Mauszeiger über einen Zeilen- / Spaltenrand, bis  er sich in einen bidirektionalen Pfeil verwandelt, und ziehen Sie den Rand. Sie können auch die <img alt="Tabelle - Markierung Spaltenbreite" src="../images/columnwidthmarker.png" /> Markierungen auf dem horizontalen Lineal verwenden, um die Spaltenbreite zu ändern, und die <img alt="Tabelle - Markierung Zeilenhöhe" src="../images/rowheightmarker.png" /> Markierungen auf dem vertikalen Lineal, um die Zeilenhöhe zu ändern.</p>
+                    <li><b>Messen in</b> - Ermöglicht die Angabe, ob Sie die Tabellenbreite in absoluten Einheiten festlegen möchten, d. H. <b>Zentimeter</b> / <b>Punkte</b> / <b>Zoll</b> (abhängig von der auf der Registerkarte <b>Datei</b> -&gt; <b>Erweiterte Einstellungen...</b>angegebenen Option) oder in <b>Prozent</b> der Gesamtseitenbreite.<p class="note"><b>Hinweis</b>: Sie können die Tabellengröße auch manuell anpassen, indem Sie die Zeilenhöhe und Spaltenbreite ändern. Bewegen Sie den Mauszeiger über einen Zeilen- / Spaltenrand, bis  er sich in einen bidirektionalen Pfeil verwandelt, und ziehen Sie den Rand. Sie können auch die <div class = "icon icon-columnwidthmarker"></div> Markierungen auf dem horizontalen Lineal verwenden, um die Spaltenbreite zu ändern, und die <div class = "icon icon-rowheightmarker"></div> Markierungen auf dem vertikalen Lineal, um die Zeilenhöhe zu ändern.</p>
                     </li>
                     <li><b>Automatische Größenanpassung an den Inhalt</b> - Ermöglicht die automatische Änderung jeder Spaltenbreite entsprechend dem Text in den Zellen.</li>
                 </ul>
@@ -135,7 +136,7 @@
             <ul>
                 <li>Der Abschnitt <b>Zellengröße</b> enthält die folgenden Parameter:<ul>
                         <li><b>Bevorzugte Breite</b> - Ermöglicht das Festlegen einer bevorzugten Zellenbreite. Dies ist die Größe, an die eine Zelle angepasst werden soll. In einigen Fällen ist es jedoch möglicherweise nicht möglich, genau an diesen Wert anzupassen. Wenn der Text in einer Zelle beispielsweise die angegebene Breite überschreitet, wird er in die nächste Zeile aufgeteilt, sodass die bevorzugte Zellenbreite unverändert bleibt. Wenn Sie jedoch eine neue Spalte einfügen, wird die bevorzugte Breite verringert.</li>
-                        <li><b>Messen in</b> - ermöglicht die Angabe, ob Sie die Zellenbreite in absoluten Einheiten festlegen möchten, d. H. <b>Zentimeter</b> / <b>Punkte</b> / <b>Zoll</b> (abhängig von der auf der Registerkarte <b>Datei</b> -&gt; <b>Erweiterte Einstellungen...</b> angegebenen Option) oder in <b>Prozent</b> der gesamten Tabellenbreite.<p class="note"><b>Hinweis</b>: Sie können die Zellenbreite auch manuell anpassen. Um eine einzelne Zelle in einer Spalte breiter oder schmaler als die gesamte Spaltenbreite zu machen, wählen Sie die gewünschte Zelle aus und bewegen Sie den Mauszeiger über den rechten Rand, bis sie sich in den bidirektionalen Pfeil verwandelt. Ziehen Sie dann den Rand. Um die Breite aller Zellen in einer Spalte zu ändern, verwenden Sie die <img alt="Tabelle - Markierung Spaltenbreite" src="../images/columnwidthmarker.png" /> Markierungen auf dem horizontalen Lineal, um die Spaltenbreite zu ändern.</p>
+                        <li><b>Messen in</b> - ermöglicht die Angabe, ob Sie die Zellenbreite in absoluten Einheiten festlegen möchten, d. H. <b>Zentimeter</b> / <b>Punkte</b> / <b>Zoll</b> (abhängig von der auf der Registerkarte <b>Datei</b> -&gt; <b>Erweiterte Einstellungen...</b> angegebenen Option) oder in <b>Prozent</b> der gesamten Tabellenbreite.<p class="note"><b>Hinweis</b>: Sie können die Zellenbreite auch manuell anpassen. Um eine einzelne Zelle in einer Spalte breiter oder schmaler als die gesamte Spaltenbreite zu machen, wählen Sie die gewünschte Zelle aus und bewegen Sie den Mauszeiger über den rechten Rand, bis sie sich in den bidirektionalen Pfeil verwandelt. Ziehen Sie dann den Rand. Um die Breite aller Zellen in einer Spalte zu ändern, verwenden Sie die <div class = "icon icon-columnwidthmarker"></div> Markierungen auf dem horizontalen Lineal, um die Spaltenbreite zu ändern.</p>
                         </li>
                     </ul>
                 </li>
@@ -148,7 +149,7 @@
             <p><img alt="Tabelle - Erweiterte Einstellungen" src="../images/table_properties_3.png" /></p>
             <p>Die Registerkarte <b>Rahmen &amp; Hintergrund</b> enthält die folgenden Parameter:</p>
             <ul>
-                <li><b>Rahmenparameter</b> (Größe, Farbe und Vorhandensein oder Nichtvorhandensein) - Legen Sie die Rahmengröße fest, wählen Sie die Farbe aus und legen Sie fest, wie sie in den Zellen angezeigt werden soll.<p class="note"><b>Hinweis</b>: Wenn Sie festlegen, dass Tabellenränder nicht angezeigt werden, indem Sie auf die Schaltfläche <img alt="Kein Rahmen" src="../images/noborders.png" /> klicken oder alle Ränder manuell im Diagramm deaktivieren, werden sie im Dokument durch eine gepunktete Linie angezeigt.  Um sie überhaupt verschwinden zu lassen, klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Nicht druckbare Zeichen</b> <img alt="Formatierungszeichen" src="../images/nonprintingcharacters.png" /> und wählen Sie die Option <b>Versteckte Tabellenränder</b>.</p>
+                <li><b>Rahmenparameter</b> (Größe, Farbe und Vorhandensein oder Nichtvorhandensein) - Legen Sie die Rahmengröße fest, wählen Sie die Farbe aus und legen Sie fest, wie sie in den Zellen angezeigt werden soll.<p class="note"><b>Hinweis</b>: Wenn Sie festlegen, dass Tabellenränder nicht angezeigt werden, indem Sie auf die Schaltfläche <div class = "icon icon-noborders"></div> klicken oder alle Ränder manuell im Diagramm deaktivieren, werden sie im Dokument durch eine gepunktete Linie angezeigt.  Um sie überhaupt verschwinden zu lassen, klicken Sie auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste auf das Symbol <b>Nicht druckbare Zeichen</b> <div class = "icon icon-nonprintingcharacters"></div> und wählen Sie die Option <b>Versteckte Tabellenränder</b>.</p>
                 </li>
                 <li><b>Zellenhintergrund</b> - Die Farbe für den Hintergrund innerhalb der Zellen (nur verfügbar, wenn eine oder mehrere Zellen ausgewählt sind oder die Option <b>Abstand zwischen Zellen zulassen</b> auf der Registerkarte <b>Tabelle</b> ausgewählt ist).</li>
                 <li><b>Tabellenhintergrund</b> - Die Farbe für den Tabellenhintergrund oder den Abstand zwischen den Zellen, falls auf der Registerkarte <b>Tabelle</b> die Option <b>Abstand zwischen Zellen zulassen</b> ausgewählt ist.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Insert text objects such as text boxes and Text Art to make your text more impressive" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -20,9 +21,9 @@
             <ol>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
                 <li>Wählen Sie das gewünschten Textobjekt aus:<ul>
-                    <li>Um ein Textfeld hinzuzufügen, klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Textfeld" src="../images/inserttexticon.png" /> <b>Textfeld</b> und dann auf die Stelle, an der Sie das Textfeld einfügen möchten. Halten Sie die Maustaste gedrückt, und ziehen Sie den Rahmen des Textfelds in die gewünschte Größe. Wenn Sie die Maustaste loslassen, erscheint die Einfügemarke im hinzugefügten Textfeld und Sie können Ihren Text eingeben.<p class="note"><b>Hinweis</b>: alternativ können Sie ein Textfeld einfügen, indem Sie in der oberen Symbolleiste auf <img alt="Form" src="../images/insertautoshape.png" /> <b>Form</b> klicken und das Symbol <img alt="Text-AutoForm einfügen" src="../images/text_autoshape.png" /> aus der Gruppe <b>Standardformen</b> auswählen.</p>
+                    <li>Um ein Textfeld hinzuzufügen, klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-inserttexticon"></div> <b>Textfeld</b> und dann auf die Stelle, an der Sie das Textfeld einfügen möchten. Halten Sie die Maustaste gedrückt, und ziehen Sie den Rahmen des Textfelds in die gewünschte Größe. Wenn Sie die Maustaste loslassen, erscheint die Einfügemarke im hinzugefügten Textfeld und Sie können Ihren Text eingeben.<p class="note"><b>Hinweis</b>: alternativ können Sie ein Textfeld einfügen, indem Sie in der oberen Symbolleiste auf <div class = "icon icon-insertautoshape"></div> <b>Form</b> klicken und das Symbol <div class = "icon icon-text_autoshape"></div> aus der Gruppe <b>Standardformen</b> auswählen.</p>
                     </li>
-                    <li>Um ein TextArt-Objekt einzufügen, klicken Sie auf das Symbol <img alt="TextArt" src="../images/inserttextarticon.png" /> <b>TextArt</b> in der oberen Symbolleiste und klicken Sie dann auf die gewünschte Stilvorlage - das TextArt-Objekt wird an der aktuellen Cursorposition eingefügt. Markieren Sie den Standardtext innerhalb des Textfelds mit der Maus und ersetzen Sie diesen durch Ihren eigenen Text.</li>
+                    <li>Um ein TextArt-Objekt einzufügen, klicken Sie auf das Symbol <div class = "icon icon-inserttextarticon"></div> <b>TextArt</b> in der oberen Symbolleiste und klicken Sie dann auf die gewünschte Stilvorlage - das TextArt-Objekt wird an der aktuellen Cursorposition eingefügt. Markieren Sie den Standardtext innerhalb des Textfelds mit der Maus und ersetzen Sie diesen durch Ihren eigenen Text.</li>
                 </ul>
                 </li>
                 <li>Klicken Sie in einen Bereich außerhalb des Text-Objekts, um die Änderungen anzuwenden und zum Dokument zurückzukehren.</li>
@@ -35,7 +36,7 @@
             <p><img alt="Markiertes Textfeld" src="../images/textbox_boxselected.png" /></p>
             <ul>
                 <li>Sie können das Textfeld mithilfe der speziellen Ziehpunkte an den Ecken der Form <a href="../UsageInstructions/InsertAutoshapes.htm#shape_resize" onclick="onhyperlinkclick(this)">verschieben, drehen und die Größe ändern</a>.</li>
-                <li>Um das Textfeld zu bearbeiten <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)">mit einer Füllung zu versehen</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)">Rahmenlinien zu ändern</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_wrapping" onclick="onhyperlinkclick(this)">den Textumbruch zu formatieren</a> oder das <b>rechteckige Feld</b> mit einer anderen Form zu ersetzen, klicken Sie in der rechten Seitenleiste auf <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> und nutzen Sie die entsprechenden Optionen.</li>                
+                <li>Um das Textfeld zu bearbeiten <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)">mit einer Füllung zu versehen</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)">Rahmenlinien zu ändern</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_wrapping" onclick="onhyperlinkclick(this)">den Textumbruch zu formatieren</a> oder das <b>rechteckige Feld</b> mit einer anderen Form zu ersetzen, klicken Sie in der rechten Seitenleiste auf <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> und nutzen Sie die entsprechenden Optionen.</li>                
                 <li>Um das Textfeld auf der Seite <b>auszurichten</b>, Textfelder mit andern Objekten zu <b>verknüpfen</b>, ein Textfeld zu <b>rotieren oder umzudrehen</b>, den <b>Umbruchstil</b> zu ändern oder auf <b>Formen - Erweiterte Einstellungen</b> zuzugreifen, klicken Sie mit der rechten Maustaste auf den Feldrand und öffnen Sie so das <a href="../UsageInstructions/InsertAutoshapes.htm#shape_rightclickmenu" onclick="onhyperlinkclick(this)">Kontextmenü</a>. Weitere Informationen zum Ausrichten und Anordnen von Objekten finden Sie auf <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">dieser Seite</a>.</li>
             </ul>
             <h3>Text im Textfeld formatieren</h3>
@@ -51,9 +52,9 @@
                 <li><a href="../UsageInstructions/LineSpacing.htm" onclick="onhyperlinkclick(this)">Zeilenabstände</a> festlegen, <a href="../UsageInstructions/ParagraphIndents.htm" onclick="onhyperlinkclick(this)">Absatzeinzüge</a> ändern und die <a href="../UsageInstructions/SetTabStops.htm" onclick="onhyperlinkclick(this)">Tabulatoren</a> für den mehrzeiligen Text innerhalb des Textfelds anpassen</li>
                 <li>einen <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">Hyperlink</a> einfügen</li>
             </ul>
-            <p>Sie können auch in der rechten Seitenleiste auf das Symbol <b>TextArt-Einstellungen</b> <img alt="TextArt-Einstellungen" src="../images/textart_settings_icon.png" /> klicken und die gewünschten Stilparameter ändern.</p>
+            <p>Sie können auch in der rechten Seitenleiste auf das Symbol <b>TextArt-Einstellungen</b> <div class = "icon icon-textart_settings_icon"></div> klicken und die gewünschten Stilparameter ändern.</p>
             <h3>TextArt-Stil bearbeiten</h3>
-            <p>Wählen Sie ein Textobjekt aus und klicken Sie in der rechten Seitenleiste auf das Symbol <b>TextArt-Einstellungen</b> <img alt="TextArt-Einstellungen" src="../images/textart_settings_icon.png" />.</p>
+            <p>Wählen Sie ein Textobjekt aus und klicken Sie in der rechten Seitenleiste auf das Symbol <b>TextArt-Einstellungen</b> <div class = "icon icon-textart_settings_icon"></div>.</p>
             <p><img alt="Registerkarte TextArt-Einstellungen" src="../images/right_textart.png" /></p>
             <p>Ändern Sie den angewandten Textstil, indem Sie eine neue <b>Vorlage</b> aus der Galerie auswählen. Sie können den Grundstil außerdem ändern, indem Sie eine andere Schriftart, -größe usw. auswählen.</p>
             <p><b>Füllung</b> der Schriftart ändern. Folgende Optionen stehen Ihnen zur Verfügung:</p>
@@ -65,7 +66,7 @@
                     <ul>
                         <li><b>Stil</b> - wählen Sie eine der verfügbaren Optionen: <b>Linear</b> (Farben ändern sich linear, d.h. entlang der horizontalen/vertikalen Achse oder diagonal in einem 45-Grad Winkel) oder <b>Radial</b> (Farben ändern sich kreisförmig vom Zentrum zu den Kanten).</li>
                         <li><b>Richtung</b> - wählen Sie eine Vorlage aus dem Menü aus. Wenn der Farbverlauf <b>Linear</b> ausgewählt ist, sind die folgenden Richtungen verfügbar: von oben links nach unten rechts, von oben nach unten, von oben rechts nach unten links, von rechts nach links, von unten rechts nach oben links, von unten nach oben, von unten links nach oben rechts, von links nach rechts. Wenn der Farbverlauf <b>Radial</b> ausgewählt ist, steht nur eine Vorlage zur Verfügung.</li>
-                        <li><b>Farbverlauf</b> - klicken Sie auf den linken Schieberegler <img alt="Schieberegler" src="../images/gradientslider.png" /> unter der Farbverlaufsleiste, um das Farbfeld für die erste Farbe zu aktivieren. Klicken Sie auf das Farbfeld auf der rechten Seite, um die erste Farbe in der Farbpalette auszuwählen. Nutzen Sie den rechten Schieberegler unter der Farbverlaufsleiste, um den Wechselpunkt festzulegen, an dem eine Farbe in die andere übergeht. Nutzen Sie den rechten Schieberegler unter der Farbverlaufsleiste, um die zweite Farbe anzugeben und den Wechselpunkt festzulegen.</li>
+                        <li><b>Farbverlauf</b> - klicken Sie auf den linken Schieberegler <div class = "icon icon-gradientslider"></div> unter der Farbverlaufsleiste, um das Farbfeld für die erste Farbe zu aktivieren. Klicken Sie auf das Farbfeld auf der rechten Seite, um die erste Farbe in der Farbpalette auszuwählen. Nutzen Sie den rechten Schieberegler unter der Farbverlaufsleiste, um den Wechselpunkt festzulegen, an dem eine Farbe in die andere übergeht. Nutzen Sie den rechten Schieberegler unter der Farbverlaufsleiste, um die zweite Farbe anzugeben und den Wechselpunkt festzulegen.</li>
                     </ul>
                     <p class="note"><b>Hinweis</b>: Ist eine dieser beiden Optionen ausgewählt, haben Sie zusätzlich die Wahl, die <b>Transparenz</b> der Füllung festzulegen, ziehen Sie dazu den Schieberegler in die gewünschte Position oder geben Sie den Prozentwert manuell ein. Der Standardwert beträgt <b>100%</b>. Also volle Deckkraft. Der Wert <b>0%</b> steht für vollständige Transparenz.</p>
                 </li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Legen Sie den Zeilenabstand in Ihrem Dokument fest" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -42,7 +43,7 @@
             </ol>
             <p>Diese Parameter finden Sie auch im Fenster <b>Absatz - Erweiterte Einstellungen</b>. Um das Fenster <b>Absatz - Erweiterte Einstellungen</b> zu öffnen, klicken Sie mit der rechten Maustaste auf den Text und wählen Sie im Menü die Option <b>Erweiterte Absatzeinstellungen</b> oder verwenden Sie die Option <b>Erweiterte Einstellungen anzeigen</b> in der rechten Seitenleiste. Wechseln Sie dann zur Registerkarte <b>Einrückungen und Abstände</b> und gehen Sie zum <b>Abschnitt</b> Abstand.</p>
             <p><img alt="Absatz Erweiterte Einstellungen" src="../images/paradvsettings_indents.png" /></p>
-            <p>Um den aktuellen Absatzzeilenabstand schnell zu ändern, können Sie auch das Symbol für den Absatzzeilenabstand <img alt="Zeilenabstand" src="../images/linespacing.png" /> verwenden. Wählen Sie auf der Registerkarte Startseite in der oberen Symbolleiste das Symbol für den Absatzwert aus der Liste aus: 1,0; 1,15; 1,5; 2,0; 2,5; oder 3,0.</p>
+            <p>Um den aktuellen Absatzzeilenabstand schnell zu ändern, können Sie auch das Symbol für den Absatzzeilenabstand <div class = "icon icon-linespacing"></div> verwenden. Wählen Sie auf der Registerkarte Startseite in der oberen Symbolleiste das Symbol für den Absatzwert aus der Liste aus: 1,0; 1,15; 1,5; 2,0; 2,5; oder 3,0.</p>
         </div>
 	</body>
 </html>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Show or hide nonprinting characters while formatting text, creating tables, and editing documents" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -15,62 +16,62 @@
         </div>
 			<h1>Formatierungszeichen ein-/ausblenden</h1>
 			<p>Die Formatierungszeichen helfen Ihnen bei der Bearbeitung eines Dokuments. Sie zeigen das Vorhandensein verschiedener Formatierungen an, aber sie werden nicht mit dem Dokument gedruckt, auch wenn sie auf dem Bildschirm angezeigt werden.</p>
-			<p>Um Formatierungszeichen ein- bzw. auszublenden im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, klicken Sie auf das Symbol <b>Formatierungszeichen</b> <img alt="Formatierungszeichen" src="../images/nonprintingcharacters.png" /> in der Registerkarte <b>Start</b>.</p>
+			<p>Um Formatierungszeichen ein- bzw. auszublenden im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, klicken Sie auf das Symbol <b>Formatierungszeichen</b> <div class = "icon icon-nonprintingcharacters"></div> in der Registerkarte <b>Start</b>.</p>
 			<p>Die Formatierungszeichen:</p>
 			<table>
 				<tr>
 					<td>Leerzeichen</td>
-					<td><img alt="Leerzeichen" src="../images/space.png" /></td>
+					<td><div class = "icon icon-space"></div></td>
 					<td>Wird eingefügt, wenn Sie die <b>Leertaste</b> drücken. Dieses Zeichen zeigt einen Zwischenraum zwischen den Zeichen an.</td>
 				</tr>
 				<tr>
 					<td>Tabulatoren</td>
-					<td><img alt="Tabulator" src="../images/tab.png" /></td>
+					<td><div class = "icon icon-tab"></div></td>
 					<td>Wird eingefügt, wenn Sie die <b>Tabulatortaste</b> drücken. Dudurch wird der Cursor zur nächsten Tabulatormarke bewegt.</td>
 				</tr>
 				<tr>
 					<td>Absatzzeichen (d.h. harter Zeilenumbruch)</td>
-					<td><img alt="Harter Zeilenumbruch" src="../images/hard.png" /></td>
+					<td><div class = "icon icon-hard"></div></td>
 					<td>Wird eingefügt, wenn Sie die <b>Eingabetaste</b> drücken. Dadurch wird der aktuelle Absatz beendet und ein Abstand zum folgenden Absatz eingefügt. Das Zeichen enthält Informationen zur Absatzformatierung.</td>
 				</tr>
 				<tr>
 					<td>Zeilenumbruch (d.h. weicher Zeilenumbruch)</td>
-					<td><img alt="Weicher Zeilenumbruch" src="../images/soft.png" /></td>
+					<td><div class = "icon icon-soft"></div></td>
 					<td>Wird eingefügt, wenn Sie die Tastenkombination <b>UMSCHALT+ENTER</b> verwenden. Dadurch wird die aktuelle Zeile umgebrochen und die folgenden Zeilen werden ohne zusätzlichen Zwischenabstand angefügt. Weiche Zeilenumbrüche werden hauptsächlich in Überschriften und Titeln verwendet.</td>
 				</tr>
 				<tr>
 					<td>Geschütztes Leerzeichen</td>
-					<td><img alt="Geschütztes Leerzeichen" src="../images/nonbreakspace.png" /></td>
+					<td><div class = "icon icon-nonbreakspace"></div></td>
 					<td>Wird eingefügt, wenn Sie die Tastenkombination <b>STRG+UMSCHALT+LEERTASTE</b> verwenden. Es erzeugt ein Leerzeichen zwischen Zeichen, die nicht als Beginn einer neuen Zeile verwendet werden können.</td>
 				</tr>
 				<tr>
 					<td>Seitenumbruch</td>
-					<td><img alt="Seitenumbruch" src="../images/pagebreak.png" /></td>
-					<td>Wird eingefügt, wenn Sie das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und die Option <b>Seitenumbruch einfügen</b> auswählen oder im Rechtsklickmenü oder im Fenster mit den erweiterten Einstellungen die Option <b>Seitenumbruch vorher</b> auswählen.</td>
+					<td><div class = "big big-pagebreak"></div></td>
+					<td>Wird eingefügt, wenn Sie das Symbol <div class = "icon icon-pagebreak1"></div> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und die Option <b>Seitenumbruch einfügen</b> auswählen oder im Rechtsklickmenü oder im Fenster mit den erweiterten Einstellungen die Option <b>Seitenumbruch vorher</b> auswählen.</td>
 				</tr>
 				<tr>
 					<td>Abschnittsumbrüche</td>
-					<td><img alt="Abschnittsumbruch" src="../images/sectionbreak.png" /></td>
-					<td>Wird eingefügt, wenn Sie das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und eine der Optionen im Untermenü <b>Abschnittsumbruch einfügen</b> auswählen (die Anzeige für den jeweiligen Umbruch unterscheidet sich je nachdem, welche Option ausgewählt ist): Nächste Seite, Fortlaufend, Gerade Seite, Ungerade Seite).</td>
+					<td><div class = "big big-sectionbreak"></div></td>
+					<td>Wird eingefügt, wenn Sie das Symbol <div class = "icon icon-pagebreak1"></div> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und eine der Optionen im Untermenü <b>Abschnittsumbruch einfügen</b> auswählen (die Anzeige für den jeweiligen Umbruch unterscheidet sich je nachdem, welche Option ausgewählt ist): Nächste Seite, Fortlaufend, Gerade Seite, Ungerade Seite).</td>
 				</tr>
                 <tr>
                     <td>Spaltenumbrüche</td>
-                    <td><img alt="Spaltenumbruch" src="../images/columnbreak.png" /></td>
-                    <td>Wird eingefügt, wenn Sie das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und die Option <b>Spaltenumbruch einfügen</b> auswählen.</td>
+                    <td><div class = "big big-columnbreak"></div></td>
+                    <td>Wird eingefügt, wenn Sie das Symbol <div class = "icon icon-pagebreak1"></div> <b>Umbrüche</b> in der oberen Symbolleiste auf den Registerkarten <b>Einfügen</b> oder <b>Layout</b> anklicken und die Option <b>Spaltenumbruch einfügen</b> auswählen.</td>
                 </tr>
 				<tr>
 					<td>Markierungen für das Zell- und Zeilenende in Tabellen</td>
-					<td><img alt="Markierungen in Tabellen" src="../images/cellrow.png" /></td>
+					<td><div class = "icon icon-cellrow"></div></td>
 					<td>Diese Markierungen enthalten die Formatierungscodes für die jeweilige Zelle bzw. Zeile.</td>
 				</tr>
 				<tr>
 					<td>Kleines schwarzes Quadrat am Seitenrand links von einem Absatz</td>
-					<td><img alt="Schwarzes Quadrat" src="../images/square.png" /></td>
+					<td><div class = "icon icon-square"></div></td>
 					<td>Zeigt an, dass mindestens eine der Absatzoptionen angewendet wurde, z.B. <b>Zeilen zusammenhalten</b>, <b>Seitenumbruch oberhalb</b>.</td>
 				</tr>
 				<tr>
 					<td>Anker</td>
-					<td><img alt="Anker" src="../images/anchor.png" /></td>
+					<td><div class = "icon icon-anchor"></div></td>
 					<td>Zeigt die Position von schwebenden Objekten an (Objekte deren Position nicht auf der Seite <b>Fixiert</b> ist), z.B. von Bildern, AutoFormen, Diagrammen. Um den Anker sichtbar zu machen, wählen Sie einfach ein beliebiges Objekt aus.</td>
 				</tr>
 			</table>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des OCR-Plugins für ONLYOFFICE Editoren, mit dem Text aus einem Bild extrahiert und in Dokumente eingefügt werden kann" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -17,7 +18,7 @@
         <p>Mit ONLYOFFICE <a href="https://www.onlyoffice.com/de/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> können Sie Text aus einem Bild (.png .jpg) extrahieren und in Ihr Dokument einfügen.</p>
         <ol>
             <li>Öffnen Sie Ihr Dokument und platzieren Sie den Cursor an der Stelle, an der Sie den Text einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="OCR Plugin - Symbol" src="../images/ocr.png" /> <b>OCR</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-ocr"></div> <b>OCR</b> aus.</li>
             <li>Klicken Sie auf <b>Datei laden</b> und wählen Sie das Bild aus.</li>
             <li>Wählen Sie die Erkennungssprache aus dem Drop-Down-Menü <b>Sprache auswählen</b>.</li>
             <li>Klicken Sie auf <b>Erkennen</b>.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Im Dokumenteneditor können Sie eine kürzlich bearbeitete Dokument öffnen, ein neues Dokument erstellen oder zur Liste der vorhandenen Dokument zurückkehren" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -27,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, Dokumentvorlage (DOTX), ODT, OTT, RTF, TXT, PDF oder PDFA) und klicken Sie auf die Schaltfläche <b>Speichern</b>.</li>
                 </ol>
             </div>
@@ -60,7 +61,7 @@
                 </ol>
             </div>
 
-                <p>Um den Ordner in dem die Datei gespeichert ist in der <em>Online-Version</em> <span class="onlineDocumentFeatures">in einem neuen Browser-Tab</span> oder in der <em>Desktop-Version</em> im Fenster <span class="desktopDocumentFeatures">Datei-Explorer</span> zu öffnen, klicken Sie auf der rechten Seite des Editor-Hauptmenüs auf das Symbol <img alt="Dateispeicherort öffnen" src="../images/gotodocuments.png" /> <b>Dateispeicherort öffnen</b>. Alternativ können Sie in der oberen Menüleiste auf die Registerkarte <b>Datei</b> wechseln und die Option <b>Dateispeicherort öffnen</b> auswählen.</p>
+                <p>Um den Ordner in dem die Datei gespeichert ist in der <em>Online-Version</em> <span class="onlineDocumentFeatures">in einem neuen Browser-Tab</span> oder in der <em>Desktop-Version</em> im Fenster <span class="desktopDocumentFeatures">Datei-Explorer</span> zu öffnen, klicken Sie auf der rechten Seite des Editor-Hauptmenüs auf das Symbol <div class = "icon icon-gotodocuments"></div> <b>Dateispeicherort öffnen</b>. Alternativ können Sie in der oberen Menüleiste auf die Registerkarte <b>Datei</b> wechseln und die Option <b>Dateispeicherort öffnen</b> auswählen.</p>
             </div>
 	</body>
 </html>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie einen Seitenumbruch oder halten Sie die Zeilen eines Absatzes zusammen" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -15,8 +16,8 @@
         </div>
 			<h1>Seitenumbrüche einfügen</h1>
 			<p>Im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> können Sie einen Seitenumbruch hinzufügen, um eine neue Seite zu starten, eine leere Seite einzufügen und die Paginierungsoptionen anzupassen.</p>
-			<p>Um einen Seitenumbruch an der aktuellen Zeigerposition einzufügen, klicken Sie auf das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Unterbrechungen</b> auf der Registerkarte <b>Einfügen</b> oder <b>Layout</b> der oberen Symbolleiste oder klicken Sie auf den Pfeil neben diesem Symbol und wählen Sie im Menu die Option <b>Seitenumbruch einfügen</b>. Sie können auch die Tastenkombination Strg + Eingabetaste verwenden.</p>
-			<p>Um eine leere Seite einzufügen, klicken Sie auf das Symbol <img alt="Leere Seite" src="../images/blankpage.png" /> <b>Leere Seite</b> auf der Registerkarte <b>Einfügen</b> der oberen Symbolleiste. Dadurch werden zwei Seitenumbrüche eingefügt, wodurch eine leere Seite erstellt wird.</p>
+			<p>Um einen Seitenumbruch an der aktuellen Zeigerposition einzufügen, klicken Sie auf das Symbol <div class = "icon icon-pagebreak1"></div> <b>Unterbrechungen</b> auf der Registerkarte <b>Einfügen</b> oder <b>Layout</b> der oberen Symbolleiste oder klicken Sie auf den Pfeil neben diesem Symbol und wählen Sie im Menu die Option <b>Seitenumbruch einfügen</b>. Sie können auch die Tastenkombination Strg + Eingabetaste verwenden.</p>
+			<p>Um eine leere Seite einzufügen, klicken Sie auf das Symbol <div class = "icon icon-blankpage"></div> <b>Leere Seite</b> auf der Registerkarte <b>Einfügen</b> der oberen Symbolleiste. Dadurch werden zwei Seitenumbrüche eingefügt, wodurch eine leere Seite erstellt wird.</p>
             <p>Um einen Seitenumbruch vor dem ausgewählten Absatz einzufügen, d. H. um diesen Absatz oben auf einer neuen Seite zu beginnen:</p>
 			<ul>
 				<li>Klicken Sie mit der rechten Maustaste und wählen Sie im Menü die Option <b>Seitenumbruch vor</b> oder</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Ändern Sie die Absatzeinzüge, nämlich den Einzug der ersten Zeile vom linken Seitenrand und die Absatzeinzüge von links und rechts" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -37,13 +38,13 @@
 					<p><img alt="Absatz - Erweiterte Einstellungen: Einzüge &amp; Position" src="../images/paradvsettings_indents.png" /></p>
 				</li>
 			</ol>
-			<p>Um den Abstand zum linken Seitenrand zu ändern, können Sie auch die entsprechenden Symbole in der Registerkarte <b>Start</b> auf der oberen Symbolleiste benutzen: <b>Einzug verkleinern</b> <img alt="Einzug verkleinern" src="../images/decreaseindent.png" /> und <b>Einzug vergrößern</b> <img alt="Einzug vergrößern" src="../images/increaseindent.png" />.</p>
-			<p>Sie können auch das horizontale <b>Lineal</b> nutzen, um Einzüge festzulegen.</p><img alt="Lineal - Einzugsmarke" src="../images/indents_ruler.png" /><p>Wählen Sie den gewünschten Absatz (Absätze) und ziehen Sie die Einzugsmarken auf dem Lineal in die gewünschte Position.</p>
+			<p>Um den Abstand zum linken Seitenrand zu ändern, können Sie auch die entsprechenden Symbole in der Registerkarte <b>Start</b> auf der oberen Symbolleiste benutzen: <b>Einzug verkleinern</b> <div class = "icon icon-decreaseindent"></div> und <b>Einzug vergrößern</b> <div class = "icon icon-increaseindent"></div>.</p>
+			<p>Sie können auch das horizontale <b>Lineal</b> nutzen, um Einzüge festzulegen.</p><div class = "big big-indents_ruler"></div><p>Wählen Sie den gewünschten Absatz (Absätze) und ziehen Sie die Einzugsmarken auf dem Lineal in die gewünschte Position.</p>
 			<ul>
-				<li>Mit der Markierung für den <b>Erstzeileneinzug</b> <img alt="Erstzeileneinzug" src="../images/firstline_indent.png" /> lässt sich der Versatz des Absatzes vom linken Seitenbereich für die erste Zeile eines Absatzes festlegen.</li>
-				<li>Mit der Einzugsmarke für den <b>hängenden Einzug</b> <img alt="Hängender Einzug" src="../images/hanging.png" /> lässt sich der Versatz vom linken Seitenrand für die zweite Zeile sowie alle Folgezeilen eines Absatzes festlegen.</li>
-				<li>Mit der <b>linken Einzugsmarke</b> <img alt="Linke Einzugsmarke" src="../images/leftindent.png" /> lässt sich der Versatz des Absatzes vom linken Seitenrand festlegen.</li>
-				<li>Mit der <b>rechten Einzugsmarke</b> <img alt="Rechte Einzugsmarke" src="../images/right_indent.png" /> lässt sich der Versatz des Absatzes vom rechten Seitenrand festlegen.</li>
+				<li>Mit der Markierung für den <b>Erstzeileneinzug</b> <div class = "icon icon-firstline_indent"></div> lässt sich der Versatz des Absatzes vom linken Seitenbereich für die erste Zeile eines Absatzes festlegen.</li>
+				<li>Mit der Einzugsmarke für den <b>hängenden Einzug</b> <div class = "icon icon-hanging"></div> lässt sich der Versatz vom linken Seitenrand für die zweite Zeile sowie alle Folgezeilen eines Absatzes festlegen.</li>
+				<li>Mit der <b>linken Einzugsmarke</b> <div class = "icon icon-leftindent"></div> lässt sich der Versatz des Absatzes vom linken Seitenrand festlegen.</li>
+				<li>Mit der <b>rechten Einzugsmarke</b> <div class = "icon icon-right_indent"></div> lässt sich der Versatz des Absatzes vom rechten Seitenrand festlegen.</li>
 			</ul>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Foto-Editor-Plugins für ONLYOFFICE Editoren, mit dem Bilder bearbeitet werden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -18,7 +19,7 @@
         <ol>
             <li>Wählen Sie das Bild in Ihrem Dokument aus.</li>
             <li>
-                Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Foto-Editor Plugin - Symbol" src="../images/photoeditor.png" /> <b>Foto-Editor</b> aus.<br />
+                Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-photoeditor"></div> <b>Foto-Editor</b> aus.<br />
                 Sie befinden sich jetzt im Bearbeitungsmodus.
                 <ul>
                     <li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Save, download and print your documents in various formats" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,7 +19,7 @@
 			<p class="onlineDocumentFeatures">Standardmäßig speichert der Online-<a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> Ihre Datei während der Bearbeitung automatisch alle 2 Sekunden, um Datenverluste im Falle eines unerwarteten Progammabsturzes zu verhindern. Wenn Sie die Datei im <b>Schnellmodus</b> co-editieren, fordert der Timer 25 Mal pro Sekunde Aktualisierungen an und speichert vorgenommene Änderungen. Wenn Sie die Datei im Modus <b>Strikt</b> co-editieren, werden Änderungen automatisch alle 10 Minuten gespeichert. Sie können den bevorzugten Co-Modus nach Belieben auswählen oder die Funktion <b>AutoSpeichern</b> auf der Seite <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Erweiterte Einstellungen</a> deaktivieren.</p>
 			<p>Aktuelles Dokument manuell im aktuellen Format im aktuellen Verzeichnis speichern:</p>
 			<ul>
-				<li>Verwenden Sie das Symbol <b>Speichern</b> <img alt="Speichern" src="../images/save.png" /> im linken Bereich der Kopfzeile des Editors oder</li>
+				<li>Verwenden Sie das Symbol <b>Speichern</b> <div class = "icon icon-save"></div> im linken Bereich der Kopfzeile des Editors oder</li>
 				<li>drücken Sie die Tasten <b>STRG+S</b> oder</li>
 				<li>wechseln Sie in der oberen Menüleiste in die Registerkarte <b>Datei</b> und wählen Sie die Option <b>Speichern</b>.</li>
 			</ul>
@@ -51,7 +52,7 @@
 			<h3 id="print">Drucken</h3>
 			<p>Aktuelles Dokument drucken</p>
 			<ul>
-				<li>Klicken Sie auf das Symbol <b>Drucken</b> <img alt="Drucken" src="../images/print.png" /> im linken Bereich der Kopfzeile des Editors oder</li>
+				<li>Klicken Sie auf das Symbol <b>Drucken</b> <div class = "icon icon-print"></div> im linken Bereich der Kopfzeile des Editors oder</li>
 				<li>nutzen Sie die Tastenkombination <b>STRG+P</b> oder</li>
 				<li>wechseln Sie in der oberen Menüleiste in die Registerkarte <b>Datei</b> und wählen Sie die Option <b>Drucken</b>.</li>
 			</ul>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert section breaks to use different formatting for each section of the document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,7 +19,7 @@
 			<p class="note"><b>Hinweis</b>: Ein eingefügter Abschnittswechsel definiert die Formatierung des vorangegangenen Abschnitts.</p>
 			<p>Einfügen eines Abschnittsumbruchs an der aktuellen Cursorposition:</p>
 			<ol>
-				<li>Klicken Sie in der oberen Menüleiste auf das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Umbrüche</b> in den Registerkarten <b>Einfügen</b> oder <b>Layout</b>.</li>
+				<li>Klicken Sie in der oberen Menüleiste auf das Symbol <div class = "icon icon-pagebreak1"></div> <b>Umbrüche</b> in den Registerkarten <b>Einfügen</b> oder <b>Layout</b>.</li>
 				<li>Wählen Sie das Untermenü <b>Abschnittsumbruch einfügen</b>.</li>
 				<li>Wählen Sie den gewünschten Umbruch:<ul>
 				<li><b>Nächste Seite</b> - um auf der nächsten Seite einen neuen Abschnitt zu beginnen</li>
@@ -28,8 +29,8 @@
 				</ul>
 				</li>
 			</ol>
-			<p>Abschnittswechsel werden in Ihrem Dokument durch eine doppelt gepunktete Linie angezeigt: <img alt="Abschnittsumbruch" src="../images/sectionbreak.png" /></p>
-			<p>Wenn die eingefügten Abschnittsumbrüche nicht angezeigt werden, klicken Sie in der Registerkarte <b>Start</b> auf das Symbol<img alt="Formatierungssymbole" src="../images/nonprintingcharacters.png" />.</p>
+			<p>Abschnittswechsel werden in Ihrem Dokument durch eine doppelt gepunktete Linie angezeigt: <div class = "big big-sectionbreak"></div></p>
+			<p>Wenn die eingefügten Abschnittsumbrüche nicht angezeigt werden, klicken Sie in der Registerkarte <b>Start</b> auf das Symbol<div class = "icon icon-nonprintingcharacters"></div>.</p>
 			<p>Um einen Abschnittsumbruch zu entfernen, wählen Sie diesen mit der Maus aus und drücken Sie die Taste <b>ENTF</b>. Da ein Abschnittsumbruch die Formatierung des vorherigen Abschnitts definiert, wird durch das Löschen des Abschnittsumbruch auch die Formatierung des vorangegangenen Abschnitts entfernt. Ein solcher Abschnitt wird dann entsprechend der Formatierung des nachfolgenden Abschnitts formatiert.</p>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Gliederungsebene konfigurieren" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Legen Sie die Seitenparameter fest: Ändern Sie die Seitengröße/-ausrichtung, stellen Sie Seitenränder ein, fügen Sie Spalten ein" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,9 +18,9 @@
             <p>Um das Seitenlayout zu ändern im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a>, d. H. Seitenausrichtung und Seitengröße festzulegen, die Ränder anzupassen und Spalten einzufügen, verwenden Sie die entsprechenden Symbole auf der Registerkarte <b>Layout</b> der oberen Symbolleiste.</p>
             <p class="note"><b>Hinweis</b>: alle festgelegten Parameter werden auf das gesamte Dokument angewendet. Wie Sie für einzelnen Teile Ihres Dokuments unterschiedliche Seitenränder, Ausrichtungen, Größen oder Spaltenanzahlen festlegen, lesen Sie bitte auf <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">dieser Seite</a> nach.</p>
             <h3 id="orientation">Seitenausrichtung</h3>
-            <p>Die aktuelle Seitenausrichtung ändern Sie mit einem Klick auf das Symbol <img alt="Ausrichtung" src="../images/orientation.png" /> <b>Seitenausrichtung</b>. Die Standardeinstellung ist <b>Hochformat</b>. Diese kann auf das <b>Querformat</b> umgewechselt werden.</p>
+            <p>Die aktuelle Seitenausrichtung ändern Sie mit einem Klick auf das Symbol <div class = "icon icon-orientation"></div> <b>Seitenausrichtung</b>. Die Standardeinstellung ist <b>Hochformat</b>. Diese kann auf das <b>Querformat</b> umgewechselt werden.</p>
             <h3 id="size">Seitengröße</h3>
-            <p>Das A4-Standardformat ändern Sie, indem Sie das Symbol <img alt="Größe" src="../images/pagesize.png" /> <b>Größe</b> anklicken und das gewünschte Format aus der Liste auswählen. Die verfügbaren Formate sind:</p>
+            <p>Das A4-Standardformat ändern Sie, indem Sie das Symbol <div class = "icon icon-pagesize"></div> <b>Größe</b> anklicken und das gewünschte Format aus der Liste auswählen. Die verfügbaren Formate sind:</p>
             <ul>
                 <li>US Letter (21,59 cm x 27,94 cm)</li>
                 <li>US Legal (21,59 cm x 35,56 cm)</li>
@@ -38,31 +39,31 @@
             <p>Sie können die Seitengröße auch individuell festlegen, in dem Sie die Option <b>Benutzerdefinierte Seitengröße</b> aus der Liste auswählen. Das Fenster <b>Seitengröße</b> öffnet sich und Sie können die gewünschte <b>Voreinstellung</b> auswählen (US Letter, US Legal, A4, A5, B5, Umschlag #10, Umschlag DL, Tabloid, A3, Tabloid Übergröße, ROC 16K, Umschlag Choukei 3, Super B/A3, A0, A1, A2, A6) oder benutzerdefinierte Werte für <b>Breite</b> und <b>Höhe</b> festlegen. Geben Sie Ihre gewünschten Werte in die Eingabefelder ein oder passen Sie die vorhandenen Werte über die Pfeile an. Wenn Sie fertig sind, klicken Sie auf <b>OK</b>, um die Änderungen anzuwenden.</p>
             <p><img alt="Benutzerdefinierte Seitengröße" src="../images/custompagesize.png" /></p>
             <h3 id="margins">Seitenränder</h3>
-            <p>Ändern Sie die Standardränder, d.H. den Abstand zwischen den linken, rechten, oberen und unteren Seitenkanten und dem Absatztext, in dem Sie auf das Symbol <img alt="Ränder" src="../images/pagemargins.png" /> <b>Ränder</b> klicken und Sie eine der verfügbaren Voreinstellungen auswählen: <b>Normal</b>, <b>US Normal</b>, <b>Schmal</b>, <b>Mittel</b>, <b>Breit</b>. Sie können auch die Option <b>Benutzerdefinierte Seitenränder</b> verwenden, um Ihre eigenen Werte im geöffneten Fenster <b>Ränder</b> einzugeben. Geben Sie Ihre gewünschten Werte für die <b>Oberen</b>, <b>Unteren</b>, <b>Linken</b> und <b>Rechten</b> Seitenränder in die Eingabefelder ein oder passen Sie die vorhandenen Werte über die Pfeile an. Wenn Sie fertig sind, klicken Sie auf <b>OK</b>. Die benutzerdefinierten Ränder werden auf das aktuelle Dokument angewendet. In der Liste <img alt="Ränder" src="../images/pagemargins.png" /> <b>Ränder</b> wird die Option <b>letzte benutzerdefinierte Einstellung</b> mit den entsprechenden Parametern angezeigt, so dass Sie diese auf alle gewünschten anderen Dokumente anwenden können.</p>
+            <p>Ändern Sie die Standardränder, d.H. den Abstand zwischen den linken, rechten, oberen und unteren Seitenkanten und dem Absatztext, in dem Sie auf das Symbol <div class = "icon icon-pagemargins"></div> <b>Ränder</b> klicken und Sie eine der verfügbaren Voreinstellungen auswählen: <b>Normal</b>, <b>US Normal</b>, <b>Schmal</b>, <b>Mittel</b>, <b>Breit</b>. Sie können auch die Option <b>Benutzerdefinierte Seitenränder</b> verwenden, um Ihre eigenen Werte im geöffneten Fenster <b>Ränder</b> einzugeben. Geben Sie Ihre gewünschten Werte für die <b>Oberen</b>, <b>Unteren</b>, <b>Linken</b> und <b>Rechten</b> Seitenränder in die Eingabefelder ein oder passen Sie die vorhandenen Werte über die Pfeile an. Wenn Sie fertig sind, klicken Sie auf <b>OK</b>. Die benutzerdefinierten Ränder werden auf das aktuelle Dokument angewendet. In der Liste <div class = "icon icon-pagemargins"></div> <b>Ränder</b> wird die Option <b>letzte benutzerdefinierte Einstellung</b> mit den entsprechenden Parametern angezeigt, so dass Sie diese auf alle gewünschten anderen Dokumente anwenden können.</p>
             <p><img alt="Benutzerdefinierte Seitenränder" src="../images/custommargins.png" /></p>
             <p><b>Gutterposition</b> wird benutzt um zusätzlichen Raum auf der linken oder oberen Seite des Dokumentes zu erstellen. Die Gutteroption kann sehr hilfreich sein um beim Buchbinden zu vermeiden das der Text überlegt wird. Im Fenster fuer <b>Ränder</b> geben Sie die notwendige Gutterposition in die Eingabefelder ein und wählen Sie aus wo diese plaziert werden sollen.</p>
             <p class="note"><b>Hinweis</b>: Die Gutterpositionfunktion kann nicht benutzt werden, wenn die Option Spiegelränder angeschaltet ist.</p>
             <p>In der Auswahl <b>‘Meherer Seiten’</b>, wählen Sie die <b>Spiegelränderoption</b> aus, um die gegenüberliegenden Seiten eines doppelseitigen Dokumentes anzustellen. Mit dieser Option ausgewählt, <b>Linke</b> und <b>Rechte</b> Ränder wechseln zu <b>Inneren</b> und <b>Äusseren</b> Rändern.</p>
             <p>In der Auswahl <b>‘Orientierung’</b> wählen Sie zwischen <b>Hoch-</b> oder <b>Querformat</b> aus.</p>
             <p>Alle angewendeten Änderungen werden in dem <b>Vorschaufenster</b> angezeigt.</p>
-            <p>Wenn Sie fertig sind, selektieren Sie <b>OK</b>. Die Benutzerdefinierten Ränder werden auf das aktuelle Dokument angewendet die <b>‘letzte Spezial’</b>-Option mit den erstellten Parametern wird in der <b>Ränderliste</b> <img alt="Ränder" src="../images/pagemargins.png" /> angezeigt, so das diese auch für andere Dokumente verwendet werden kann.</p>
+            <p>Wenn Sie fertig sind, selektieren Sie <b>OK</b>. Die Benutzerdefinierten Ränder werden auf das aktuelle Dokument angewendet die <b>‘letzte Spezial’</b>-Option mit den erstellten Parametern wird in der <b>Ränderliste</b> <div class = "icon icon-pagemargins"></div> angezeigt, so das diese auch für andere Dokumente verwendet werden kann.</p>
             <p>Sie können die Seitenränder auch manuell ändern, indem Sie die Ränder zwischen den grauen und weißen Bereichen der Lineale verschieben (die grauen Bereiche der Lineale weisen auf Seitenränder hin):</p>
-            <p><img alt="Seitenränder anpassen" src="../images/margins.png" /></p>
+            <p><div class = "big big-margins"></div></p>
             <h3 id="columns">Spalten</h3>
-            <p>Sie können Ihren Text in zwei oder mehr Spalten aufteilen, klicken Sie dazu auf das Symbol <img alt="Spalten" src="../images/insertcolumns.png" /> <b>Spalten</b> und wählen Sie die gewünschte Spaltenzahl aus der Liste aus. Folgende Optionen stehen zur Verfügung:</p>
+            <p>Sie können Ihren Text in zwei oder mehr Spalten aufteilen, klicken Sie dazu auf das Symbol <div class = "icon icon-insertcolumns"></div> <b>Spalten</b> und wählen Sie die gewünschte Spaltenzahl aus der Liste aus. Folgende Optionen stehen zur Verfügung:</p>
             <ul>
-                <li><b>Zwei</b> <img alt="Zwei Spalten" src="../images/twocolumns.png" /> - Zwei Spalten mit der gleichen Breite hinzufügen.</li>
-                <li><b>Drei</b> <img alt="Drei Spalten" src="../images/threecolumns.png" /> - Drei Spalten mit der gleichen Breite hinzufügen.</li>
-                <li><b>Links</b> <img alt="Spalte links" src="../images/leftcolumn.png" /> - zwei Spalten hinzufügen: eine schmale auf der linken Seite und eine breite auf der rechten.</li>
-                <li><b>Rechts</b> <img alt="Spalte rechts" src="../images/rightcolumn.png" /> - zwei Spalten hinzufügen: eine schmale auf der rechten Seite und eine breite auf der linken.</li>
+                <li><b>Zwei</b> <div class = "icon icon-twocolumns"></div> - Zwei Spalten mit der gleichen Breite hinzufügen.</li>
+                <li><b>Drei</b> <div class = "icon icon-threecolumns"></div> - Drei Spalten mit der gleichen Breite hinzufügen.</li>
+                <li><b>Links</b> <div class = "icon icon-leftcolumn"></div> - zwei Spalten hinzufügen: eine schmale auf der linken Seite und eine breite auf der rechten.</li>
+                <li><b>Rechts</b> <div class = "icon icon-rightcolumn"></div> - zwei Spalten hinzufügen: eine schmale auf der rechten Seite und eine breite auf der linken.</li>
             </ul>
             <p>Wenn Sie die Spalteneinstellungen anpassen wollen, wählen Sie die Option <b>Benutzerdefinierte Spalten</b> aus der Liste aus. Das Fenster <b>Spalten</b> öffnet sich und Sie können die gewünschte <b>Spaltenanzahl</b> und den <b>Abstand zwischen den Spalten</b> festlegen (es ist möglich bis zu 12 Spalten einzufügen). Geben Sie Ihre gewünschten Werte in die Eingabefelder ein oder passen Sie die vorhandenen Werte über die Pfeile an. Aktivieren Sie das Kontrollkästchen <b>Spaltentrennung</b>, um eine vertikale Linie zwischen den Spalten einzufügen. Wenn Sie fertig sind, klicken Sie auf <b>OK</b>, um die Änderungen anzuwenden.</p>
             <p><img alt="Benutzerdefinierte Spalten" src="../images/customcolumns.png" /></p>
-            <p>Wenn Sie genau festlegen wollen, wo eine neue Spalte beginnt, positionieren Sie den Zeiger vor dem Text, den Sie in eine neue Spalte verschieben wollen, klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Umbrüche" src="../images/pagebreak1.png" /> <b>Umbrüche</b> und wählen Sie die Option <b>Spaltenumbruch einfügen</b>. Der Text wird in die nächste Spalte verschoben.</p>
-            <p>Spaltenumbrüche werden in Ihrem Dokument durch eine gepunktete Linie angezeigt: <img alt="Spaltenumbruch" src="../images/columnbreak.png" />. Wenn die eingefügten Spaltenumbrüche nicht angezeigt werden, klicken Sie in der Registerkarte <b>Start</b> auf das Symbol<img alt="Formatierungssymbole" src="../images/nonprintingcharacters.png" />. Um einen Spaltenumbruch zu entfernen, wählen Sie diesen mit der Maus aus und drücken Sie die Taste <b>ENTF</b>.</p>
+            <p>Wenn Sie genau festlegen wollen, wo eine neue Spalte beginnt, positionieren Sie den Zeiger vor dem Text, den Sie in eine neue Spalte verschieben wollen, klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-pagebreak1"></div> <b>Umbrüche</b> und wählen Sie die Option <b>Spaltenumbruch einfügen</b>. Der Text wird in die nächste Spalte verschoben.</p>
+            <p>Spaltenumbrüche werden in Ihrem Dokument durch eine gepunktete Linie angezeigt: <div class = "big big-columnbreak"></div>. Wenn die eingefügten Spaltenumbrüche nicht angezeigt werden, klicken Sie in der Registerkarte <b>Start</b> auf das Symbol<div class = "icon icon-nonprintingcharacters"></div>. Um einen Spaltenumbruch zu entfernen, wählen Sie diesen mit der Maus aus und drücken Sie die Taste <b>ENTF</b>.</p>
             <p>Um die Spaltenbreite und den Abstand manuell zu ändern, können Sie das horizontale Lineal verwenden.</p>
-            <p><img alt="Spaltenabstand" src="../images/columnspacing.png" /></p>
-            <p>Um Spalten zu entfernen und zu einem normalen einspaltigen Layout zurückzukehren, klicken Sie in der oberen Symbolleiste auf das Symbol <img alt="Spalten" src="../images/insertcolumns.png" /> <b>Spalten</b> und wählen Sie die Option <b>Eine</b> <img alt="Eine Spalte" src="../images/onecolumn.png" /> aus der angezeigten Liste aus.</p>
+            <p><div class = "big big-columnspacing"></div></p>
+            <p>Um Spalten zu entfernen und zu einem normalen einspaltigen Layout zurückzukehren, klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-insertcolumns"></div> <b>Spalten</b> und wählen Sie die Option <b>Eine</b> <div class = "icon icon-onecolumn"></div> aus der angezeigten Liste aus.</p>
         </div>
 	</body>
 </html>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Set tab stops" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -17,13 +18,13 @@
 			<p>Es ist möglich die Tabstopps im <a target="_blank" href="https://www.onlyoffice.com/de/document-editor.aspx" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> zu verändern, d.h., zu ändern, an welche Position die Schreibmarke vorrückt, wenn Sie die <b>Tabulatortaste</b> auf Ihrer Tastatur drücken.</p>
 			<p>Um die Tabstopps festzulegen, können Sie das horizontale Lineal nutzen:</p>
 			<ol>
-			    <li>Klicken Sie zum Auswählen des gewünschten Tabstopps auf das Symbol <img alt="Linksbündiger Tabstopp" src="../images/tabstopleft.png" /> in der oberen linken Ecke des Arbeitsbereichs. Folgende Tabstopparten sind verfügbar:<ul>
-			            <li><b>Linksbündig</b> <img alt="Linksbündiger Tabstopp" src="../images/tabstopleft.png" /> - der Text wird ab der Position des Tabstopps linksbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach rechts. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <img alt="Markierung linksbündiger Tabstopp" src="../images/tabstopleft_marker.png" /> angezeigt.</li>
-			            <li><b>Zentriert</b> <img alt="Zentrierter Tabstopp" src="../images/tabstopcenter.png" /> - der Text wird an der Tabstoppposition zentriert. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <img alt="Markierung zentrierter Tabstopp" src="../images/tabstopcenter_marker.png" /> angezeigt.</li>
-			            <li><b>Rechtsbündig</b> <img alt="Rechtsbündiger Tabstopp" src="../images/tabstopright.png" /> - der Text wird ab der Position des Tabstopps rechtsbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach links, also rückwärts. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <img alt="Markierung rechtsbündiger Tabstopp" src="../images/tabstopright_marker.png" /> angezeigt.</li>
+			    <li>Klicken Sie zum Auswählen des gewünschten Tabstopps auf das Symbol <div class = "icon icon-tabstopleft"></div> in der oberen linken Ecke des Arbeitsbereichs. Folgende Tabstopparten sind verfügbar:<ul>
+			            <li><b>Linksbündig</b> <div class = "icon icon-tabstopleft"></div> - der Text wird ab der Position des Tabstopps linksbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach rechts. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <div class = "icon icon-tabstopleft_marker"></div> angezeigt.</li>
+			            <li><b>Zentriert</b> <div class = "icon icon-tabstopcenter"></div> - der Text wird an der Tabstoppposition zentriert. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <div class = "icon icon-tabstopcenter_marker"></div> angezeigt.</li>
+			            <li><b>Rechtsbündig</b> <div class = "icon icon-tabstopright"></div> - der Text wird ab der Position des Tabstopps rechtsbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach links, also rückwärts. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <div class = "icon icon-tabstopright_marker"></div> angezeigt.</li>
 			        </ul>
 			    </li>
-			    <li>Klicken Sie an der unteren Kante des Lineals auf die Position, an der Sie einen Tabstopp setzen möchten. Ziehen Sie die Markierung nach links oder rechts, um die Position zu ändern. Um den hinzugefügten Tabstopp zu entfernen, ziehen Sie die Markierung aus dem Lineal.<p><img alt="Horizontales Lineal mit den hinzugefügten Tabstopps" src="../images/tabstops_ruler.png" /></p>
+			    <li>Klicken Sie an der unteren Kante des Lineals auf die Position, an der Sie einen Tabstopp setzen möchten. Ziehen Sie die Markierung nach links oder rechts, um die Position zu ändern. Um den hinzugefügten Tabstopp zu entfernen, ziehen Sie die Markierung aus dem Lineal.<p><div class = "big big-tabstops_ruler"></div></p>
 			    </li>			
 			</ol>
 			<hr />

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Sprach-Plugins für ONLYOFFICE Editoren, mit dem der geschriebene Text laut vorgelesen werden kann" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -17,7 +18,7 @@
         <p>ONLYOFFICE <a href="https://www.onlyoffice.com/de/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> hat ein Plugin, das den Text für Sie vorlesen kann.</p>
         <ol>
             <li>Wählen Sie den vorzulesenden Text aus.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Rede Plugin - Symbol" src="../images/speech.png" /> <b>Rede</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-speech"></div> <b>Rede</b> aus.</li>
         </ol>
         <p>Der Text wird nun vorgelesen.</p>
     </div>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Thesaurus-Plugins für ONLYOFFICE Editoren, mit der Sie Synonyme finden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -20,7 +21,7 @@
         </p>
         <ol>
             <li>Wählen Sie das Wort in Ihrem Dokument aus.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Thesaurus Plugin - Symbol" src="../images/thesaurus_icon.png" /> <b>Thesaurus</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-thesaurus_icon"></div> <b>Thesaurus</b> aus.</li>
             <li>Die Synonyme und Antonyme werden in der linken Seitenleiste angezeigt.</li>
             <li>Klicken Sie auf ein Wort, um das Wort in Ihrem Dokument zu ersetzen.</li>
         </ol>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Übersetzer-Plugins für ONLYOFFICE Editoren, mit dem Text in verschiedene Sprachen übersetzt werden kann" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -17,7 +18,7 @@
         <p>Sie können Ihr Dokument im <a href="https://www.onlyoffice.com/de/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Dokumenteneditor</b></a> in zahlreiche Sprachen übersetzen.</p>
         <ol>
             <li>Wählen Sie den Text aus, den Sie übersetzen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Übersetzer Plugin - Symbol" src="../images/translator.png" /> <b>Übersetzer</b> aus. Der Übersetzer wird in einer Seitenleiste links angezeigt.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-translator"></div> <b>Übersetzer</b> aus. Der Übersetzer wird in einer Seitenleiste links angezeigt.</li>
             <li>Klicken Sie auf das Drop-Down-Menü und wählen Sie die bevorzugte Sprache aus.</li>
         </ol>
         <p>Der Text wird in die gewünschte Sprache übersetzt.</p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Use Mail Merge to create a lot of personalized letters and send them to recipients" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -21,7 +22,7 @@
                 <li><b>Erstellen Sie ein Datenquelle und laden Sie diese in das Hauptdokument.</b><ol>
                     <li>Bei einer für den Seriendruck verwendeten Datenquelle muss es sich um eine <b>.xlsx</b>-Tabelle handeln, die in Ihrem Portal gespeichert ist. Öffnen Sie eine vorhandene Tabelle oder erstellen Sie eine neue und stellen Sie sicher, dass diese die folgenden Anforderungen erfüllt:<p>Die Tabelle muss eine Kopfzeile mit Spaltentiteln enthalten, da Werte in der ersten Zelle jeder Spalte die Felder für die Zusammenführung bestimmen (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 (einem Satz von Werten, der zu einem bestimmten Empfänger gehört). Während der Zusammenführung 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.</p>
                     </li>
-                    <li>Öffnen Sie ein vorhandenes Dokument oder erstellen Sie ein neues. Dieses Dokument muss den Haupttext enthalten, der für jede Version des Seriendruckdokuments identisch ist. Klicken Sie auf das Symbol <b>Seriendruck</b> <img alt="Seriendruck" src="../images/mailmergeicon.png" /> auf der oberen Symbolleiste, in der Registerkarte <b>Start</b>.</li>
+                    <li>Öffnen Sie ein vorhandenes Dokument oder erstellen Sie ein neues. Dieses Dokument muss den Haupttext enthalten, der für jede Version des Seriendruckdokuments identisch ist. Klicken Sie auf das Symbol <b>Seriendruck</b> <div class = "icon icon-mailmergeicon"></div> auf der oberen Symbolleiste, in der Registerkarte <b>Start</b>.</li>
                     <li>Das Fenster <b>Datenquelle auswählen</b> wird geöffnet. Es wird eine Liste all Ihrer <b>.xlsx</b>-Tabellen angezeigt, die im Abschnitt <b>Meine Dokumente</b> gespeichert sind. Um zwischen anderen <b>Modulabschnitten</b> zu wechseln, verwenden Sie das Menü im linken Teil des Fensters. Wählen Sie die gewünschte Datei aus und klicken Sie auf <b>OK</b>.</li>
                 </ol>
                 <p>Sobald die Datenquelle geladen ist, wird die Registerkarte <b>Einstellungen für das Zusammenführen</b> in der rechten Seitenleiste angezeigt.</p>
@@ -31,13 +32,13 @@
                     <li>Klicken Sie in der rechten Seitenleiste auf die Schaltfläche <b>Empfängerliste bearbeiten</b>, um das Fenster <b>Empfänger Seriendruck</b> zu öffnen, in dem der Inhalt der ausgewählten Datenquelle angezeigt wird.<p><img alt="Fenster Empfänger Seriendruck" src="../images/mailmergerecipients.png" /></p>
                     </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><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>
+                        <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><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>
+                        <li><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/de/UsageInstructions/ViewDocInfo.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="View document title, author, location, creation date, persons with the rights to view or edit the document, and statistics" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -29,7 +30,7 @@
                     <h3>Versionsverlauf</h3>
                     <p>In der <em>Online-Version</em> können Sie den Versionsverlauf für die in der Cloud gespeicherten Dateien einsehen.</p>
                     <p class="note">Diese Option steht im <b>schreibgeschützten</b> Modus nicht zur Verfügung.</p>
-                    <p>Um alle Änderungen an diesem Dokument anzuzeigen, wählen Sie die Option <b>Versionsverlauf</b> in der linken Seitenleiste. Sie können den Versionsverlauf auch über das Symbol <img alt="Versionsverlauf" src="../images/versionhistoryicon.png" /> <b>Versionsverlauf</b> in der Registerkarte <b>Zusammenarbeit</b> öffnen. Sie sehen eine Liste mit allen Dokumentversionen (Hauptänderungen) und Revisionen (geringfügige Änderungen), unter Angabe aller jeweiligen Autoren sowie Erstellungsdatum und -zeit. Für Dokumentversionen wird auch die Versionsnummer angegeben (z.B. <em>Ver. 2</em>). Für eine detaillierte Anzeige der jeweiligen Änderungen in jeder einzelnen Version/Revision können Sie die gewünschte Version anzeigen, indem Sie in der linken Seitenleiste darauf klicken. Die vom Autor der Version/Revision vorgenommenen Änderungen sind mit der Farbe markiert, die neben dem Autorennamen in der linken Seitenleiste angezeigt wird. Über den unterhalb der gewählten Version/Revision angezeigten Link <b>Wiederherstellen</b> gelangen Sie in die jeweilige Version. <!--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>Um alle Änderungen an diesem Dokument anzuzeigen, wählen Sie die Option <b>Versionsverlauf</b> in der linken Seitenleiste. Sie können den Versionsverlauf auch über das Symbol <div class = "icon icon-versionhistoryicon"></div> <b>Versionsverlauf</b> in der Registerkarte <b>Zusammenarbeit</b> öffnen. Sie sehen eine Liste mit allen Dokumentversionen (Hauptänderungen) und Revisionen (geringfügige Änderungen), unter Angabe aller jeweiligen Autoren sowie Erstellungsdatum und -zeit. Für Dokumentversionen wird auch die Versionsnummer angegeben (z.B. <em>Ver. 2</em>). Für eine detaillierte Anzeige der jeweiligen Änderungen in jeder einzelnen Version/Revision können Sie die gewünschte Version anzeigen, indem Sie in der linken Seitenleiste darauf klicken. Die vom Autor der Version/Revision vorgenommenen Änderungen sind mit der Farbe markiert, die neben dem Autorennamen in der linken Seitenleiste angezeigt wird. Über den unterhalb der gewählten Version/Revision angezeigten Link <b>Wiederherstellen</b> gelangen Sie in die jeweilige Version. <!--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="Versionsverlauf" src="../images/versionhistory.png" /></p>
                     <p>Um zur aktuellen Version des Dokuments zurückzukehren, klicken Sie oben in der Liste mit Versionen auf <b>Verlauf schließen</b>.</p>
                 </div>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des Wortzähler-Plugins für ONLYOFFICE-Editoren, mit dem Wörter, Symbole und Absätze des Textes gezählt werden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des WordPress-Plugins für ONLYOFFICE Editoren, mit dem Dokumente als WordPress-Artikel hochgeladen werden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -19,7 +20,7 @@
         <h2>Mit WordPress verbinden</h2>
         <ol>
             <li>Öffnen Sie Ihr Dokument.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="WordPress Plugin Symbol" src="../images/wordpress.png" /> <b>WordPress</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-wordpress"></div> <b>WordPress</b> aus.</li>
             <li>Melden Sie sich in Ihrem WordPress-Konto an und wählen Sie die Seite aus, auf der Sie Ihr Dokument veröffentlichen möchten.</li>
             <li>Geben Sie den Titel des Artikels ein.</li>
             <li>Klicken Sie auf <b>Veröffentlichen</b>, um sofort zu veröffentlichen, oder auf <b>Als Entwurf speichern</b>, um später von Ihrer WordPress-Seite oder -Anwendung zu veröffentlichen.</li>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Die Beschreibung des YouTube-Plugins für ONLYOFFICE Editoren, mit dem Videos in Dokumente eingebettet werden können" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -21,7 +22,7 @@
                 (die vollständige Adresse wird in der Adresszeile Ihres Browsers angezeigt)
             </li>
             <li>Gehen Sie zu Ihrem Dokument und platzieren Sie den Cursor an der Stelle, an der Sie das Video einfügen möchten.</li>
-            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <img alt="Youtube Plugin - Symbol" src="../images/youtube.png" /> <b>YouTube</b> aus.</li>
+            <li>Öffnen Sie die Registerkarte <b>Plugins</b> und wählen Sie den Menüpunkt <div class = "icon icon-youtube"></div> <b>YouTube</b> aus.</li>
             <li>Fügen Sie die URL ein und klicken Sie auf <b>OK</b>.</li>
             <li>Überprüfen Sie, ob Sie das richtige Video eingefügt haben, und klicken Sie auf die Schaltfläche <b>OK</b> unter dem Video.</li>
         </ol>

apps/documenteditor/main/resources/help/de/search/search.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
     <head>
         <title>Suchergebnisse</title>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The short description of Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -18,7 +19,7 @@
 			and edit documents<span class="onlineDocumentFeatures"> directly in your browser</span>.</p>
 			<p>Using the <b>Document Editor</b>, you can perform various editing operations like in any desktop editor, 
 			print the edited documents keeping all the formatting details or download them onto your computer hard disk drive of your computer as DOCX, PDF, ODT, TXT, DOTX, PDF/A, OTT, RTF, HTML, FB2, EPUB, DOCXF and OFORM files.</p>
-			<p><span class="onlineDocumentFeatures">To view the current software version and licensor details in the <em>online version</em>, click the <img alt="About icon" src="../images/about.png" /> icon on the left sidebar.</span> <span class="desktopDocumentFeatures"> To view the current software version and licensor details in the <em>desktop version</em> for Windows, select the <b>About</b> menu item on the left sidebar of the main program window. In the <em>desktop version</em> for Mac OS, open the <b>ONLYOFFICE</b> menu at the top of the screen and select the <b>About ONLYOFFICE</b> menu item.</span></p>
+			<p><span class="onlineDocumentFeatures">To view the current software version and licensor details in the <em>online version</em>, click the <div class = "icon icon-about"></div> icon on the left sidebar.</span> <span class="desktopDocumentFeatures"> To view the current software version and licensor details in the <em>desktop version</em> for Windows, select the <b>About</b> menu item on the left sidebar of the main program window. In the <em>desktop version</em> for Mac OS, open the <b>ONLYOFFICE</b> menu at the top of the screen and select the <b>About ONLYOFFICE</b> menu item.</span></p>
 		</div>
 	</body>
 </html>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The advanced settings of Document Editor" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -14,13 +15,13 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
         <h1>Advanced Settings of the Document Editor</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 change its advanced settings. To access them, open the <b>File</b> tab on the top toolbar and select the <b>Advanced Settings...</b> option. You can also click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon on the right side of the editor header and select the <b>Advanced settings</b> option.</p>
+        <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 change its advanced settings. To access them, open the <b>File</b> tab on the top toolbar and select the <b>Advanced Settings...</b> option. You can also click the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> icon on the right side of the editor header and select the <b>Advanced settings</b> option.</p>
         <p>The advanced settings are:</p>
         <ul>
             <li><b>Commenting Display</b> is used to turn on/off the live commenting option: 
             <ul>
-                <li><b>Turn on display of the comments</b> - if you disable this feature, the commented passages will be highlighted only if you click the <b>Comments</b> <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar.</li>
-                <li><b>Turn on display of the resolved comments</b> - this feature is disabled by default so that the resolved comments were hidden in the document text. You can view such comments only if you click the <b>Comments</b> <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar. Enable this option if you want to display resolved comments in the document text.</li>
+                <li><b>Turn on display of the comments</b> - if you disable this feature, the commented passages will be highlighted only if you click the <b>Comments</b> <div class = "icon icon-commentsicon"></div> icon on the left sidebar.</li>
+                <li><b>Turn on display of the resolved comments</b> - this feature is disabled by default so that the resolved comments were hidden in the document text. You can view such comments only if you click the <b>Comments</b> <div class = "icon icon-commentsicon"></div> icon on the left sidebar. Enable this option if you want to display resolved comments in the document text.</li>
             </ul>
             </li>
             <li><b>Track Changes Display</b> is used to select an option for displaying changes:
@@ -38,7 +39,7 @@
             <li class="onlineDocumentFeatures"><b>Co-editing Mode</b> is used to select the display of the changes made during the co-editing:
                 <ul>
                     <li>By default the <b>Fast</b> mode is selected, the users who take part in the document co-editing will see the changes in real time once they are made by other users.</li>
-                    <li>If you prefer not to see other user changes (so that they do not disturb you, or for some other reason), select the <b>Strict</b> mode and all the changes will be shown only after you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon notifying you that there are changes from other users.</li>
+                    <li>If you prefer not to see other user changes (so that they do not disturb you, or for some other reason), select the <b>Strict</b> mode and all the changes will be shown only after you click the <b>Save</b> <div class = "icon icon-saveupdate"></div> icon notifying you that there are changes from other users.</li>
                 </ul>
             </li>
             <li class="onlineDocumentFeatures">
@@ -46,7 +47,7 @@
                 <ul>
                     <li>Selecting the <b>View None</b> option, changes made during the current session will not be highlighted.</li>
                     <li>Selecting the <b>View All</b> option, all the changes made during the current session will be highlighted.</li>
-                    <li>Selecting the <b>View Last</b> option, only the changes made since you last time clicked the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted. This option is only available when the <b>Strict</b> co-editing mode is selected.</li>
+                    <li>Selecting the <b>View Last</b> option, only the changes made since you last time clicked the <b>Save</b> <div class = "icon icon-saveupdate"></div> icon will be highlighted. This option is only available when the <b>Strict</b> co-editing mode is selected.</li>
                 </ul>
             </li>
             <li><b>Interface theme</b> is used to change the color scheme of the editor’s interface.

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Tips on collaborative editing" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -31,18 +32,18 @@
             <p>The <b>Document Editor</b> allows you to select one of the two available co-editing modes:</p>
             <ul>
                 <li><b>Fast</b> is used by default and shows the changes made by other users in real time.</li>
-                <li><b>Strict</b> is selected to hide changes made by other users until you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon to save your own changes and accept the changes made by co-authors.</li>
+                <li><b>Strict</b> is selected to hide changes made by other users until you click the <b>Save</b> <div class = "icon icon-saveupdate"></div> icon to save your own changes and accept the changes made by co-authors.</li>
             </ul>
-            <p>The mode 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 mode 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 class="note">
                 <b>Note</b>: when you co-edit a document in the <b>Fast</b> mode, the possibility to <b>Redo</b> the last undone operation is not available.
             </p>
             <p>When a document is being edited by several users simultaneously in the <b>Strict</b> mode, the edited text passages are marked with dashed lines of different colors. 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. The <b>Fast</b> mode will show the actions and the names of the co-editors when they are editing the text.</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>When no users are viewing or editing the file, the icon in the editor header will look like <img alt="Manage document access rights icon" src="../images/access_rights.png" /> allowing you to manage the users who have access to the file right from the document: invite new users giving them permissions to <em>edit</em>, <em>read</em>, <em>comment</em>, <em>fill forms</em> or <em>review</em> the document, or <em>deny</em> some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <img alt="Number of users icon" src="../images/usersnumber.png" />. It's also possible to set access rights using the <img alt="Sharing icon" src="../images/sharingicon.png" /> <b>Sharing</b> icon at the <b>Collaboration</b> tab of the top toolbar.</p>
-            <p>As soon as one of the users saves his/her 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>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 between <b>none</b>, <b>all</b> and <b>last</b> real-time collaboration changes. Selecting <b>View all</b> changes, all the changes made during the current session will be highlighted. Selecting <b>View last</b> changes, only the changes made since you last time clicked the <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted. Selecting <b>View None</b> changes, changes made during the current session will not be highlighted.</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>
+            <p>When no users are viewing or editing the file, the icon in the editor header will look like <div class = "icon icon-access_rights"></div> allowing you to manage the users who have access to the file right from the document: invite new users giving them permissions to <em>edit</em>, <em>read</em>, <em>comment</em>, <em>fill forms</em> or <em>review</em> the document, or <em>deny</em> some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <div class = "icon icon-usersnumber"></div>. It's also possible to set access rights using the <div class = "icon icon-sharingicon"></div> <b>Sharing</b> icon at the <b>Collaboration</b> tab of the top toolbar.</p>
+            <p>As soon as one of the users saves his/her 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 between <b>none</b>, <b>all</b> and <b>last</b> real-time collaboration changes. Selecting <b>View all</b> changes, all the changes made during the current session will be highlighted. Selecting <b>View last</b> changes, only the changes made since you last time clicked the <div class = "icon icon-saveupdate"></div> icon will be highlighted. Selecting <b>View None</b> changes, changes made during the current session will not be highlighted.</p>
             <h3>Anonymous</h3>
             <p>Portal users who are not registered and do not have a profile are considered to be anonymous, although they still can collaborate on documents. To have a name assigned to them, the anonymous user should enter a name they prefer in the corresponding field appearing in the right top corner of the screen when they open the document for the first time. Activate the “Don’t ask me again” checkbox to preserve the name.</p>
             <p><img alt="anonymous collaboration" src="../images/anonymous_collab.png" /></p>
@@ -52,14 +53,14 @@
             <p>To access the chat 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>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>
                 <h3 id="comments">Comments</h3>
         <p>It's possible to work with comments in the offline mode, without connecting to the <em>online version</em>.</p>
@@ -67,19 +68,19 @@
         <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 he/she has 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>The text passage you commented will be highlighted in the document. To view the comment, just click within the passage. If you need to disable this feature, click the <b>File</b> tab at the top toolbar, select the <b>Advanced Settings...</b> option and uncheck the <b>Turn on display of the comments</b> box. In this case the commented passages will be highlighted only if you click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon.</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>
+        <p>The text passage you commented will be highlighted in the document. To view the comment, just click within the passage. If you need to disable this feature, click the <b>File</b> tab at the top toolbar, select the <b>Advanced Settings...</b> option and uncheck the <b>Turn on display of the comments</b> box. In this case the commented passages will be highlighted only if you click the <div class = "icon icon-commentsicon"></div> icon.</p>
         <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: 
+            <li>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>
@@ -88,9 +89,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/review_delete.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-review_delete"></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>
         <h4>Adding mentions</h4>
@@ -100,7 +101,7 @@
         <p>The mentioned user will receive an email notification that he/she has been mentioned in a comment. If the file has been shared, the user will also receive a corresponding notification.</p>
         <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>
                 <li><b>Remove Current Comments</b> - to remove the currently selected comment. If some replies have been added to the comment, all its replies will be removed as well.</li>
@@ -109,7 +110,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/Comparison.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Instructions on how to compare and merge two documents" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -21,7 +22,7 @@
         <h3 id="choosedocument">Choose a document for comparison</h3>
         <p>To compare two documents, open the original document that you need to compare and select the second document for comparison:</p>
         <ol>
-            <li>switch to the <b>Collaboration</b> tab on the top toolbar and press the <img alt="Compare button" src="../images/comparebutton.png" /> <b>Compare</b> button,</li>
+            <li>switch to the <b>Collaboration</b> tab on the top toolbar and press the <div class = "icon icon-comparebutton"></div> <b>Compare</b> button,</li>
             <li>
                 select one of the following options to load the document:
                 <ul>
@@ -37,7 +38,7 @@
         <p>When the second document for comparison is selected, the comparison process will start and the document will look as if it was opened in the <b>Review</b> mode. All the changes are highlighted with a color, and you can view the changes, navigate between them, accept or reject them one by one or all the changes at once. It's also possible to change the display mode and see how the document looks before comparison, in the process of comparison, or how it will look after comparison if you accept all changes.</p>
 
         <h3 id="displaymode">Choose the changes display mode</h3>
-        <p>Click the <img alt="Display Mode button" src="../images/review_displaymode.png" /> <b>Display Mode</b> button on the top toolbar and select one of the available modes from the list:</p>
+        <p>Click the <div class = "icon icon-review_displaymode"></div> <b>Display Mode</b> button on the top toolbar and select one of the available modes from the list:</p>
         <ul>
             <li>
                 <b>Markup</b> - this option is selected by default. It is used to display the document <b>in the process of comparison</b>. This mode allows both viewing the changes and editing the document.
@@ -54,21 +55,21 @@
         </ul>
 
         <h3 id="managechanges">Accept or reject changes</h3>
-        <p>Use the <img alt="To Previous Change button" src="../images/review_previous.png" /> <b>Previous</b> and the <img alt="To Next Change button" src="../images/review_next.png" /> <b>Next</b> buttons on the top toolbar to navigate through the changes.</p>
+        <p>Use the <div class = "icon icon-review_previous"></div> <b>Previous</b> and the <div class = "icon icon-review_next"></div> <b>Next</b> buttons on the top toolbar to navigate through the changes.</p>
         <p>To accept the currently selected change, you can:</p>
         <ul>
-            <li>click the <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Accept</b> button on the top toolbar, or</li>
+            <li>click the <div class = "icon icon-review_accepttoptoolbar"></div> <b>Accept</b> button on the top toolbar, or</li>
             <li>click the downward arrow below the <b>Accept</b> button and select the <b>Accept Current Change</b> option (in this case, the change will be accepted and you will proceed to the next change), or</li>
-            <li>click the <b>Accept</b> <img alt="Accept button" src="../images/review_accept.png" /> button of the change pop-up window.</li>
+            <li>click the <b>Accept</b> <div class = "icon icon-review_accept"></div> button of the change pop-up window.</li>
         </ul>
-        <p>To quickly accept all the changes, click the downward arrow below the <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Accept</b> button and select the <b>Accept All Changes</b> option.</p>
+        <p>To quickly accept all the changes, click the downward arrow below the <div class = "icon icon-review_accepttoptoolbar"></div> <b>Accept</b> button and select the <b>Accept All Changes</b> option.</p>
         <p>To reject the current change you can:</p>
         <ul>
-            <li>click the <img alt="Reject button" src="../images/review_rejecttoptoolbar.png" /> <b>Reject</b> button on the top toolbar, or</li>
+            <li>click the <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Reject</b> button on the top toolbar, or</li>
             <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> <img alt="Reject button" src="../images/review_reject.png" /> button of the change pop-up window.</li>
+            <li>click the <b>Reject</b> <div class = "icon icon-review_reject"></div> button of the change pop-up window.</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>
 
         <h3 id="comparisonnotes">Additional info on the comparison feature</h3>
         <h5>Method of comparison</h5>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The keyboard shortcut list used for a faster and easier access to the features of Document Editor using the keyboard." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
         <script type="text/javascript" src="../search/js/jquery.min.js"></script>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of view settings and navigation tools such as zoom, previous/next page buttons" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,12 +17,12 @@
 		<h1>View Settings and Navigation Tools</h1>
 			<p>The <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> offers several tools to help you view and navigate through your document: zoom, page number indicator etc.</p>
 			<h3>Adjust the View Settings</h3>
-			<p>To adjust default view settings and set the most convenient mode to work with the document, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon on the right side of the editor header and select which interface elements you want to be hidden or shown.
+			<p>To adjust default view settings and set the most convenient mode to work with the document, click the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> icon on the right side of the editor header and select which interface elements you want to be hidden or shown.
 			You can select the following options from the <b>View settings</b> drop-down list:
 			</p>
 			<ul>
 				<li>
-					<b>Hide Toolbar</b> -  hides the top toolbar that contains commands while tabs remain visible. When this option is enabled, you can click any tab to display the toolbar. The toolbar is displayed until you click anywhere outside it.<br />To disable this mode, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon and click the <b>Hide Toolbar</b> option once again. The top toolbar will be displayed all the time.
+					<b>Hide Toolbar</b> -  hides the top toolbar that contains commands while tabs remain visible. When this option is enabled, you can click any tab to display the toolbar. The toolbar is displayed until you click anywhere outside it.<br />To disable this mode, click the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> icon and click the <b>Hide Toolbar</b> option once again. The top toolbar will be displayed all the time.
 					<p class="note"><b>Note</b>: alternatively, you can just double-click any tab to hide the top toolbar or display it again.</p>
 				</li>
 				<li><b>Hide Status Bar</b> - hides the bottommost bar where the <b>Page Number Indicator</b> and <b>Zoom</b> buttons are situated. To show the hidden <b>Status Bar</b> click this option once again.</li>
@@ -41,10 +42,10 @@
 			<p>
 				The <b>Zoom</b> buttons are situated in the right lower corner and are used to zoom in and out the current document.
 				To change the currently selected zoom value that is displayed in percent, click it and select one of the available zoom options from the list (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%)
-				or use the <b>Zoom in</b> <img alt="Zoom in button" src="../images/zoomin.png" /> or <b>Zoom out</b> <img alt="Zoom out button" src="../images/zoomout.png" /> buttons.
-				Click the <b>Fit to width</b> <img alt="Fit to width button" src="../images/fitwidth.png" /> icon to fit the document page width to the visible part of the working area.
-				To fit the whole document page to the visible part of the working area, click the <b>Fit to page</b> <img alt="Fit to page button" src="../images/fitpage.png" /> icon.
-				Zoom settings are also available in the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> drop-down list that can be useful if you decide to hide the <b>Status Bar</b>.
+				or use the <b>Zoom in</b> <div class = "icon icon-zoomin"></div> or <b>Zoom out</b> <div class = "icon icon-zoomout"></div> buttons.
+				Click the <b>Fit to width</b> <div class = "icon icon-fitwidth"></div> icon to fit the document page width to the visible part of the working area.
+				To fit the whole document page to the visible part of the working area, click the <b>Fit to page</b> <div class = "icon icon-fitpage"></div> icon.
+				Zoom settings are also available in the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> drop-down list that can be useful if you decide to hide the <b>Status Bar</b>.
 			</p>
 			<p>The <b>Page Number Indicator</b> shows the current page as a part of all the pages in the current document (page 'n' of 'nn'). 
 			Click this caption to open the window where you can enter the page number and quickly go to it.</p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Enabling password protection for files" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Tips on document review option" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
@@ -20,8 +21,8 @@
         <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>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.
+            <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 <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>the following options are available in the opened pop-up menu:
             <ul>
@@ -38,10 +39,10 @@
         <p>Changes made by a user are highlighted with a specific color in the document text. When you click on the changed text, a balloon opens which displays the user name, the date and time when the change has been made, and the change description. The balloon also contains icons used to accept or reject the current change.</p>
         <p><img alt="balloon" src="../images/review_popup.png" /></p>
         <p>If you drag and drop a piece of text to some other place in the document, the text in a new position will be underlined with the double line. The text in the original position will be double-crossed. This will count as a single change.</p>
-        <p>Click the double-crossed text in the original position and use the <img alt="Follow Move button" src="../images/follow_move.png" /> arrow in the change balloon to go to the new location of the text.</p>
-        <p>Click the double-underlined text in the new position and use the <img alt="Follow Move button" src="../images/follow_move.png" /> arrow in the change balloon to go to to the original location of the text.</p>
+        <p>Click the double-crossed text in the original position and use the <div class = "icon icon-follow_move"></div> arrow in the change balloon to go to the new location of the text.</p>
+        <p>Click the double-underlined text in the new position and use the <div class = "icon icon-follow_move"></div> arrow in the change balloon to go to to the original location of the text.</p>
         <h3 id="displaymode">Choose the changes display mode</h3>
-        <p>Click the <img alt="Display Mode button" src="../images/review_displaymode.png" /> <b>Display Mode</b> button on the top toolbar and select one of the available modes from the list:</p>
+        <p>Click the <div class = "icon icon-review_displaymode"></div> <b>Display Mode</b> button on the top toolbar and select one of the available modes from the list:</p>
         <ul>
             <li><b>Markup and balloons</b> - this option is selected by default. It allows both viewing the suggested changes and editing the document. Changes are highlighted in the document text and displayed in balloons.</li>
             <li><b>Only markup</b> - this mode allows both viewing the suggested changes and editing the document. Changes are displayed in the document text only, balloons are hidden.</li>
@@ -49,22 +50,22 @@
             <li><b>Original</b> - this mode is used to display all the changes as if they were rejected. This option does not actually reject all changes, it only allows you to view the document without changes. In this mode, you cannot edit the document.</li>
         </ul>
         <h3 id="managechanges">Accept or reject changes</h3>
-        <p>Use the <img alt="To Previous Change button" src="../images/review_previous.png" /> <b>Previous</b> and the <img alt="To Next Change button" src="../images/review_next.png" /> <b>Next</b> buttons on the top toolbar to navigate through the changes.</p>
+        <p>Use the <div class = "icon icon-review_previous"></div> <b>Previous</b> and the <div class = "icon icon-review_next"></div> <b>Next</b> buttons on the top toolbar to navigate through the changes.</p>
         <p>To accept the currently selected change you can:</p>
         <ul>
-            <li>click the <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Accept</b> button on the top toolbar, or</li>
+            <li>click the <div class = "icon icon-review_accepttoptoolbar"></div> <b>Accept</b> button on the top toolbar, or</li>
             <li>click the downward arrow below the <b>Accept</b> button and select the <b>Accept Current Change</b> option (in this case, the change will be accepted and you will proceed to the next change), or</li>
-            <li>click the <b>Accept</b> <img alt="Accept button" src="../images/review_accept.png" /> button of the change balloon.</li>
+            <li>click the <b>Accept</b> <div class = "icon icon-review_accept"></div> button of the change balloon.</li>
         </ul>
-        <p>To quickly accept all the changes, click the downward arrow below the <img alt="Accept button" src="../images/review_accepttoptoolbar.png" /> <b>Accept</b> button and select the <b>Accept All Changes</b> option.</p>
+        <p>To quickly accept all the changes, click the downward arrow below the <div class = "icon icon-review_accepttoptoolbar"></div> <b>Accept</b> button and select the <b>Accept All Changes</b> option.</p>
         <p>To reject the current change you can:</p>
         <ul>
-            <li>click the <img alt="Reject button" src="../images/review_rejecttoptoolbar.png" /> <b>Reject</b> button on the top toolbar, or</li>
+            <li>click the <div class = "icon icon-review_rejecttoptoolbar"></div> <b>Reject</b> button on the top toolbar, or</li>
             <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> <img alt="Reject button" src="../images/review_reject.png" /> button of the change balloon.</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 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>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 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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the document search and replace function in Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -15,19 +16,19 @@
         </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>
+			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:
+			<li>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>
 			</ul>
 			</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/SpellChecking.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Spell check the text in your language while editing a document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -16,12 +17,12 @@
 		<h1>Spell-checking</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 check the spelling of your text in a certain language and correct mistakes while editing. In the <em>desktop version</em>, it's also possible to add words into a custom dictionary which is common for all three editors.</p>
 			<p class="note">Starting from <b>version 6.3</b>, the ONLYOFFICE editors support the <b>SharedWorker</b> interface for smoother operation without significant memory consumption. If your browser does not support SharedWorker then just <b>Worker</b> will be active. For more information about SharedWorker please refer to <a href="https://javascript.plainenglish.io/introduction-to-shared-workers-533d9abe9de3">this article</a>.</p>
-			<p>First of all, <b>choose a language</b> for your document. Click the <img alt="Set Document Language icon" src="../images/document_language.png" /> <b>Set Document Language</b> icon on the status bar. In the opened window, select the required language and click <b>OK</b>. The selected language will be applied to the whole document. </p>
+			<p>First of all, <b>choose a language</b> for your document. Click the <div class = "icon icon-document_language"></div> <b>Set Document Language</b> icon on the status bar. In the opened window, select the required language and click <b>OK</b>. The selected language will be applied to the whole document. </p>
 			<p><img alt="Set Document Language window" src="../images/document_language_window.png" /></p>
 			<p>To <b>choose a different language</b> for any piece within the document, select the necessary text passage with the mouse and use the <img alt="Spell-checking - Text Language selector" src="../images/spellchecking_language.png" /> menu on the status bar.</p>
 			<p>To <b>enable</b> the spell checking option, you can:</p>
             <ul>
-                <li>click the <img alt="Spell checking deactivated icon" src="../images/spellcheckdeactivated.png" /> <b>Spell checking</b> icon on the status bar, or</li>
+                <li>click the <div class = "icon icon-spellcheckdeactivated"></div> <b>Spell checking</b> icon on the status bar, or</li>
                 <li>open the <b>File</b> tab of the top toolbar, select the <b>Advanced Settings...</b> option, check the <b>Turn on spell checking option</b> box and click the <b>Apply</b> button.</li>
             </ul>
             <p>all misspelled words will be underlined by a red line.</p>
@@ -35,7 +36,7 @@
             <p><img alt="Spell-checking" src="../images/spellchecking.png" /></p>
             <p>To <b>disable</b> the spell checking option, you can:</p>
             <ul>
-                <li>click the <img alt="Spell checking activated icon" src="../images/spellcheckactivated.png" /> <b>Spell checking</b> icon on the status bar, or</li>
+                <li>click the <div class = "icon icon-spellcheckactivated"></div> <b>Spell checking</b> icon on the status bar, or</li>
                 <li>open the <b>File</b> tab of the top toolbar, select the <b>Advanced Settings...</b> option, uncheck the <b>Turn on spell checking option</b> box and click the <b>Apply</b> button.</li>
             </ul>
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The list of document formats supported by Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Document Editor user interface" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
@@ -31,24 +32,24 @@
                     <p><img alt="Icons in the editor header" src="../images/interface/leftpart.png" /></p>
                     <p>On the right side of the <b>Editor header</b>, along with the user name the following icons are displayed:</p>
                     <ul>
-                        <li><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File explorer</b> window.</span> <span class="onlineDocumentFeatures"> 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.</span></li>
-                        <li><img alt="View Settings icon" src="../images/viewsettingsicon.png" /> It 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.</li>
-                        <li class="onlineDocumentFeatures"><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). It allows adjusting  <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">access rights</a> for the documents stored in the cloud.</li>
-                        <li><img alt="Favorites icon" src="../images/favorites_icon.png" /> <b>Mark as favorite</b> - click the star to add a file to favorites as to make it easy to find. 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.</li>
+                        <li><div class = "icon icon-gotodocuments"></div> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File explorer</b> window.</span> <span class="onlineDocumentFeatures"> 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.</span></li>
+                        <li><div class = "icon icon-viewsettingsicon"></div> It 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.</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-access_rights"></div> <b>Manage document access rights</b> (available in the <em>online version</em> only). It allows adjusting  <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">access rights</a> for the documents stored in the cloud.</li>
+                        <li><div class = "icon icon-favorites_icon"></div> <b>Mark as favorite</b> - click the star to add a file to favorites as to make it easy to find. 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.</li>
                     </ul>                    
                 </li>
                 <li>The <b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/LayoutTab.htm" onclick="onhyperlinkclick(this)">Layout</a>, <a href="../ProgramInterface/ReferencesTab.htm" onclick="onhyperlinkclick(this)">References</a>, <a href="../ProgramInterface/FormsTab.htm" onclick="onhyperlinkclick(this)">Forms</a> (available with DOCXF files only), <a href="../ProgramInterface/ReviewTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
-                <p>The <img alt="Copy icon" src="../images/copy.png" /> <b>Copy</b> and <img alt="Paste icon" src="../images/paste.png" /> <b>Paste</b> options are always available on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
+                <p>The <div class = "icon icon-copy"></div> <b>Copy</b> and <div class = "icon icon-paste"></div> <b>Paste</b> options are always available on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
                 </li>
                 <li>The <b>Status bar</b> located at the bottom of the editor window indicates the page number and displays some notifications (for example, "All changes saved", etc.). It also allows <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">setting the text language, enabling spell checking</a>, turning on the <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">track changes mode</a> and adjusting <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">zoom</a>.</li>
                 <li>The <b>Left sidebar</b> contains the following icons: 
                     <ul>
-                        <li><img alt="Search icon" src="../images/searchicon.png" /> - allows using the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
-                        <li><img alt="Comments icon" src="../images/commentsicon.png" /> - allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> panel,</li>
-                        <li><img alt="Navigation icon" src="../images/navigationicon.png" /> - allows going to the <a href="../UsageInstructions/CreateTableOfContents.htm#navigation" onclick="onhyperlinkclick(this)">Navigation</a> panel and managing headings,</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#chat" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Feedback and Support icon" src="../images/feedbackicon.png" /> - (available in the <em>online version</em> only) allows to contact our support team,</li>
-                        <li class="onlineDocumentFeatures"><img alt="About icon" src="../images/about.png" /> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
+                        <li><div class = "icon icon-searchicon"></div> - allows using the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
+                        <li><div class = "icon icon-commentsicon"></div> - allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> panel,</li>
+                        <li><div class = "icon icon-navigationicon"></div> - allows going to the <a href="../UsageInstructions/CreateTableOfContents.htm#navigation" onclick="onhyperlinkclick(this)">Navigation</a> panel and managing headings,</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#chat" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-feedbackicon"></div> - (available in the <em>online version</em> only) allows to contact our support team,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-about"></div> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
                     </ul>
                 </li>
                 <li><b>Right sidebar</b> sidebar allows adjusting additional parameters of different objects. When you select a particular object in the text, the corresponding icon is activated on the <b>Right sidebar</b>. Click this icon to expand the <b>Right sidebar</b>.</li>

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

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

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

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