Change links in PE

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="The short description of Presentation 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 Präsentationseditor</h1>
 			<p>Der <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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>Präsentationseditor</b> können Sie verschiedene Editiervorgänge durchführen wie bei einem beliebigen Desktopeditor, editierte Präsentationen unter Beibehaltung aller Formatierungsdetails drucken oder sie auf der Festplatte Ihres Rechners als PPTX-, PDF-. ODP-, POTX-, PDF/A- oder OTP-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/presentationeditor/main/resources/help/de/HelpfulHints/AdvancedSettings.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The advanced settings of Presentation 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,7 +15,7 @@
             <input id="search" class="searchBar" placeholder="Suche" type="text" onkeypress="doSearch(event)">
         </div>
 		<h1>Erweiterte Einstellungen des Präsentationseditors</h1>
-			<p>Über die Funktion erweiterten Einstellungen können Sie die Grundeinstellungen im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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>Rechtschreibprüfung</b> - Ein-/Ausschalten der automatischen Rechtschreibprüfung.</li>
@@ -24,7 +25,7 @@
                 <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>

apps/presentationeditor/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,15 +32,15 @@
                 <p>Im <b>Präsentationseneditor</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>Strikt</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>Strikt</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">Wenn Sie eine Präsentation 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 eine Präsentation im Modus <b>Strikt</b> von mehreren Benutzern gleichzeitig bearbeitet wird, werden die bearbeiteten Objekte (AutoFormen, Textobjekte, Tabellen, Bilder und Diagramme) mit gestrichelten Linien in verschiedenen Farben markiert. Das Objekt, das Sie bearbeiten, ist von der grünen gestrichelten Linie umgeben. Rote gestrichelte Linien zeigen, dass die Objekte von anderen Benutzern bearbeitet werden. 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 in der aktuellen Präsentation 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 niemand 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 der Tabelle auf die Datei zugreifen können; neue Benutzer einladen und ihnen die Berechtigung zum <em>Bearbeiten</em>, <em>Lesen</em> oder <em>Kommentieren</em> der Präsentation 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>Die Anzahl der Benutzer, die in der aktuellen Präsentation 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 niemand 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 der Tabelle auf die Datei zugreifen können; neue Benutzer einladen und ihnen die Berechtigung zum <em>Bearbeiten</em>, <em>Lesen</em> oder <em>Kommentieren</em> der Präsentation 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>
                 <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>
@@ -48,35 +49,35 @@
                 <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>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 bezüglich eines bestimmten Objekts (Textbox, Form etc.) hinterlassen:</p>
                 <ol>
                     <li>Wählen Sie ein Objekt, das Ihrer Meinung nach einen Fehler oder ein Problem beinhaltet.</li>
-                    <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> und klicken Sie auf <img alt="Kommentar" src="../images/comment_toptoolbar.png" /> <b>Kommentare</b>, oder<br /> klicken Sie mit der rechten Maustaste auf das gewünschten Objekt und wählen Sie die Option <b>Kommentar hinzufügen</b> aus dem Kontextmenü aus.<br /></li>
+                    <li>Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> und klicken Sie auf <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentare</b>, oder<br /> klicken Sie mit der rechten Maustaste auf das gewünschten Objekt und wählen Sie die Option <b>Kommentar hinzufügen</b> aus dem Kontextmenü aus.<br /></li>
                     <li>Geben Sie den gewünschten Text ein.</li>
                     <li>Klicken Sie auf <b>Kommentar hinzufügen/Hinzufügen</b>.</li>
                 </ol>
-                <p>Das von Ihnen markierte Objekt wird mit dem Symbol <img alt="Kommentiertes Objekt" src="../images/added_comment_icon.png" /> markiert. Um den Kommentar einzusehen, klicken Sie einfach auf dieses Symbol.</p>
-                <p>Um einer bestimmten Folie einen Kommentar hinzuzufügen, wählen Sie die Folie aus und klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> auf <img alt="Kommentar" src="../images/comment_toptoolbar.png" /> <b>Kommentar</b>. Der hinzugefügte Kommentar wird in der unteren linken Ecke der Folie angezeigt.</p>
-                <p>Um der gesamten Präsentation einen Kommentar hinzuzufügen, der sich nicht auf ein einzelnes Objekt oder eine einzelne Folie bezieht, klicken Sie in der linken Seitenleiste auf das Symbol <img alt="Kommentare" src="../images/commentsicon.png" />, um das <b>Kommentarfeld</b> zu öffnen und klicken Sie anschließend auf <b>Kommentar hinzufügen</b>. Kommentare die sich auf die gesamte Präsentation beziehen weren im <b>Kommentarfeld</b> angezeigt. Auch Kommentare in Bezug auf Objekte und einzelne Folien sind hier verfügbar.</p>
+                <p>Das von Ihnen markierte Objekt wird mit dem Symbol <div class = "icon icon-added_comment_icon"></div> markiert. Um den Kommentar einzusehen, klicken Sie einfach auf dieses Symbol.</p>
+                <p>Um einer bestimmten Folie einen Kommentar hinzuzufügen, wählen Sie die Folie aus und klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> auf <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentar</b>. Der hinzugefügte Kommentar wird in der unteren linken Ecke der Folie angezeigt.</p>
+                <p>Um der gesamten Präsentation einen Kommentar hinzuzufügen, der sich nicht auf ein einzelnes Objekt oder eine einzelne Folie bezieht, klicken Sie in der linken Seitenleiste auf das Symbol <div class = "icon icon-commentsicon"></div>, um das <b>Kommentarfeld</b> zu öffnen und klicken Sie anschließend auf <b>Kommentar hinzufügen</b>. Kommentare die sich auf die gesamte Präsentation beziehen weren im <b>Kommentarfeld</b> angezeigt. Auch Kommentare in Bezug auf Objekte und einzelne Folien sind hier verfügbar.</p>
                 <p>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>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/deletecommenticon.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" />,</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-deletecommenticon"></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>,</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>Neue Kommentare, die von den anderen Benutzern hinzugefügt wurden, werden erst sichtbar, wenn Sie in der in der linken oberen Ecke der oberen Symbolleiste auf <img alt="Speichern" src="../images/saveupdate.png" /> klicken.</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>Neue Kommentare, die von den anderen Benutzern hinzugefügt wurden, werden erst sichtbar, wenn Sie in der in der linken oberen Ecke der oberen Symbolleiste auf <div class = "icon icon-saveupdate"></div> klicken.</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/presentationeditor/main/resources/help/de/HelpfulHints/KeyboardShortcuts.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Die Tastaturkombinationen werden für einen schnelleren und einfacheren Zugriff auf die Funktionen des Präsentationseditors über die Tastatur verwendet." />
 		<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/presentationeditor/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 slide 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/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> bietet mehrere Werkzeuge, um Ihnen die Ansicht und Navigation in Ihrer Präsentation zu erleichtern: Zoom, vorherige/nächste Folie, Anzeige der Foliennummer.</p>
 			<h3>Anzeigeeinstellungen anpassen</h3>
-			<p>Um die Standardanzeigeeinstellung anzupassen und den günstigsten Modus für die Arbeit mit der Präsentation festzulegen, wechseln Sie in die Registerkarte <b>Start</b>, klicken auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Ansichtseinstellungen" src="../images/viewsettingsicon.png" /> 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 der Präsentation festzulegen, wechseln Sie in die Registerkarte <b>Start</b>, klicken auf das Symbol <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> 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. Um den Modus zu deaktivieren, wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Ansichtseinstellungen" src="../images/viewsettingsicon.png" /> und klicken Sie erneut auf <b>Symbolleiste ausblenden</b>. Die Symbolleiste ist wieder fixiert.
+			<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. Um den Modus zu deaktivieren, wechseln Sie in die Registerkarte <b>Start</b>, 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">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 wird ausgeblendet, auf der sich die Optionen <b>Foliennummer</b> und <b>Zoom</b> befinden. Um die ausgeblendete <b>Statusleiste</b> wieder einzublenden, klicken Sie erneut auf diese Option.</li>
@@ -28,9 +29,9 @@
 			<p>Die rechte Seitenleiste ist standartmäßig minimiert. Um sie zu erweitern, wählen Sie ein beliebiges Objekt/Folie aus und klicken Sie auf das Symbol des aktuell aktivierten Tabs auf der rechten Seite. Um die Seitenleiste wieder zu minimieren, klicken Sie erneut auf das Symbol. Die Breite der linken Randleiste wurd durch Ziehen und Loslassen mit dem Mauszeiger angepasst: Bewegen Sie den Mauszeiger über den Rand der linken Seitenleiste, so dass dieser sich in einen bidirektionalen Pfeil verwandelt und ziehen Sie den Rand nach links, um die Seitenleiste zu verkleinern und nach rechs um sie zu erweitern.</p>
 			<h3>Verwendung der Navigationswerkzeuge</h3>
 			<p>Mithilfe der folgenden Werkzeuge können Sie durch Ihre Präsentation navigieren:</p>
-			<p>Die <b>Zoom-Funktion</b> befindet sich in der rechten unteren Ecke und dient zum Vergrößern und Verkleinern der aktuellen Präsentation. 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>Breite anpassen</b> <img alt="Breite anpassen" src="../images/fitwidth.png" />, um die Folienbreite der Präsentation an den sichtbaren Teil des Arbeitsbereichs anzupassen. Um die ganze Folie der Präsentation an den sichtbaren Teil des Arbeitsbereichs anzupassen, klicken Sie auf das Symbol <b>Folie anpassen</b> <img alt="Folie anpassen" src="../images/fitslide.png" />. Die Zoom-Einstellungen sind auch in der Gruppe <b>Ansichtseinstellungen</b> <img alt="Ansichtseinstellungen" 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 der aktuellen Präsentation. 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>Breite anpassen</b> <div class = "icon icon-fitwidth"></div>, um die Folienbreite der Präsentation an den sichtbaren Teil des Arbeitsbereichs anzupassen. Um die ganze Folie der Präsentation an den sichtbaren Teil des Arbeitsbereichs anzupassen, klicken Sie auf das Symbol <b>Folie anpassen</b> <div class = "icon icon-fitslide"></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 class="note">Sie können einen Standard-Zoomwert festlegen. Wechseln Sie in der oberen Symbolleiste in die Registerkarte <b>Datei</b>, wählen Sie die Option <b>Erweiterte Einstellungen...</b>, wählen Sie den gewünschten <b>Zoom-Standardwert</b> aus der Liste aus und klicken sie auf <b>Übernehmen</b>.</p>
-			<p>Um während der Bearbeitung der Präsentation zur nächsten Folie zu wechseln oder zur vorherigen Folie zurückzukehren, können Sie über die Schaltflächen <img alt="Vorherige Folie" src="../images/previouspage.png" /> und <img alt="Nächste Folie" src="../images/nextpage.png" /> oben und unten in der vertikalen Bildlaufleiste am rechten Folienrand für die Navigation verwenden.</p>
+			<p>Um während der Bearbeitung der Präsentation zur nächsten Folie zu wechseln oder zur vorherigen Folie zurückzukehren, können Sie über die Schaltflächen <div class = "icon icon-previouspage"></div> und <div class = "icon icon-nextpage"></div> oben und unten in der vertikalen Bildlaufleiste am rechten Folienrand für die Navigation verwenden.</p>
 			<p>Die <b>Folienzahlanzeige</b> stellt die aktuelle Folie als Teil aller Folien in der aktuellen Präsentation dar (Folie „n“ von „nn“). Wenn Sie auf die Anzeige der Foliennummer klicken, öffnet sich ein Fenster und Sie können eine gewünschte Foliennummer angeben, um direkt auf diese Folie zu wechseln. Wenn Sie die <b>Statusleiste</b> ausgeblendet haben, ist dieser Schnellzugriff nicht zugänglich.</p>
 			
 			

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Präsentationen 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/presentationeditor/main/resources/help/de/HelpfulHints/Search.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the search and replace function in Presentation 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>Suchen und Ersetzen</h1>
-			<p>Um im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> nach Zeichen, Wörtern oder Phrasen suchen <b>zu suchen</b>, klicken Sie auf das Symbol <img alt="Suche" src="../images/searchicon.png" /> in der linken Seitenlaste oder nutzen Sie die Tastenkombination <em>STRG+F</em>.</p>
+			<p>Um im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> nach Zeichen, Wörtern oder Phrasen suchen <b>zu suchen</b>, klicken Sie auf das Symbol <div class = "icon icon-searchicon"></div> in der linken Seitenlaste oder nutzen Sie die Tastenkombination <em>STRG+F</em>.</p>
 			<p>Die Dialogbox <b>Suchen und Ersetzen</b> wird geöffnet:</p><img alt="Dialogbox Suchen und Ersetzen" src="../images/search_window.png" /><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="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 derselben 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 gesucht). Um die Option auszuschalten, deaktivieren Sie das Kontrollkästchen.</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>Navigieren Sie durch Ihre Suchergebnisse über die <b>Pfeiltasten</b>. Die Suche wird entweder in Richtung Anfang der Präsentation (klicken Sie auf <img alt="Linkspfeil" src="../images/searchupbutton.png" />) oder in Richtung Ende der Präsentation (klicken Sie auf <img alt="Rechtspfeil" src="../images/searchdownbutton.png" />) durchgeführt. <!--<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>
+			<li>Navigieren Sie durch Ihre Suchergebnisse über die <b>Pfeiltasten</b>. Die Suche wird entweder in Richtung Anfang der Präsentation (klicken Sie auf <div class = "icon icon-searchupbutton"></div>) oder in Richtung Ende der Präsentation (klicken Sie auf <div class = "icon icon-searchdownbutton"></div>) durchgeführt. <!--<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>
 			<p>Die erste Folie in der gewählten Richtung, die den Suchbegriff enthält, wird in der Folienliste hervorgehoben und im Arbeitsbereich angezeigt. Wenn diese Folie nicht das gewünschte Ergebnisse enthält, klicken Sie erneut auf den Pfeil, um die nächste Folie mit dem gewünschten Suchbegriff zu finden.</p>
             <p>Um ein oder mehrere der gefundenen Ergebnisse zu <b>ersetzen</b>, klicken Sie auf den Link <b>Ersetzen</b> unter dem Eingabefeld oder nutzen Sie die Tastenkombination <em>STRG+H</em>. Die Dialogbox <b>Suchen und Ersetzen</b> öffnet sich:</p>

apps/presentationeditor/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 presentation" />
 		<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/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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 Ihre Präsentation aus. Klicken Sie auf der rechten Seite der Statusleiste auf <img alt="Sprache für die Präsentation festlegen" src="../images/document_language.png" />. Wählen Sie nun im angezeigten Fenster die gewünschte Sprache und klicken Sie auf <b>OK</b>. Die ausgewählte Sprache wird auf die gesamte Präsentation angewandt.</p>
+			<p>Wählen Sie zunächst die <b>Sprache</b> für Ihre Präsentation aus. Klicken Sie auf der rechten Seite der Statusleiste auf <div class = "icon icon-document_language"></div>. Wählen Sie nun im angezeigten Fenster die gewünschte Sprache und klicken Sie auf <b>OK</b>. Die ausgewählte Sprache wird auf die gesamte Präsentation angewandt.</p>
 			<p><img alt="Fenster Sprache für die Präsentation festlegen" src="../images/document_language_window.png" /></p>
 			<p>Um für einen beliebigen Textabschnitt in der Präsentation 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 - Sprachauswahl" 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_presentation.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/presentationeditor/main/resources/help/de/HelpfulHints/SupportedFormats.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The list of presentation formats supported by Presentation 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/presentationeditor/main/resources/help/de/HelpfulHints/UsingChat.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Tips on using the Chat tool" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 	</head>
 	<body>
 		<div class="mainpart">
@@ -12,12 +13,12 @@
 			<p>Der <b>ONLYOFFICE Presentation Editor</b> bietet Ihnen die Möglichkeit, mit den anderen Benutzern zu kommunizieren und Ideen betreffend die bestimmten Abschnitte der Präsentationen zu besprechen.</p>
 			<p>Um auf den Chat zuzugreifen und eine Nachricht für die anderen Benutzer zu hinterlassen, führen Sie die folgenden Schritte aus:</p>
 			<ol>
-				<li>Klicken Sie auf das Symbol <img alt="Symbol Chat" src="../images/chaticon.png" /> auf der oberen Symbolleiste.</li>
+				<li>Klicken Sie auf das Symbol <div class = "icon icon-chaticon"></div> auf der oberen Symbolleiste.</li>
 				<li>Geben Sie Ihren Text ins entsprechende Feld ein.</li>
 				<li>Klicken Sie auf den Button <b>Senden</b>.</li>
 			</ol>
-			<p>Alle Nachrichten, die von den Benutzern hinterlassen wurden, werden auf der Leiste links angezeigt. Wenn es neue Nachrichten gibt, die Sie noch nicht gelesen haben, wird das Chat-Symbol so aussehen - <img alt="Symbol Chat" src="../images/chaticon_new.png" />.</p>
-			<p>Um die Leiste mit den Chat-Nachrichten zu schließen, klicken Sie aufs Symbol <img alt="Symbol Chat" src="../images/chaticon.png" /> noch einmal.</p>
+			<p>Alle Nachrichten, die von den Benutzern hinterlassen wurden, werden auf der Leiste links angezeigt. Wenn es neue Nachrichten gibt, die Sie noch nicht gelesen haben, wird das Chat-Symbol so aussehen - <div class = "icon icon-chaticon_new"></div>.</p>
+			<p>Um die Leiste mit den Chat-Nachrichten zu schließen, klicken Sie aufs Symbol <div class = "icon icon-chaticon"></div> noch einmal.</p>
 		</div>
 	</body>
 </html>

apps/presentationeditor/main/resources/help/de/ProgramInterface/CollaborationTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Zusammenarbeit im Präsentationseditor" />
 		<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/presentationeditor/main/resources/help/de/ProgramInterface/FileTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Datei - Präsentationseditor" />
 		<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/presentationeditor/main/resources/help/de/ProgramInterface/HomeTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Startseite - Präsentationseditor" />
 		<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/presentationeditor/main/resources/help/de/ProgramInterface/InsertTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Einfügen - Präsentationseditor" />
 		<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/presentationeditor/main/resources/help/de/ProgramInterface/PluginsTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Plugins - Präsentationseditor" />
 		<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/presentationeditor/main/resources/help/de/ProgramInterface/ProgramInterface.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Einführung in die Benutzeroberfläche des Präsentationseditors" />
 		<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>
@@ -28,28 +29,28 @@
                 <li>
                     <p>In der <b>Kopfzeile des Editors</b> werden das Logo, <span class="desktopDocumentFeatures">geöffnete Dokumente</span>, der Name der Präsentation sowie die Menü-Registerkarten angezeigt.</p>
                     <p>Im linken Bereich der <b>Kopfzeile des Editors</b> finden Sie die Schaltflächen <b>Speichern</b>, <b>Datei drucken</b>, <b>Rückgängig machen</b> und <b>Wiederholen</b>.</p>
-                    <p><img alt="Symbole der Kopfzeile des Präsentationeseditors" src="../images/interface/leftpart.png" /></p>
+                    <p><div class = "big big-leftpart"></div></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 Symbol" src="../images/gotodocuments.png" /> <b>Dateispeicherort öffnen</b> - <span class="desktopDocumentFeatures">in der <em>Desktop-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="Ansichts-Einstellungen Symbol" 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 Symbol" src="../images/access_rights.png" /> <b>Zugriffsrechte</b> verwalten (nur in der <em>Online-Version</em> verfügbar) - hier können Sie <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>Desktop-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) - hier können Sie <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)">Startseite</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Einfügen</a>, <a href="../ProgramInterface/CollaborationTab.htm" onclick="onhyperlinkclick(this)">Zusammenarbeit</a>, <span class="desktopDocumentFeatures">Schützen</span> und <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
-                <p>Die Befehle <img alt="Kopieren Symbol" src="../images/copy.png" /> <b>Kopieren</b> und <img alt="Einfügen Symbol" src="../images/paste.png" /> <b>Einfügen</b> stehen unabhängig von der ausgewählten Registerkarte jederzeit im linken Teil der <b>oberen Symbolleiste</b> zur Verfügung.</p>
+                <p>Die Befehle <div class = "icon icon-copy"></div> <b>Kopieren</b> und <div class = "icon icon-paste"></div> <b>Einfügen</b> stehen unabhängig von der ausgewählten Registerkarte jederzeit im linken Teil der <b>oberen Symbolleiste</b> zur Verfügung.</p>
                 </li>
                 <li>In der <b>Statusleiste</b> am unteren Rand des Editorfensters finden Sie das Symbol für den Beginn der <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Bildschirmpräsentation</a> sowie diverse <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">Navigationswerkzeuge</a>: z. B. Foliennummer und Zoom. Außerdem werden in der <b>Statusleiste</b> Benachrichtigungen vom System angezeigt (wie beispielsweise „Alle Änderungen wurden gespeichert" usw.) und Sie haben die Möglichkeit, die <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">Textsprache festzulegen und die Rechtschreibprüfung zu aktivieren</a>.</li>
                 <li>
                     Symbole in der <b>linken Seitenleiste</b>:
                     <ul>
-                        <li>mithilfe der Funktion <img alt="Suchen Symbol" src="../images/searchicon.png" /> können Sie den Text <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">suchen und ersetzen</a>,</li>
-                        <li><img alt="Kommentare Symbol" src="../images/commentsicon.png" /> öffnet die <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Kommentarfunktion</a>,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Chatfenster Symbol" 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,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Feedback und Support Symbol" src="../images/feedbackicon.png" /> - (nur in der <em>Online-Version</em> verfügbar) kontaktieren Sie under Support-Team,</li>
-                        <li class="onlineDocumentFeatures"><img alt="Über das Produkt Symbol" src="../images/abouticon.png" /> - (nur in der <em>Online-Version</em> verfügbar) sehen Sie sich die Programminformationen an.</li>
+                        <li>mithilfe der Funktion <div class = "icon icon-searchicon"></div> können Sie den Text <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">suchen und ersetzen</a>,</li>
+                        <li><div class = "icon icon-commentsicon"></div> öffnet die <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Kommentarfunktion</a>,</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,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-feedbackicon"></div> - (nur in der <em>Online-Version</em> verfügbar) kontaktieren Sie under Support-Team,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-about"></div> - (nur in der <em>Online-Version</em> verfügbar) sehen Sie sich die Programminformationen an.</li>
                     </ul>
                 </li>
                 <li>Über die rechte <b>Randleiste</b> können zusätzliche Parameter von verschiedenen Objekten angepasst werden. Wenn Sie ein bestimmtes Objekt auf der Folie auswählen, wird die entsprechende Schaltfläche auf der rechten Randleiste aktiviert. Um die Randleiste zu erweitern, klicken Sie diese Schaltfläche an.</li>

apps/presentationeditor/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 or to another slide in the same presentation" />
 		<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 Ihren Mauszeiger an der Stelle im Textfeld, die Sie in den Link integrieren möchten.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</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>Sie können nun Fenster <b>Einstellungen Hyperlink</b>, die Parameter für den Hyperlink festlegen:<ul>
 				    <li>wählen Sie den Linktyp, den Sie einfügen möchten:<ul>
 				    <li>Wenn Sie einen Hyperlink hinzufügen möchten, der zu externen Website führt, wählen Sie <b>Website</b> und geben Sie eine URL im Format http://www.example.com in das Feld <b>Link zu</b> ein.<p><img alt="Fenster Einstellungen Hyperlink" src="../images/hyperlinkwindow.png" /></p>
@@ -34,7 +35,7 @@
 				<li>Klicken Sie auf <b>OK</b>.</li>
 			</ol>
 			<p>Um einen Hyperlink hinzuzufügen und die Einstellungen zu öffnen, können Sie auch mit der rechten Maustaste an die gewünschte Stelle klicken und die Option <b>Hyperlink</b> im Kontextmenü auswählen oder Sie positionieren den Cursor an der gewünschten Position und drücken die Tastenkombination <b>STRG+K</b>.</p>
-			<p class="note"><b>Hinweis</b>: Es ist auch möglich, ein Zeichen, Wort oder eine Wortverbindung mit der Maus oder über die <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">Tastatur</a> auszuwählen. Klicken Sie anschließend in der Registerkarte <b>Einfügen</b> auf <img alt="Hyperlink" src="../images/addhyperlink.png" /> <b>Hyperlink</b> oder klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie im Kontextmenü die Option <b>Hyperlink</b> aus. Danach öffnet sich das oben dargestellte Fenster und im Feld <b>Angezeigter Text</b> erscheint der ausgewählte Textabschnitt.</p>
+			<p class="note"><b>Hinweis</b>: Es ist auch möglich, ein Zeichen, Wort oder eine Wortverbindung mit der Maus oder über die <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">Tastatur</a> auszuwählen. Klicken Sie anschließend in der Registerkarte <b>Einfügen</b> auf <div class = "icon icon-addhyperlink"></div> <b>Hyperlink</b> oder klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie im Kontextmenü die Option <b>Hyperlink</b> aus. Danach öffnet sich das oben dargestellte Fenster und im Feld <b>Angezeigter Text</b> erscheint der ausgewählte Textabschnitt.</p>
 			<p>Wenn Sie den Mauszeiger über den eingefügten Hyperlink bewegen, wird der von Ihnen im Feld QuickInfo eingebene Text angezeigt. Sie können dem Link folgen, indem Sie die Taste <b>STRG</b> drücken und dann auf den Link in Ihrer Präsentation klicken.</p>
 			<p>Um den hinzugefügten Hyperlink zu bearbeiten oder zu entfernen, klicken Sie diesen mit der rechten Maustaste an, wählen Sie die Option <b>Hyperlink</b> im Kontextmenü und wählen Sie anschließend den gewünschten Vorgang aus - <b>Hyperlink bearbeiten</b> oder <b>Hyperlink entfernen</b>.</p>
 		</div>

apps/presentationeditor/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 slide." />
 		<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,18 +20,18 @@
         <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 <b>Form ausrichten</b> <img alt="Form ausrichten" src="../images/alignshape.png" /> auf der oberen Symbolleiste in der Registerkarte <b>Start</b> und wählen Sie eine der verfügbaren Optionen:<ul>
+            <li>Klicken Sie auf das Symbol <b>Form ausrichten</b> <div class = "icon icon-alignshape"></div> auf der oberen Symbolleiste in der Registerkarte <b>Start</b> und wählen Sie eine der verfügbaren Optionen:<ul>
                     <li><b>An Folie ausrichten</b>, um Objekte relativ zu den Rändern der Folie 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 <b>Form ausrichten</b> <img alt="Form ausrichten" src="../images/alignshape.png" /> 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" /> - um die Objekte horizontal am linken Folienrand ausrichten.</li>
-                    <li><b>Mittig ausrichten</b> <img alt="Zentriert ausrichten" src="../images/alignobjectcenter.png" /> - um die Objekte horizontal mittig auf der Folie auszurichten.</li>
-                    <li><b>Rechtsbündig ausrichten</b> <img alt="Rechtsbündig ausrichten" src="../images/alignobjectright.png" /> - um die Objekte horizontal am rechten Folienrand auszurichten.</li>
-                    <li><b>Oben ausrichten</b> <img alt="Oben ausrichten" src="../images/alignobjecttop.png" /> - um die Objekte vertikal am oberen Folienrand auszurichten.</li>
-                    <li><b>Mittig ausrichten</b> <img alt="Mittig ausrichten" src="../images/alignobjectmiddle.png" /> - um die Objekte vertikal nach ihrer Mitte und der Mitte des Slides auszurichten.</li>
-                    <li><b>Unten ausrichten</b> <img alt="Unten ausrichten" src="../images/alignobjectbottom.png" /> - um die Objekte vertikal am unteren Folienrand auszurichten.</li>
+            <li>Klicken Sie erneut auf das Symbol <b>Form ausrichten</b> <div class = "icon icon-alignshape"></div> 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> - um die Objekte horizontal am linken Folienrand ausrichten.</li>
+                    <li><b>Mittig ausrichten</b> <div class = "icon icon-alignobjectcenter"></div> - um die Objekte horizontal mittig auf der Folie auszurichten.</li>
+                    <li><b>Rechtsbündig ausrichten</b> <div class = "icon icon-alignobjectright"></div> - um die Objekte horizontal am rechten Folienrand auszurichten.</li>
+                    <li><b>Oben ausrichten</b> <div class = "icon icon-alignobjecttop"></div> - um die Objekte vertikal am oberen Folienrand auszurichten.</li>
+                    <li><b>Mittig ausrichten</b> <div class = "icon icon-alignobjectmiddle"></div> - um die Objekte vertikal nach ihrer Mitte und der Mitte des Slides auszurichten.</li>
+                    <li><b>Unten ausrichten</b> <div class = "icon icon-alignobjectbottom"></div> - um die Objekte vertikal am unteren Folienrand auszurichten.</li>
                 </ul>
             </li>
         </ol>
@@ -39,14 +40,14 @@
         <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 <b>Form ausrichten</b> <img alt="Form ausrichten" src="../images/alignshape.png" /> auf der oberen Symbolleiste in der Registerkarte <b>Start</b> und wählen Sie eine der verfügbaren Optionen:<ul>                    
+            <li>Klicken Sie auf das Symbol <b>Form ausrichten</b> <div class = "icon icon-alignshape"></div> auf der oberen Symbolleiste in der Registerkarte <b>Start</b> und wählen Sie eine der verfügbaren Optionen:<ul>                    
                     <li><b>An Folie ausrichten</b>, um Objekte zwischen den Rändern der Folie 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 <b>Form ausrichten</b> <img alt="Form ausrichten" src="../images/alignshape.png" /> 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 Rand der Folie 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 Folie 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 <b>Form ausrichten</b> <div class = "icon icon-alignshape"></div> 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 Rand der Folie 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 Folie 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>
@@ -54,20 +55,20 @@
         <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> ausgewählte Objekte zu <b>gruppieren</b> oder die <b>Gruppierung aufzuheben</b>, klicken Sie auf das Symbol <b>Gruppieren</b> <img alt="Form anordnen" src="../images/arrangeshape.png" /> in der Registerkarte <b>Start</b> und wählen Sie die gewünschte Option aus der Liste aus:</p>
+        <p>Um <em>zwei oder mehr</em> ausgewählte Objekte zu <b>gruppieren</b> oder die <b>Gruppierung aufzuheben</b>, klicken Sie auf das Symbol <b>Gruppieren</b> <div class = "icon icon-arrangeshape"></div> in der Registerkarte <b>Start</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 die gewählten Objekte <b>anzuordnen</b> (d.h. ihre Reihenfolge bei der Überlappung zu ändern), klicken Sie auf das Symbol <b>Form anordnen</b> <img alt="Form anordnen" src="../images/arrangeshape.png" /> in der Registerkarte <b>Start</b> und wählen Sie die gewünschte Anordnung aus der Liste.</p>
+        <p>Um die gewählten Objekte <b>anzuordnen</b> (d.h. ihre Reihenfolge bei der Überlappung zu ändern), klicken Sie auf das Symbol <b>Form anordnen</b> <div class = "icon icon-arrangeshape"></div> in der Registerkarte <b>Start</b> und wählen Sie die gewünschte Anordnung aus der Liste.</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 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 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>
+            <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/presentationeditor/main/resources/help/de/UsageInstructions/ApplyTransitions.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add animation effects between slides" />
 		<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><b>Einen Übergang auf eine einzelne Folie</b> oder auf mehrere gewählte Folien anwenden:</p>
 			<p><img class="floatleft"alt="Registerkarte Folieneinstellungen" src="../images/slidesettingstab.png" /></p>
 			<ol style="margin-left: 280px;">
-				<li>Wählen Sie die gewünschte Folie aus (oder mehrere Folien in der Folienliste), der Sie einen Übergang hinzufügen möchten. Die Registerkarte <b>Folieneinstellungen</b> wird auf der rechten Seitenleiste aktiviert. Um sie zu öffnen, klicken Sie rechts auf das Symbol <b>Folieneinstellungen</b> <img alt="Folieneinstellungen" src="../images/slide_settings_icon.png" />. Alternativ können Sie eine Folie im Folienbearbeitungsbereich mit der rechten Maustaste anklicken und die Option <b>Folieneinstellungen</b> im Kontextmenü wählen.</li>
+				<li>Wählen Sie die gewünschte Folie aus (oder mehrere Folien in der Folienliste), der Sie einen Übergang hinzufügen möchten. Die Registerkarte <b>Folieneinstellungen</b> wird auf der rechten Seitenleiste aktiviert. Um sie zu öffnen, klicken Sie rechts auf das Symbol <b>Folieneinstellungen</b> <div class = "icon icon-slide_settings_icon"></div>. Alternativ können Sie eine Folie im Folienbearbeitungsbereich mit der rechten Maustaste anklicken und die Option <b>Folieneinstellungen</b> im Kontextmenü wählen.</li>
 				<li>Wählen Sie den gewünschten Übergang im Listenmenü <b>Effekt</b>.<p>Die folgenden Übergänge sind verfügbar: Verblassen, Schieben, Wischen, Teilen, Aufdecken, Bedecken, Uhr, Zoom.</p>
 				</li>
 				<li>Wählen Sie im Listenmenü eine der verfügbaren Effektoptionen aus. Durch diese Optionen wird festgelegt, wie genau der Effekt ausgeführt wird. Ist zum Beispiel, der Übergang „Zoom“ aktiviert, stehen die Optionen Hinein, Heraus und Zoomen und Drehen zur Verfügung.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Copy/clear formatting within your presentation" />
 		<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/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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 Zellen ü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 Zellen ü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>Um die angewandte Formatierung in einem Textabschnitt zu entfernen, führen Sie die folgenden Schritte aus:</p>
 			<ol>
 				<li>markieren Sie den entsprechenden Textabschnitt und</li>
-				<li>klicken Sie auf das Symbol <b>Formatierung löschen</b> <img alt="Formatierung löschen" src="../images/clearstyle.png" /> auf der oberen Symbolleiste, in der Registerkarte <b>Start</b>.</li>
+				<li>klicken Sie auf das Symbol <b>Formatierung löschen</b> <div class = "icon icon-clearstyle"></div> auf der oberen Symbolleiste, in der Registerkarte <b>Start</b>.</li>
 			</ol>
 		</div>
 	</body>

apps/presentationeditor/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 presentation: 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 gewählte Objekte (Folien, Textabschnitte, AutoFormen) im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> auszuschneiden, zu kopieren, einzufügen oder Aktionen rückgängig zu machen bzw. zu wiederholen, nutzen Sie die Optionen aus dem Rechtsklickmenü oder die entsprechenden Tastenkombinationen oder die Symbole die auf jeder beliebigen Registerkarte in der oberen Symbolleiste verfügbar sind:</p>
             <ul>
                 <li><b>Ausschneiden</b> - wählen Sie 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 in derselben Präsentation wieder eingefügt werden.</span></li>
-                <li><b>Kopieren</b> – wählen Sie ein Objekt aus und klicken Sie im Rechtsklickmenü auf <b>Kopieren</b> oder klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopieren</b>, <img alt="Kopieren" src="../images/copy.png" /> um die Auswahl in die Zwischenablage Ihres Computers zu kopieren. <span class="onlineDocumentFeatures">Das kopierte Objekt kann später an einer anderen Stelle in derselben Präsentation eingefügt werden.</span></li>
-                <li><b>Einfügen</b> – platzieren Sie den Cursor an der Stelle in Ihrer Präsentation, an der Sie das zuvor kopierte 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" />. Das Objekt wird an der aktuellen Cursorposition eingefügt. <span class="onlineDocumentFeatures">Das Objekt kann vorher aus derselben Präsentation kopiert werden oder auch aus einem anderen Dokument oder Programm oder von einer Webseite.</span></li>
+                <li><b>Kopieren</b> – wählen Sie ein Objekt aus und klicken Sie im Rechtsklickmenü auf <b>Kopieren</b> oder klicken Sie in der oberen Symbolleiste auf das Symbol <b>Kopieren</b>, <div class = "icon icon-copy"></div> um die Auswahl in die Zwischenablage Ihres Computers zu kopieren. <span class="onlineDocumentFeatures">Das kopierte Objekt kann später an einer anderen Stelle in derselben Präsentation eingefügt werden.</span></li>
+                <li><b>Einfügen</b> – platzieren Sie den Cursor an der Stelle in Ihrer Präsentation, an der Sie das zuvor kopierte 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>. Das Objekt wird an der aktuellen Cursorposition eingefügt. <span class="onlineDocumentFeatures">Das Objekt kann vorher aus derselben Präsentation 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 eine andere Präsentation 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>
@@ -28,7 +29,7 @@
                         <li><b>STRG+X</b> - Ausschneiden;</li>
                     </ul>
             <h3>Inhalte einfügen mit Optionen</h3>
-            <p>Nachdem der kopierte Text eingefügt wurde, erscheint neben der eingefügten Textpassage oder dem eingefügten Objekt 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 oder dem eingefügten Objekt 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>Für das Einfügen von Textpassagen stehen folgende Auswahlmöglichkeiten zur Verfügung:</p>
             <ul>
                 <li><em>An Zielformatierung anpassen</em> - die Formatierung der aktuellen Präsentation wird auf den eingefügten Text angewendet. Diese Option ist standardmäßig ausgewählt.</li>
@@ -45,8 +46,8 @@
             <h3>Vorgänge rückgängig machen/wiederholen</h3>
             <p>Verwenden Sie die entsprechenden Symbole im linken Bereich der Kopfzeile des Editors, um Vorgänge rückgängig zu machen/zu wiederholen oder nutzen Sie die entsprechenden Tastenkombinationen:</p>
             <ul>
-                <li><b>Rückgängig machen</b> – klicken Sie auf das Symbol <b>Rückgängig machen</b> <img alt="Rückgängig machen" src="../images/undo.png" />, um den zuletzt durchgeführten Vorgang rückgängig zu machen.</li>
-                <li><b>Wiederholen</b> – klicken Sie auf das Symbol <b>Wiederholen</b> <img alt="Wiederholen" src="../images/redo.png" />, um den zuletzt rückgängig gemachten Vorgang zu wiederholen.<p>Alternativ können Sie Vorgänge auch mit der Tastenkombination <b>STRG+Z</b> rückgängig machen bzw. mit <b>STRG+Y</b> wiederholen.</p>
+                <li><b>Rückgängig machen</b> – klicken Sie auf das Symbol <b>Rückgängig machen</b> <div class = "icon icon-undo"></div>, um den zuletzt durchgeführten Vorgang rückgängig zu machen.</li>
+                <li><b>Wiederholen</b> – klicken Sie auf das Symbol <b>Wiederholen</b> <div class = "icon icon-redo"></div>, um den zuletzt rückgängig gemachten Vorgang zu wiederholen.<p>Alternativ können Sie Vorgänge auch mit der Tastenkombination <b>STRG+Z</b> rückgängig machen bzw. mit <b>STRG+Y</b> wiederholen.</p>
                 </li>
             </ul>
             <p class="note"><b>Hinweis</b>: Wenn Sie eine Präsentation im Modus <b>Schnell</b> gemeinsam bearbeiten, ist die Option letzten rückgängig gemachten Vorgang <b>wiederherstellen</b> nicht verfügbar.</p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Create bulleted and numbered lists in the presentation" />
 		<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,8 +20,8 @@
 				<li>Positionieren Sie den Cursor an der Stelle, wo Sie die Liste beginnen möchten (dabei kann es sich um eine neue Zeile handeln oder eine bereits vorhandene).</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b>.</li>
                 <li>Wählen Sie einen Listentyp:<ul>
-						<li><b>Aufzählung</b> mit Markern - klicken Sie in der oberen Symbolleiste auf das Symbol <b>Aufzählungszeichen</b> <img alt="Aufzählungszeichen" src="../images/bullets.png" /></li>
-						<li><b>Nummerierte Liste</b> mit Zahlen oder Buchstaben - klicken Sie in der oberen Symbolleiste auf das Symbol <b>Nummerierte Liste</b> <img alt="Nummerierung" src="../images/numbering.png" /><p class="note"><b>Hinweis</b>: Mit dem schwarzen Pfeil neben dem Symbol <b>Aufzählungszeichen</b> oder <b>Nummerierung</b>, können Sie das Format der Liste näher bestimmen.</p>
+						<li><b>Aufzählung</b> mit Markern - klicken Sie in der oberen Symbolleiste auf das Symbol <b>Aufzählungszeichen</b> <div class = "icon icon-bullets"></div></li>
+						<li><b>Nummerierte Liste</b> mit Zahlen oder Buchstaben - klicken Sie in der oberen Symbolleiste auf das Symbol <b>Nummerierte Liste</b> <div class = "icon icon-numbering"></div><p class="note"><b>Hinweis</b>: Mit dem schwarzen Pfeil neben dem Symbol <b>Aufzählungszeichen</b> oder <b>Nummerierung</b>, können Sie das Format der Liste näher bestimmen.</p>
 						</li>
 					</ul>
 				</li>

apps/presentationeditor/main/resources/help/de/UsageInstructions/FillObjectsSelectColor.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Fill the added objects with color, picture or texture, select colors for the slide background, autoshape fill and stroke, font." />
 		<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>Im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> sie haben die Möglichkeit für Folien, AutoFormen und DekoSchriften verschiedene Füllfarben und Hintergründe zu verwenden.</p>
 			<ol>
 			<li>Wählen Sie ein Objekt<ul>
-                    <li>Um die Hintergrundfarbe einer Folie zu ändern, wählen Sie die gewünschte Folie in der Folienliste aus. Die Registerkarte <img alt="Folieneinstellungen" src="../images/slide_settings_icon.png" /> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
-                    <li>Um die Füllung einer AutoForm zu ändern, klicken Sie mit der linken Maustaste auf die gewünschte AutoForm. Die Registerkarte <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
-                    <li>Um die Füllung einer DekoSchrift zu ändern, klicken Sie mit der linken Maustaste auf das gewünschte Textfeld. Die Registerkarte <img alt="TextArt-Einstellungen" src="../images/textart_settings_icon.png" /> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
+                    <li>Um die Hintergrundfarbe einer Folie zu ändern, wählen Sie die gewünschte Folie in der Folienliste aus. Die Registerkarte <div class = "icon icon-slide_settings_icon"></div> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
+                    <li>Um die Füllung einer AutoForm zu ändern, klicken Sie mit der linken Maustaste auf die gewünschte AutoForm. Die Registerkarte <div class = "icon icon-shape_settings_icon"></div> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
+                    <li>Um die Füllung einer DekoSchrift zu ändern, klicken Sie mit der linken Maustaste auf das gewünschte Textfeld. Die Registerkarte <div class = "icon icon-textart_settings_icon"></div> <b>Folieneinstellungen</b> wird in der rechten Menüleiste aktiviert.</li>
                 </ul>
 			</li>
 			<li>Gewünschte Füllung festlegen</li>
@@ -50,7 +51,7 @@
 					<li><b>Winkel</b> - stellen Sie den numerischen Wert für einen genauen Farbübergangswinkel ein.</li>
 					<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>

apps/presentationeditor/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/presentation-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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 Ihrer Präsentation 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/presentationeditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add an autoshape to your presentation and adjust its properties." />
 		<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>Eine AutoForm in eine Folie <b>einfügen</b> im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a>:</p>
 			<ol>
 				<li>Wählen Sie in der Folienliste links die Folie aus, der Sie eine AutoForm hinzufügen wollen.</li>
-				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <img alt="Form" src="../images/insertautoshape.png" /> <b>Form</b>.</li>
+				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <div class = "icon icon-insertautoshape"></div> <b>Form</b>.</li>
 				<li>Wählen Sie eine der verfügbaren Gruppen von AutoFormen: Standardformen, geformte Pfeile, Mathematik, Diagramme, Sterne &amp; Bänder, Legenden, Buttons, Rechtecke, Linien.</li>
 				<li>Klicken Sie in der gewählten Gruppe auf die gewünschte AutoForm.</li>
 				<li>Positionieren Sie den Mauszeiger an der Stelle, an der Sie eine Form hinzufügen möchten.<p class="note"><b>Hinweis</b>: Sie können klicken und ziehen, um die Form auszudehnen.</p>
@@ -28,7 +29,7 @@
 			</ol>
 			<hr />
             <h3>Einstellungen der AutoForm anpassen</h3>
-			<p>Einige Eigenschaften der AutoFormen können in der Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste geändert werden. Klicken Sie dazu auf die AutoForm und wählen Sie das Symbol <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> in der rechten Seitenleiste aus. Hier können die folgenden Eigenschaften geändert werden:</p>
+			<p>Einige Eigenschaften der AutoFormen können in der Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste geändert werden. Klicken Sie dazu auf die AutoForm und wählen Sie das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> in der rechten Seitenleiste aus. Hier können die folgenden Eigenschaften geändert werden:</p>
 			<p><img class="floatleft"alt="Registerkarte Formeinstellungen" src="../images/shapesettingstab.png" /></p>
 			<ul  style="margin-left: 280px;">
 			<li><b>Füllung</b> - zum Ändern der Füllung einer AutoForm. Folgende Optionen stehen Ihnen zur Verfügung:<ul>
@@ -47,17 +48,17 @@
     			</ul>
 			</li>
                 <li><b>Drehen</b> dient dazu die Form um 90 Grad im oder gegen den Uhrzeigersinn zu drehen oder die Form horizontal oder vertikal zu spiegeln. Wählen Sie eine der folgenden Optionen:<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 spiegeln (von links nach rechts)</li>
-                        <li><img alt="Vertikal spiegeln" src="../images/flipupsidedown.png" /> um die Form vertikal zu spiegeln (von oben nach unten)</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 spiegeln (von links nach rechts)</li>
+                        <li><div class = "icon icon-flipupsidedown"></div> um die Form vertikal zu spiegeln (von oben nach unten)</li>
                     </ul>
                 </li>
 			</ul>
 			<hr />
 			<p>Um die <b>erweiterte Einstellungen</b> der AutoForm zu ändern, klicken Sie mit der rechten Maustaste auf die Form und wählen Sie die Option <b>Form - erweiterte Einstellungen</b> im Menü aus, oder klicken Sie in der rechten Seitenleiste auf die Verknüpfung <b>Erweiterte Einstellungen anzeigen</b>. Das Fenster mit den Formeigenschaften wird geöffnet:</p>
             <p><img alt="Formeigenschaften - Registerkarte Größe" src="../images/shape_properties1.png" /></p>
-			<p>Über die Registerkarte <b>Größe</b> können Sie die <b>Breite</b> bzw. <b>Höhe</b> der AutoForm ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <img alt="Seitenverhältnis sperren" src="../images/constantproportions.png" /> aktivieren (in diesem Fall sieht das Symbol so aus <img alt="Symbol Seitenverhältnis sperren aktiviert" src="../images/constantproportionsactivated.png" />), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Deitenverhältnis der AutoForm wird beibehalten.</p>
+			<p>Über die Registerkarte <b>Größe</b> können Sie die <b>Breite</b> bzw. <b>Höhe</b> der AutoForm ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <div class = "icon icon-constantproportions"></div> aktivieren (in diesem Fall sieht das Symbol so aus <div class = "icon icon-constantproportionsactivated"></div>), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Deitenverhältnis der AutoForm wird beibehalten.</p>
             <p><img alt="Form - Erweiterte Einstellungen" src="../images/shape_properties5.png" /></p>
             <p>Die Registerkarte <b>Drehen</b> umfasst die folgenden Parameter:</p>
             <ul>
@@ -100,17 +101,17 @@
             <h3>AutoFormen mithilfe von Verbindungen anbinden</h3>
             <p>Sie können Autoformen mithilfe von Linien mit Verbindungspunkten verbinden, um Abhängigkeiten zwischen Objekten zu demonstrieren (z.B. wenn Sie ein Flussdiagramm erstellen wollen). Gehen Sie dazu vor wie folgt:</p>
             <ol>
-                <li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <img alt="Form" src="../images/insertautoshape.png" /> <b>Form</b>.</li>
+                <li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <div class = "icon icon-insertautoshape"></div> <b>Form</b>.</li>
                 <li>Wählen Sie die Gruppe <b>Linien</b> im Menü aus.<p><img alt="Formen - Linien" src="../images/connectors.png" /></p>
                 </li>
                 <li>Klicken Sie auf die gewünschte Form in der ausgewählten Gruppe (mit Ausnahme der letzten drei Formen, bei denen es sich nicht um Konnektoren handelt: <em>Kurve</em>, <em>Skizze</em> und <em>Freihand</em>).</li>
-                <li>Bewegen Sie den Mauszeiger über die erste AutoForm und klicken Sie auf einen der Verbindungspunkte <img alt="Verbindungspunkt" src="../images/connectionpoint.png" />, die auf dem Umriss der Form zu sehen sind.<p><img alt="Verbindungen setzen" src="../images/connectors_firstshape.png" /></p>
+                <li>Bewegen Sie den Mauszeiger über die erste AutoForm und klicken Sie auf einen der Verbindungspunkte <div class = "icon icon-connectionpoint"></div>, die auf dem Umriss der Form zu sehen sind.<p><div class = "big big-connectors_firstshape"></div></p>
                 </li>
-                <li>Bewegen Sie den Mauszeiger in Richtung der zweiten AutoForm und klicken Sie auf den gewünschten Verbindungspunkt auf dem Umriss der Form.<p><img alt="Verbindungen setzen" src="../images/connectors_secondshape.png" /></p>
+                <li>Bewegen Sie den Mauszeiger in Richtung der zweiten AutoForm und klicken Sie auf den gewünschten Verbindungspunkt auf dem Umriss der Form.<p><div class = "big big-connectors_secondshape"></div></p>
                 </li>
             </ol>
             <p>Wenn Sie die verbundenen AutoFormen verschieben, bleiben die Verbindungen an die Form gebunden und bewegen sich mit den Formen zusammen.</p>
-            <p><img alt="Verbundene AutoFormen verschieben" src="../images/connectors_moveshape.png" /></p>
+            <p><div class = "big big-connectors_moveshape"></div></p>
             <p>Alternativ können Sie die Verbindungen auch von den Formen lösen und an andere Verbindungspunkte anbinden.</p>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add a chart to your presentation and adjust its properties" />
 		<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>Positionieren Sie den Cursor an der Stelle, an der Sie ein Diagramm einfügen möchten.</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="Diagramm" src="../images/insertchart.png" /> <b>Diagramm</b>.</li>
+                <li>Klicken Sie in der oberen Symbolleiste auf das Symbol <div class = "icon icon-insertchart"></div> <b>Diagramm</b>.</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>
                     Wenn Sie Ihre Auswahl getroffen haben, öffnet sich das Fenster <b>Diagramm bearbeiten</b> und Sie können die gewünschten Daten mithilfe der folgenden Steuerelemente in die Zellen eingeben:
                     <ul>
-                        <li><img alt="Kopieren" src="../images/copy.png" /> und <img alt="Einfügen" src="../images/paste.png" /> - 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" /> - Vorgänge Rückgängig machen und Wiederholen.</li>
-                        <li><img alt="Funktion einfügen" src="../images/insertfunction.png" /> - 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" /> - Löschen und Hinzufügen von Dezimalstellen.</li>
+                        <li><div class = "icon icon-copy"></div> und <div class = "icon icon-paste"></div> - Kopieren und Einfügen der kopierten Daten.</li>
+                        <li><div class = "icon icon-undo1"></div> und <div class = "icon icon-redo1"></div> - Vorgänge Rückgängig machen und Wiederholen.</li>
+                        <li><div class = "icon icon-insertfunction"></div> - Einfügen einer Funktion.</li>
+                        <li><div class = "icon icon-decreasedec"></div> und <div class = "icon icon-increasedec"></div> - Löschen und Hinzufügen von Dezimalstellen.</li>
                         <li><img alt="Zahlenformat" src="../images/numberformat.png" /> - Zahlenformat ändern, d.h. das Format in dem die eingegebenen Zahlen in den Zellen dargestellt 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>
@@ -323,7 +324,7 @@
                 <p>Sie können <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">die Position des Diagramm</a> auf der Folie angeben, indem Sie das Diagram vertikal oder horizontal ziehen.</p>
             </li>
             </ol>
-            <p>Sie können einem Textplatzhalter auch ein Diagramm hinzufügen, indem Sie auf das Symbol <img alt="Diagramm Symbol" src="../images/placeholder_chart.png" /> <b>Diagramm</b> innen drücken und den gewünschten Diagrammtyp auswählen:</p>
+            <p>Sie können einem Textplatzhalter auch ein Diagramm hinzufügen, indem Sie auf das Symbol <div class = "icon icon-placeholder_chart"></div> <b>Diagramm</b> innen drücken und den gewünschten Diagrammtyp auswählen:</p>
             <p><img alt="Einem Textplatzhalter ein Diagramm hinzufügen" src="../images/placeholder_object.png" /></p>
             <p>Es ist auch möglich, einem Folienlayout ein Diagramm hinzuzufügen. Weitere Informationen finden Sie <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">hier</a>.</p>
             <hr />
@@ -335,15 +336,15 @@
             <p><img alt="3D-Diagramm" src="../images/3dchart.png" /></p>
             <hr />
             <h3>Diagrammeinstellungen anpassen</h3>
-            <img alt="Registerkarte Diagramme" src="../images/charttab.png" /><p>Diagrammgröße, -typ und -stil sowie die zur Erstellung des Diagramms verwendeten Daten, können in der rechten Seitenleiste geändert werden. Um das Menü 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" /> aus.</p>
-            <p>Im Abschnitt <b>Größe</b> können Sie Breite und Höhe des aktuellen Diagramms ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <img alt="Seitenverhältnis sperren" src="../images/constantproportions.png" /> aktivieren (in diesem Fall sieht das Symbol so aus <img alt="Symbol Seitenverhältnis sperren aktiviert" src="../images/constantproportionsactivated.png" />), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Seitenverhältnis des Diagramms wird beibehalten.</p>
+            <img alt="Registerkarte Diagramme" src="../images/charttab.png" /><p>Diagrammgröße, -typ und -stil sowie die zur Erstellung des Diagramms verwendeten Daten, können in der rechten Seitenleiste geändert werden. Um das Menü 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> aus.</p>
+            <p>Im Abschnitt <b>Größe</b> können Sie Breite und Höhe des aktuellen Diagramms ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <div class = "icon icon-constantproportions"></div> aktivieren (in diesem Fall sieht das Symbol so aus <div class = "icon icon-constantproportionsactivated"></div>), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Seitenverhältnis des Diagramms wird beibehalten.</p>
             <p>Im Abschnitt <b>Diagrammtyp ändern</b> können Sie den gewählten Diagrammtyp und -stil über die entsprechende Auswahlliste ändern.</p>
             <p>Um den gewünschten <b>Diagrammstil</b> auszuwählen, verwenden Sie im Abschnitt <b>Diagrammtyp ändern</b> die zweite Auswahlliste.</p>
             <p>Über die Schaltfläche <b>Daten ändern</b> können Sie das Fenster <b>Diagrammtools</b> öffnen und die Daten ändern (wie oben beschrieben).</p>
             <p class="note"><b>Hinweis</b>: Wenn Sie einen Doppelklick auf einem in Ihrer Präsentation enthaltenen Diagramm ausführen, öffnet sich das Fenster „Diagrammtools“.</p>
             <p>Die Option <b>Erweiterte Einstellungen anzeigen</b> in der rechten Seitenleiste ermöglicht das Öffnen des Fensters <b>Diagramm - Erweiterte Einstellungen</b>, über das Sie den alternativen Text festlegen können:</p>
             <p><img alt="Diagramme - Erweiterte Einstellungen" src="../images/chartsettings6.png" /></p>
-            <p>Wenn das Diagramm ausgewählt ist, ist rechts auch das Symbol <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. Klicken Sie auf dieses Symbol, um die Registerkarte <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">Formeinstellungen</a> in der rechten Seitenleiste zu öffnen und passen Sie <b>Füllung</b> und <b>Linienstärke</b> der Form an. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
+            <p>Wenn das Diagramm ausgewählt ist, ist rechts auch das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> verfügbar, da eine Form als Hintergrund für das Diagramm verwendet wird. Klicken Sie auf dieses Symbol, um die Registerkarte <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">Formeinstellungen</a> in der rechten Seitenleiste zu öffnen und passen Sie <b>Füllung</b> und <b>Linienstärke</b> der Form an. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
             <hr />
             <p>Um das hinzugefügte Diagramm zu <b>löschen</b>, wählen Sie es mit der linken Maustaste aus und drücken Sie die Taste <b>ENTF</b> auf Ihrer Tastatur.</p>
             <p>Informationen zum <b>Ausrichten</b> eines Diagramms auf der Folie oder zum <b>Anordnen</b> mehrerer Objekte, finden Sie im Abschnitt <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Objekte auf einer Folie ausrichten und anordnen</a>.</p>

apps/presentationeditor/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>
@@ -19,19 +20,19 @@
             <p>Eine Formel aus den Vorlagen einfügen:</p>
 			<ol>
                 <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>Operatoren</em>, <em>Matrizen</em>.</li>
                 <li>Klicken Sie im entsprechenden Vorlagensatz auf das gewünschte Symbol/die gewünschte Formel.</li>
 			</ol>
-            <p>Das ausgewählte Symbol/die ausgewählte Formel wird an der aktuellen Cursorposition eingefügt.</p><img alt="Formel einfügen" src="../images/insertedequation.png" /><p>Wenn der Rahmen des Formelfelds nicht angezeigt wird, klicken Sie auf eine beliebige Stelle innerhalb der Formel - der Rahmen wird als gestrichelte Linie dargestellt. Das Formelfeld kann auf der Folie beliebig <b>verschoben, in der Größe verändert oder gedreht</b> werden. Klicken Sie dazu auf den Rahmen des Formelfelds (der Rahmen wird alsdurchgezogene Linie dargestellt) und nutzen Sie die <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">entsprechenden Bedienelemente</a>.</p><img alt="Formel auswählen" src="../images/selectedequation.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.</p><div class = "big big-insertedequation"></div><p>Wenn der Rahmen des Formelfelds nicht angezeigt wird, klicken Sie auf eine beliebige Stelle innerhalb der Formel - der Rahmen wird als gestrichelte Linie dargestellt. Das Formelfeld kann auf der Folie beliebig <b>verschoben, in der Größe verändert oder gedreht</b> werden. Klicken Sie dazu auf den Rahmen des Formelfelds (der Rahmen wird alsdurchgezogene Linie dargestellt) und nutzen Sie die <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">entsprechenden Bedienelemente</a>.</p><div class = "big big-selectedequation"></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>
             <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><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>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><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>
@@ -44,7 +45,7 @@
             <h3>Formeln formatieren</h3>
             <p>Standardmäßig wird die Formel innerhalb des Textfelds horizontal zentriert und vertikal am oberen Rand des Textfelds ausgerichtet. Um die horizontale/vertikale Ausrichtung zu ändern, platzieren Sie den Cursor im Formelfeld (die Rahmen des Textfelds werden als gestrichelte Linien angezeigt) und verwenden Sie die <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">entsprechenden Symbole</a> auf der Registerkarte <b>Start</b>, auf der oberen Symbolleiste.</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 wählen Sie in der Registerkarte <b>Start</b> 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 möglich 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>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 möglich 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>
@@ -67,7 +68,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, klicken Sie auf die Umrandung der Formel (der Rahmen wird als durchgezogene Linie dargestellt) und drücken Sie dann auf Ihrer Tastatur auf <b>ENTF</b>.</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, klicken Sie auf die Umrandung der Formel (der Rahmen wird als durchgezogene Linie dargestellt) und drücken Sie dann auf Ihrer Tastatur auf <b>ENTF</b>.</p><div class = "big big-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/presentationeditor/main/resources/help/de/UsageInstructions/InsertHeadersFooters.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Fügen Sie die Fußzeilen sowie Datum und Uhrzeit, Foliennummer 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>
@@ -18,7 +19,7 @@
 			<p>Um eine Fußzeile einzufügen im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a>:</p>
 			<ol>
 			<li>öffnen Sie die Registerkarte <b>Einfügen</b>,</li>
-            <li>klicken Sie die Schaltfläche <img alt="" src="../images/header_footer_icon.png" /> <b>Fußzeile bearbeiten</b> in der oberen Symbolleiste an,</li>
+            <li>klicken Sie die Schaltfläche <div class = "icon icon-header_footer_icon"></div> <b>Fußzeile bearbeiten</b> in der oberen Symbolleiste an,</li>
             <li>das Fenster <b>Fußzeileneinstellungen</b> wird geöffnet. Markieren Sie die Kästchen mit den Daten, die Sie in die Fußzeile einfügen möchten. Die Änderungen werden im Vorschaufenster rechts angezeigt.
                 <ul>
                     <li>
@@ -41,13 +42,13 @@
             <li>Klicken Sie die Schaltfläche <b>Auf alle anwenden</b> an, um die Änderungen auf alle Folien anzuwenden, oder die Schaltfläche <b>Anwenden</b>, um die Änderungen nur für die aktive Folie anzunehmen.</li>
 			</ol>
             <p>Um das Datum und die Uhrzeit oder die Foliennummer schnell in der Fußzeile der aktiven Folie einzufügen, verwenden Sie die Optionen <b>Foliennummer anzeigen</b> und <b>Datum und Uhrzeit anzeigen</b> im Abschnitt <b>Folieneinstellungen</b> in der rechten Randleiste. Die aktivierten Einstellungen werden nur für die aktive Folie angenommen. Das eingefügte Datum und die Uhrzeit oder die Foliennummer können Sie später im Fenster <b>Fußzeileneinstellungen</b> konfigurieren.</p>
-            <p>Um die eingefügte Fußzeile zu bearbeiten, klicken Sie die Schaltfläche <img alt="Fußzeile bearbeiten - Symbol" src="../images/header_footer_icon.png" /> <b>Fußzeile bearbeiten</b> in der oberen Symbolleiste an, konfigurieren Sie die gewünschte Einstellungen im Fenster <b>Fußzeileneinstellungen</b> und klicken Sie auf <b>Anwenden</b> oder <b>Auf alle anwenden</b>, um die Änderungen zu speichern.</p>
+            <p>Um die eingefügte Fußzeile zu bearbeiten, klicken Sie die Schaltfläche <div class = "icon icon-header_footer_icon"></div> <b>Fußzeile bearbeiten</b> in der oberen Symbolleiste an, konfigurieren Sie die gewünschte Einstellungen im Fenster <b>Fußzeileneinstellungen</b> und klicken Sie auf <b>Anwenden</b> oder <b>Auf alle anwenden</b>, um die Änderungen zu speichern.</p>
             <h3>Das Datum und die Uhrzeit oder die Foliennummer im Textfeld einfügen</h3>
             <p>Sie können das Datum und die Uhrzeit oder die Foliennummer im aktiven Textfeld durch die entsprechenden Schaltflächen auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste einfügen.</p>
             <h5>Das Datum und die Uhrzeit einfügen</h5>
             <ol>
                 <li>Positionieren Sie den Mauscursor im Textfeld, wo Sie das Datum und die Uhrzeit einfügen möchten,</li>
-                <li>klicken Sie die Schaltfläche <img alt="Datum und Uhrzeit - Symbol" src="../images/date_time_icon.png" /> <b>Datum und Uhrzeit</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an,</li>
+                <li>klicken Sie die Schaltfläche <div class = "icon icon-date_time_icon"></div> <b>Datum und Uhrzeit</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an,</li>
                 <li>wählen Sie die gewünschte <b>Sprache</b> aus der Liste aus und bestimmen Sie das gewünschte <b>Format</b> für das Datum und die Uhrzeit im Fenster <b>Datum und Uhrzeit</b>,
                 <p><img alt="Datum und Uhrzeit - Einstellungen" src="../images/date_time_settings.png" /></p>
                 </li>
@@ -57,14 +58,14 @@
             <p>Das Datum und die Uhrzeit oder die Foliennummer werden entsprechend der Cursorposition eingefügt. Um das Datum und die Uhrzeit zu bearbeiten,</p>
             <ol>
                 <li>wählen Sie das eingefügte Datum und die Uhrzeit im Textfeld aus,</li>
-                <li>klicken Sie die Schaltfläche <img alt="Datum und Uhrzeit" src="../images/date_time_icon.png" /> <b>Datum und Uhrzeit</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an,</li>
+                <li>klicken Sie die Schaltfläche <div class = "icon icon-date_time_icon"></div> <b>Datum und Uhrzeit</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an,</li>
                 <li>wählen Sie das gewünschte Format im Fenster <b>Datum und Uhrzeit</b>,</li>
                 <li>klicken Sie auf <b>OK</b>.</li>
             </ol>
             <h5>Die Foliennummer einfügen</h5>
             <ol>
                 <li>Positionieren Sie den Mauscursor im Textfeld, wo Sie die Foliennummer einfügen möchten.</li>
-                <li>Klicken Sie die Schaltfläche <img alt="Foliennummer - Symbol" src="../images/slide_number_icon.png" /> Foliennummer auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an.</li>
+                <li>Klicken Sie die Schaltfläche <div class = "icon icon-slide_number_icon"></div> Foliennummer auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste an.</li>
                 <li>Markieren Sie das Kästchen <b>Foliennummer</b> im Fenster <b>Fußzeileneinstellungen</b>.</li>
                 <li>Klicken Sie auf <b>OK</b>, um die Änderungen anzunehmen.</li>
             </ol>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add an image to your presentation and adjust its size and position." />
 		<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 @@
 			<p>Ein Bild in eine Folie <b>einfügen</b>:</p>
 			<ol>
 				<li>Markieren Sie mit dem Cursor die Folie in der Folienliste links, in die Sie ein Bild einfügen möchten.</li>
-				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <img alt="Bild" src="../images/image.png" /> <b>Bild</b>.</li>
+				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf <div class = "icon icon-image"></div> <b>Bild</b>.</li>
 				<li>Wählen Sie eine der folgenden Optionen, um das Bild hochzuladen:<ul>
                         <li>Mit der Option <b>Bild aus Datei</b> öffnen Sie das Standarddialogfenster zur Dateiauswahl. Durchsuchen Sie die Festplatte Ihres Computers nach der gewünschten Bilddatei und klicken Sie auf <b>Öffnen</b>.
                             <p class="note">Im <em>Online-Editor</em> können Sie mehrere Bilder gleichzeitig auswählen.</p></li>
@@ -31,9 +32,9 @@
 			</ol>
 			<hr />
             <h3>Bildeinstellungen anpassen</h3>
-			<p>Klicken Sie mit der linken Maustaste ein Bild an und wählen Sie rechts das Symbol <b>Bildeinstellungen</b> <img alt="Bildeinstellungen" src="../images/image_settings_icon.png" /> aus, um die rechte Seitenleiste zu aktivieren. Hier finden Sie die folgenden Abschnitte:</p><img alt="Registerkarte Bildeinstellungen" src="../images/imagesettingstab.png" /><p><b>Größe</b> - um <b>Breite</b> und <b>Höhe</b> des aktuellen Bildes einzusehen oder bei Bedarf die <b>Standardgröße</b> des Bildes wiederherzustellen.</p>
+			<p>Klicken Sie mit der linken Maustaste ein Bild an und wählen Sie rechts das Symbol <b>Bildeinstellungen</b> <div class = "icon icon-image_settings_icon"></div> aus, um die rechte Seitenleiste zu aktivieren. Hier finden Sie die folgenden Abschnitte:</p><img alt="Registerkarte Bildeinstellungen" src="../images/imagesettingstab.png" /><p><b>Größe</b> - um <b>Breite</b> und <b>Höhe</b> des aktuellen Bildes einzusehen oder bei Bedarf die <b>Standardgröße</b> des Bildes wiederherzustellen.</p>
 			
-            <p>Mit der Schaltfläche <b>Zuschneiden</b> können Sie das Bild zuschneiden. Klicken Sie auf die Schaltfläche <b>Zuschneiden</b>, um die Ziehpunkte zu aktivieren, die an den Bildecken und in der Mitte der Bildseiten angezeigt werden. Ziehen Sie die Ziehpunkte manuell, um den Zuschneidebereich festzulegen. Wenn Sie den Mauszeiger über den Zuschneidebereich bewegen, ändert sich der Zeiger in das <img alt="Pfeil" src="../images/arrow.png" /> Symbol und Sie können die Auswahl in die gewünschte Position ziehen.</p>
+            <p>Mit der Schaltfläche <b>Zuschneiden</b> können Sie das Bild zuschneiden. Klicken Sie auf die Schaltfläche <b>Zuschneiden</b>, um die Ziehpunkte zu aktivieren, die an den Bildecken und in der Mitte der Bildseiten angezeigt werden. Ziehen Sie die Ziehpunkte manuell, um den Zuschneidebereich festzulegen. Wenn Sie den Mauszeiger über den Zuschneidebereich bewegen, ändert sich der Zeiger in das <div class = "icon icon-arrow"></div> Symbol und Sie können die Auswahl in die gewünschte Position ziehen.</p>
             <ul>
                 <li>Um eine einzelne Seite zuzuschneiden, ziehen Sie den Ziehpunkt in der Mitte dieser Seite.</li>
                 <li>Um zwei benachbarte Seiten gleichzeitig zuzuschneiden, ziehen Sie einen der Ziehpunkte in den Ecken.</li>
@@ -49,19 +50,19 @@
             <p><b>Bild ersetzen</b> - das aktuelle Bild durch ein anderes Bild ersetzen und die entsprechende Quelle auswählen. Die folgenden Optionen stehen Ihnen zur Verfügung: <b>Aus Datei</b> oder <b>Aus URL</b>. Die Option <b>Bild ersetzen</b> ist auch im Rechtsklickmenü verfügbar.</p>
             <p><b>Drehen</b> dient dazu das Bild um 90 Grad im oder gegen den Uhrzeigersinn zu drehen und die Form horizontal oder vertikal zu spiegeln. Wählen Sie eine der folgenden Optionen:</p>
             <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 spiegeln (von links nach rechts)</li>
-                <li><img alt="Vertikal spiegeln" src="../images/flipupsidedown.png" /> um das Bild vertikal zu spiegeln (von oben nach unten)</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 spiegeln (von links nach rechts)</li>
+                <li><div class = "icon icon-flipupsidedown"></div> um das Bild vertikal zu spiegeln (von oben nach unten)</li>
             </ul>
-            <p>Wenn Sie das Bild ausgewählt haben, ist rechts auch das Symbol <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> verfügbar. Klicken Sie auf dieses Symbol, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und passen Sie Form, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Linientyp</b></a>, Größe und Farbe an oder ändern Sie die Form und wählen Sie im Menü <b>AutoForm ändern</b> eine neue Form aus. Die Form des Bildes ändert sich entsprechend Ihrer Auswahl.</p>
+            <p>Wenn Sie das Bild ausgewählt haben, ist rechts auch das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> verfügbar. Klicken Sie auf dieses Symbol, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und passen Sie Form, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Linientyp</b></a>, Größe und Farbe an oder ändern Sie die Form und wählen Sie im Menü <b>AutoForm ändern</b> eine neue Form aus. Die Form des Bildes ändert sich entsprechend Ihrer Auswahl.</p>
             <p><img alt="Registerkarte Formeinstellungen" src="../images/right_image_shape.png" /></p>
 			<hr />
 			<p>Um die <b>erweiterten Einstellungen</b> des Bildes zu ändern, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie die Option <b>Bild - erweiterte Einstellungen</b> im Menü aus, oder klicken Sie in der rechten Seitenleiste auf die Verknüpfung <b>Erweiterte Einstellungen anzeigen</b>. Das Fenster mit den Bildeigenschaften wird geöffnet:</p>
             <p><img alt="Bildeigenschaften" src="../images/image_properties.png" /></p>
 			<p>In der Registerkarte <b>positionieren</b> können Sie die folgenden Bildeigenschaften festlegen:</p>
 			<ul>
-				<li><b>Größe</b> - mit diesen Optionen können Sie die Breite bzw. Höhe des Bildes ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <img alt="Seitenverhältnis sperren" src="../images/constantproportions.png" /> aktivieren (in diesem Fall sieht das Symbol so aus <img alt="Symbol Seitenverhältnis sperren aktiviert" src="../images/constantproportionsactivated.png" />), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Bildseitenverhältnis wird beibehalten. Um die Standardgröße des hinzugefügten Bildes wiederherzustellen, klicken Sie auf <b>Standardgröße</b>.</li>
+				<li><b>Größe</b> - mit diesen Optionen können Sie die Breite bzw. Höhe des Bildes ändern. Wenn Sie die Funktion <b>Seitenverhältnis sperren</b> <div class = "icon icon-constantproportions"></div> aktivieren (in diesem Fall sieht das Symbol so aus <div class = "icon icon-constantproportionsactivated"></div>), werden Breite und Höhe gleichmäßig geändert und das ursprüngliche Bildseitenverhältnis wird beibehalten. Um die Standardgröße des hinzugefügten Bildes wiederherzustellen, klicken Sie auf <b>Standardgröße</b>.</li>
 				<li><b>Position</b> - über diese Option können Sie die Position des Bildes auf der Folie ändern (die Position wird im Verhältnis zum oberen und linken Rand der Folie berechnet).</li>
 			</ul>
             <p><img alt="Bildeigenschaften: Drehen" src="../images/image_properties2.png" /></p>

apps/presentationeditor/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>
@@ -15,13 +16,13 @@
         </div>
         <h1>Symbole und Sonderzeichen einfügen</h1>
         <p>
-            Während des Arbeitsprozesses im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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>:
+            Während des Arbeitsprozesses im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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/presentationeditor/main/resources/help/de/UsageInstructions/InsertTables.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add a table to your presentation and adjust its properties" />
 		<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>Wählen Sie die gewünschte Folie aus, in die Sie eine Tabelle einfügen möchten.</li>
                 <li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Einfügen</b>.</li>
-				<li>Klicken Sie auf das Symbol <img alt="Tabelle" src="../images/inserttable.png" /> <b>Tabelle</b>.</li>
+				<li>Klicken Sie auf das Symbol <div class = "icon icon-inserttable"></div> <b>Tabelle</b>.</li>
 				<li>Wählen Sie die gewünschte Option für die Erstellung einer Tabelle:<ul>
 						<li><p>Tabelle mit einer vordefinierten Zellenanzahl (maximal 10 x 8 Zellen)</p>
 						<p>Wenn Sie schnell eine Tabelle erstellen möchten, wählen Sie einfach die Anzahl der Zeilen (maximal 8) und Spalten (maximal 10) aus.</p></li>
@@ -31,7 +32,7 @@
 			</ol>
 			<p>Sie können die <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">Position der Tabelle</a> auf der Folie bestimmen, indem Sie diese vertikal oder horizontal verschieben.</p>
 			<hr />
-            <h3>Tabelleneinstellungen anpassen</h3><img class="floatleft"alt="Registerkarte Tabelleneinstellungen" src="../images/tablesettingstab.png" /><p>Die meisten Tabelleneigenschaften sowie die Struktur, können Sie in der rechten Seitenleiste ändern. Um diese zu aktivieren, klicken Sie auf die Tabelle und wählen Sie rechts das Symbol <b>Tabelleneinstellungen</b> <img alt="Tabelleneinstellungen" src="../images/table_settings_icon.png" /> aus.</p>
+            <h3>Tabelleneinstellungen anpassen</h3><img class="floatleft"alt="Registerkarte Tabelleneinstellungen" src="../images/tablesettingstab.png" /><p>Die meisten Tabelleneigenschaften sowie die Struktur, können Sie in der rechten Seitenleiste ändern. Um diese zu aktivieren, klicken Sie auf die Tabelle und wählen Sie rechts das Symbol <b>Tabelleneinstellungen</b> <div class = "icon icon-table_settings_icon"></div> aus.</p>
 			<p>In den Abschnitten <b>Zeilen</b> und <b>Spalten</b>, haben Sie die Möglichkeit, bestimmte Zeilen/Spalten hervorzuheben, eine bestimmte Formatierung anzuwenden oder die Zeilen/Spalten in den verschiedenen Hintergrundfarben einzufärben, um sie klar zu unterscheiden. Folgende Auswahlmöglichkeiten stehen zur Verfügung:</p>
 			<ul style="margin-left: 280px;">
 				<li><b>Kopfzeile</b> - die erste Zeile der Tabelle wird durch eine bestimmte Formatierung hervorgehoben.</li>
@@ -42,14 +43,14 @@
 				<li><b>Gebänderte Spalten</b> - gerade und ungerade Spalten werden unterschiedlich formatiert.</li>
 			</ul>
 			<p>Im Abschnitt <b>Aus Vorlage wählen</b> können Sie einen vordefinierten Tabellenstil auswählen. Jede Vorlage kombiniert bestimmte Formatierungsparameter, wie Hintergrundfarbe, Rahmenstil, Zellen-/Spaltenformat usw. Abhängig von den in den Abschnitten <b>Zeilen</b> oder <b>Spalten</b> ausgewählten Optionen, werden die Vorlagen unterschiedlich dargestellt. Wenn Sie zum Beispiel die Option <b>Kopfzeile</b> im Abschnitt <b>Zeilen</b> und die Option <b>Gebänderte Spalten</b> im Abschnitt <b>Spalten</b> aktiviert haben, enthält die angezeigte Vorlagenliste nur Vorlagen mit Kopfzeile und gebänderten Spalten:</p>
-			<p><img alt="Vorlagenliste" src="../images/templateslist.png" /></p>
+			<p><div class = "big big-templateslist"></div></p>
 			<p>Im Abschnitt <b>Rahmenstil</b> können Sie die angewandte Formatierung ändern, die der gewählten Vorlage entspricht. Sie können die ganze Tabelle auswählen oder einen bestimmten Zellenbereich, dessen Formatierung Sie ändern möchten, und alle Parameter manuell bestimmen.</p>
 			<ul>
-				<li><b>Rahmen</b> - legen Sie die Stärke des Rahmens in der Liste <img alt="Liste Rahmenstärke" src="../images/bordersize.png" /> fest (oder wählen Sie die Option <b>Kein Rahmen</b>) sowie den gewünschten Rahmenstil und wählen Sie die <b>Rahmenfarbe</b> aus den verfügbaren Paletten aus:<p><img alt="Liste Rahmenstil" src="../images/bordertype.png" /></p>
+				<li><b>Rahmen</b> - legen Sie die Stärke des Rahmens in der Liste <div class = "big big-bordersize"></div> fest (oder wählen Sie die Option <b>Kein Rahmen</b>) sowie den gewünschten Rahmenstil und wählen Sie die <b>Rahmenfarbe</b> aus den verfügbaren Paletten aus:<p><div class = "big big-bordertype"></div></p>
 				</li>
 				<li><b>Hintergrundfarbe</b> - wählen Sie eine Farbe für den Hintergrund innerhalb der ausgewählten Zellen.</li>
 			</ul>
-			<p>Im Abschnitt <b>Zeilen &amp; Spalten</b> <img alt="Zeilen &amp; Spalten" src="../images/rowsandcolumns.png" /> können Sie folgende Vorgänge durchzuführen:</p>
+			<p>Im Abschnitt <b>Zeilen &amp; Spalten</b> <div class = "icon icon-rowsandcolumns"></div> können Sie folgende Vorgänge durchzuführen:</p>
 			<ul>
 				<li><b>Auswählen</b> - eine Zeile, Spalte, Zelle (abhängig von der Cursorposition) oder die ganze Tabelle auswählen.</li>
 				<li><b>Einfügen</b> eine neue Zeile unter oder über der ausgewählten Zeile bzw. eine neue Spalte links oder rechts von der ausgewählten Spalte einfügen.</li>

apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertText.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert and Format your 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>
@@ -19,10 +20,10 @@
 			    <ul>
 			        <li>Textabschnitt in den entsprechenden Textplatzhalter auf der Folie einfügen. Platzieren Sie dazu den Cursor im Platzhalter und geben Sie Ihren Text ein oder fügen Sie diesen mithilfe der Tastenkombination <b>STRG+V</b> ein.</li>
 			        <li>Textabschnitt an beliebiger Stelle auf einer Folie einfügen. Fügen Sie ein Textfeld (rechteckiger Rahmen, in den ein Text eingegeben werden kann) oder ein TextArtfeld (Textfeld mit einer vordefinierten Schriftart und Farbe, das die Anwendung von Texteffekten ermöglicht) in die Folie ein. Abhängig vom ausgewählten Textobjekt haben Sie folgende Möglichkeiten:<ul>
-                                    <li>Um ein Textfeld hinzuzufügen, klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> 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">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 in den Registerkarten <b>Start</b> oder <b>Einfügen</b> 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">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 Registerkarte <b>Einfügen</b> und klicken Sie dann auf die gewünschte Stilvorlage - das TextArt-Objekt wird in der Mitte der Folie 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 Registerkarte <b>Einfügen</b> und klicken Sie dann auf die gewünschte Stilvorlage - das TextArt-Objekt wird in der Mitte der Folie eingefügt. Markieren Sie den Standardtext innerhalb des Textfelds mit der Maus und ersetzen Sie diesen durch Ihren eigenen Text.</li>
                                 </ul>
 			        </li>
                     <li>Einen Textabschnitt in eine AutoForm einfügen. Wählen Sie eine Form aus und geben Sie Ihren Text ein.</li>
@@ -36,9 +37,9 @@
             <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/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">verschieben, drehen und dessen Größe ändern</a>.</li>
-                <li>Um das Textfeld zu bearbeiten, <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">mit einer Füllung zu versehen</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shapestroke" onclick="onhyperlinkclick(this)">Rahmenlinien zu ändern</a>, das rechteckige Feld mit einer anderen Form zu <b>ersetzen</b> oder auf <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">Formen - erweiterte Einstellungen</a> zuzugreifen, 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/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">mit einer Füllung zu versehen</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shapestroke" onclick="onhyperlinkclick(this)">Rahmenlinien zu ändern</a>, das rechteckige Feld mit einer anderen Form zu <b>ersetzen</b> oder auf <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">Formen - erweiterte Einstellungen</a> zuzugreifen, 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 ein <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Textfeld auf einer Folie auszurichten, zu drehen oder zu spiegeln</a> oder Textfelder mit anderen Objekten zu verknüpfen, klicken Sie mit der rechten Maustaste auf den Feldrand und nutzen Sie die entsprechende Option im geöffneten Kontextmenü.</li>
-				<li>Um <b>Textspalten</b> in einem Textfeld zu erzeugen, klicken Sie auf das entsprechende Symbol <img alt="Spalte einfügen Symbol" src="../images/insert_columns.png" /> in der Symbolleiste für Textformatierung und wählen Sie die gewünschte Option aus, oder klicken Sie mit der rechten Maustaste auf den Feldrand, klicken Sie auf die Option <b>Form - Erweiterte Einstellungen</b> und wechseln Sie im Fenster <b>Form - Erweiterte Einstellungen</b> in die Registerkarte <a href="../UsageInstructions/InsertAutoshapes.htm#columns" onclick="onhyperlinkclick(this)"><b>Spalten</b></a>.</li>
+				<li>Um <b>Textspalten</b> in einem Textfeld zu erzeugen, klicken Sie auf das entsprechende Symbol <div class = "icon icon-insert_columns"></div> in der Symbolleiste für Textformatierung und wählen Sie die gewünschte Option aus, oder klicken Sie mit der rechten Maustaste auf den Feldrand, klicken Sie auf die Option <b>Form - Erweiterte Einstellungen</b> und wechseln Sie im Fenster <b>Form - Erweiterte Einstellungen</b> in die Registerkarte <a href="../UsageInstructions/InsertAutoshapes.htm#columns" onclick="onhyperlinkclick(this)"><b>Spalten</b></a>.</li>
             </ul>
             <h3 id="formattext">Text im Textfeld formatieren</h3>
             <p>Markieren Sie den Text im Textfeld, um die Eigenschaften zu verändern. Wenn der Text markiert ist, werden alle Rahmenlinien als gestrichelte Linien angezeigt.</p>
@@ -48,23 +49,23 @@
 			<p>Der Text kann auf vier Arten horizontal ausgerichtet werden: linksbündig, rechtsbündig, zentriert oder im Blocksatz. Textobjekt einfügen:</p>
 			<ol>
 				<li>Bewegen Sie den Cursor an die Stelle, an der Sie den Text ausrichten möchten (dabei kann es sich um eine neue Zeile oder um bereits eingegebenen Text handeln).</li>
-				<li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b> und klicken Sie auf <b>Horizontale Ausrichtung</b> <img alt="Horizontale Ausrichtung" src="../images/horizontalalign.png" />, um die Auswahlliste zu öffnen.</li>
+				<li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b> und klicken Sie auf <b>Horizontale Ausrichtung</b> <div class = "icon icon-horizontalalign"></div>, um die Auswahlliste zu öffnen.</li>
 				<li>Wählen Sie den gewünschten Ausrichtungstyp:<ul>
-						<li>Die Option <b>Text linksbündig ausrichten</b> <img alt="Linksbündig ausrichten" src="../images/alignleft.png" /> lässt den linken Textrand parallel zum linken Rand des Textbereichs verlaufen (der rechte Textrand bleibt unausgerichtet).</li>
-						<li>Durch die Option <b>Text zentrieren</b> <img alt="Zentriert ausrichten" src="../images/aligncenter.png" /> wird der Text im Textbereich zentriert ausgerichtet (die rechte und linke Seite bleiben unausgerichtet).</li>
-						<li>Die Option <b>Text rechtsbündig ausrichten</b> <img alt="Rechtsbündig ausrichten" src="../images/alignright.png" /> lässt den rechten Textrand parallel zum rechten Rand des Textbereichs verlaufen (der linke Textrand bleibt unausgerichtet).</li>
-						<li>Die Option <b>Im Blocksatz ausrichten</b> <img alt="Blocksatz" src="../images/justify.png" /> lässt den Text parallel zum linken und rechten Rand des Textbereichs verlaufen (zusätzlicher Abstand wird hinzugefügt, wo es notwendig ist, um die Ausrichtung beizubehalten).</li>
+						<li>Die Option <b>Text linksbündig ausrichten</b> <div class = "icon icon-alignleft"></div> lässt den linken Textrand parallel zum linken Rand des Textbereichs verlaufen (der rechte Textrand bleibt unausgerichtet).</li>
+						<li>Durch die Option <b>Text zentrieren</b> <div class = "icon icon-aligncenter"></div> wird der Text im Textbereich zentriert ausgerichtet (die rechte und linke Seite bleiben unausgerichtet).</li>
+						<li>Die Option <b>Text rechtsbündig ausrichten</b> <div class = "icon icon-alignright"></div> lässt den rechten Textrand parallel zum rechten Rand des Textbereichs verlaufen (der linke Textrand bleibt unausgerichtet).</li>
+						<li>Die Option <b>Im Blocksatz ausrichten</b> <div class = "icon icon-justify"></div> lässt den Text parallel zum linken und rechten Rand des Textbereichs verlaufen (zusätzlicher Abstand wird hinzugefügt, wo es notwendig ist, um die Ausrichtung beizubehalten).</li>
 					</ul>
 				</li>
 			</ol>
 			<p>Der Text kann vertikal auf drei Arten ausgerichtet werden: oben, mittig oder unten. Textobjekt einfügen:</p>
 			<ol>
 				<li>Bewegen Sie den Cursor an die Stelle, an der Sie den Text ausrichten möchten (dabei kann es sich um eine neue Zeile oder um bereits eingegebenen Text handeln).</li>
-				<li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b> und klicken Sie auf <b>Vertikale Ausrichtung</b> <img alt="Vertikal ausrichten" src="../images/verticalalign.png" />, um die Auswahlliste zu öffnen.</li>
+				<li>Wechseln Sie in der oberen Symbolleiste auf die Registerkarte <b>Start</b> und klicken Sie auf <b>Vertikale Ausrichtung</b> <div class = "icon icon-verticalalign"></div>, um die Auswahlliste zu öffnen.</li>
 				<li>Wählen Sie den gewünschten Ausrichtungstyp:<ul>
-						<li>Über die Option <b>Text am oberen Rand ausrichten</b> <img alt="Oben ausrichten" src="../images/aligntop.png" /> richten Sie den Text am oberen Rand des Textfelds aus.</li>
-						<li>Über die Option <b>Text mittig ausrichten</b> <img alt="Mittig ausrichten" src="../images/alignmiddle.png" /> richten Sie den Text im Textfeld mittig aus.</li>
-						<li>Über die Option <b>Text am unteren Rand ausrichten</b> <img alt="Unten ausrichten" src="../images/alignbottom.png" /> richten Sie den Text am unteren Rand des Textfelds aus.</li>
+						<li>Über die Option <b>Text am oberen Rand ausrichten</b> <div class = "icon icon-aligntop"></div> richten Sie den Text am oberen Rand des Textfelds aus.</li>
+						<li>Über die Option <b>Text mittig ausrichten</b> <div class = "icon icon-alignmiddle"></div> richten Sie den Text im Textfeld mittig aus.</li>
+						<li>Über die Option <b>Text am unteren Rand ausrichten</b> <div class = "icon icon-alignbottom"></div> richten Sie den Text am unteren Rand des Textfelds aus.</li>
 					</ul>
 				</li>
 			</ol>
@@ -78,57 +79,57 @@
 			<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>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. Klicken Sie auf den Abwärtspfeil neben dem Symbol, um eine <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">Farbe auszuwählen</a>.</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 Textmarkers 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>.</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 Textmarkers 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>.</td>
 				</tr>
 				<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>
@@ -138,7 +139,7 @@
 			<p>Gehen Sie dazu vor wie folgt:</p>
 			<ol style="margin-left: 280px;">
 				<li>Postitionieren Sie den Cursor innerhalb des gewünschten Absatzes oder wählen Sie mehrere Absätze mit der Maus aus.</li>
-				<li>Nutzen Sie die entsprechenden Felder der Registerkarte <img alt="Texteinstellungen" src="../images/text_settings_icon.png" /> <b>Texteinstellungen</b> in der rechten Seitenleiste, um die gewünschten Ergebnisse zu erzielen:<ul>
+				<li>Nutzen Sie die entsprechenden Felder der Registerkarte <div class = "icon icon-text_settings_icon"></div> <b>Texteinstellungen</b> in der rechten Seitenleiste, um die gewünschten Ergebnisse zu erzielen:<ul>
 						<li><b>Zeilenabstand</b> - Zeilenhöhe für die Textzeilen im Absatz festlegen. Sie können unter zwei Optionen wählen: <b>mehrfach</b> (mithilfe dieser Option wird ein Zeilenabstand festgelegt, der ausgehend vom einfachen Zeilenabstand vergrößert wird (Größer als 1)), <b>genau</b> (mithilfe dieser Option wird ein fester Zeilenabstand festgelegt). Sie können den gewünschten Wert im Feld rechts angeben.</li>
 						<li><b>Absatzabstand</b> - Auswählen wie groß die Absätze sind, die zwischen Textzeilen und Abständen angezeigt werden.<ul>
                             <li><b>Vor</b> - Abstand vor dem Absatz festlegen.</li>
@@ -148,18 +149,18 @@
 					</ul>
 				</li>
 			</ol>
-			<p>Um den aktuellen Zeilenabstand zu ändern, können Sie auch auf der Registerkarte <b>Start</b> das Symbol <b>Zeilenabstand</b> <img alt="Zeilenabstand" src="../images/linespacing.png" /> anklicken und den gewünschten Wert aus der Liste auswählen: 1,0; 1,15; 1,5; 2,0; 2,5; oder 3,0 Zeilen.</p>
-		    <p>Um den Absatzversatz von der linken Seite des Textfelds zu ändern, positionieren Sie den Cursor innerhalb des gewünschten Absatzes oder wählen Sie mehrere Absätze mit der Maus aus und klicken Sie auf das entsprechende Symbole auf der Registerkarte <b>Start</b> in der oberen Symbolleiste: <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>Um den aktuellen Zeilenabstand zu ändern, können Sie auch auf der Registerkarte <b>Start</b> das Symbol <b>Zeilenabstand</b> <div class = "icon icon-linespacing"></div> anklicken und den gewünschten Wert aus der Liste auswählen: 1,0; 1,15; 1,5; 2,0; 2,5; oder 3,0 Zeilen.</p>
+		    <p>Um den Absatzversatz von der linken Seite des Textfelds zu ändern, positionieren Sie den Cursor innerhalb des gewünschten Absatzes oder wählen Sie mehrere Absätze mit der Maus aus und klicken Sie auf das entsprechende Symbole auf der Registerkarte <b>Start</b> in der oberen Symbolleiste: <b>Einzug verkleinern</b> <div class = "icon icon-decreaseindent"></div> und <b>Einzug vergrößern</b> <div class = "icon icon-increaseindent"></div>.</p>
 		    <hr />
-		    <p>Außerdem können Sie die <b>erweiterten Einstellungen</b> des Absatzes ändern. Positionieren Sie den Mauszeiger im gewünschten Absatz - die Registerkarte <img alt="Texteinstellungen" src="../images/text_settings_icon.png" /> <b>Texteinstellungen</b> wird in der rechten Seitenleiste aktiviert. Klicken Sie auf den Link <b>Erweiterte Einstellungen anzeigen</b>. Das Fenster mit den Absatzeigenschaften wird geöffnet:</p><img alt="Absatzeigenschaften - Registerkarte Einzüge &amp; Position" src="../images/textadvancedsettings1.png" /><p>In der Registerkarte <b>Einzüge &amp; Position</b> können Sie den Abstand <b>der ersten Zeile</b> vom linken <a href="../UsageInstructions/InsertAutoshapes.htm#internalmargins" onclick="onhyperlinkclick(this)">inneren Rand</a> des Textbereiches sowie den Abstand des Absatzes vom <b>linken</b> und <b>rechten</b> inneren Rand des Textbereiches ändern.</p>
-            <p>Alternativ können Sie die Einzüge auch mithilfe des horizontalen <b>Lineals</b> festlegen.</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>Außerdem können Sie die <b>erweiterten Einstellungen</b> des Absatzes ändern. Positionieren Sie den Mauszeiger im gewünschten Absatz - die Registerkarte <div class = "icon icon-text_settings_icon"></div> <b>Texteinstellungen</b> wird in der rechten Seitenleiste aktiviert. Klicken Sie auf den Link <b>Erweiterte Einstellungen anzeigen</b>. Das Fenster mit den Absatzeigenschaften wird geöffnet:</p><img alt="Absatzeigenschaften - Registerkarte Einzüge &amp; Position" src="../images/textadvancedsettings1.png" /><p>In der Registerkarte <b>Einzüge &amp; Position</b> können Sie den Abstand <b>der ersten Zeile</b> vom linken <a href="../UsageInstructions/InsertAutoshapes.htm#internalmargins" onclick="onhyperlinkclick(this)">inneren Rand</a> des Textbereiches sowie den Abstand des Absatzes vom <b>linken</b> und <b>rechten</b> inneren Rand des Textbereiches ändern.</p>
+            <p>Alternativ können Sie die Einzüge auch mithilfe des horizontalen <b>Lineals</b> festlegen.</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 inneren Rand des Textfelds für die erste Zeile eines Absatzes festlegen.</li>
-                <li>Mit der Einzugsmarke für den <b>hängenden Einzug</b> <img alt="Hängende Einzugsmarke" src="../images/hanging.png" /> lässt sich der Versatz vom linken inneren 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 inneren Seitenrand der Textbox festlegen.</li>
-                <li>Die Marke <b>Rechter Einzug</b> <img alt="Rechte Einzugsmarke" src="../images/right_indent.png" /> wird genutzt, um den Versatz des Absatzes vom rechten inneren Seitenrand der Textbox festzulegen.</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 inneren Rand des Textfelds 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 inneren 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 inneren Seitenrand der Textbox festlegen.</li>
+                <li>Die Marke <b>Rechter Einzug</b> <div class = "icon icon-right_indent"></div> wird genutzt, um den Versatz des Absatzes vom rechten inneren Seitenrand der Textbox festzulegen.</li>
             </ul>
-            <p class="note"><b>Hinweis</b>: Wenn die Lineale nicht angezeigt werden, wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie in der oberen rechten Ecke auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> und deaktivieren Sie die Option <b>Lineale ausblenden</b>.</p><img alt="Absatzeigenschaften - Registerkarte Schriftart" src="../images/textadvancedsettings2.png" /><p>Die Registerkarte <b>Schriftart</b> enthält folgende Parameter:</p>
+            <p class="note"><b>Hinweis</b>: Wenn die Lineale nicht angezeigt werden, wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie in der oberen rechten Ecke auf das Symbol <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> und deaktivieren Sie die Option <b>Lineale ausblenden</b>.</p><img alt="Absatzeigenschaften - Registerkarte Schriftart" src="../images/textadvancedsettings2.png" /><p>Die Registerkarte <b>Schriftart</b> enthält folgende Parameter:</p>
 			<ul>
 				<li><b>Durchgestrichen</b> - durchstreichen einer Textstelle mithilfe einer Linie.</li>
 				<li><b>Doppelt durchgestrichen</b> - durchstreichen einer Textstelle mithilfe einer doppelten Linie.</li>
@@ -174,22 +175,22 @@
 			    <li><b>Tabulatorposition</b> - Festlegen von benutzerdefinierten Tabstopps. Geben Sie den gewünschten Wert in das angezeigte Feld ein, über die Pfeiltasten können Sie den Wert präzise anpassen, klicken Sie anschließend auf <b>Festlegen</b>. Ihre benutzerdefinierte Tabulatorposition wird der Liste im unteren Feld hinzugefügt.</li>
 			    <li>Die Standardeinstellung für <b>Tabulatoren</b> ist auf 1,25 cm festgelegt. Sie können den Wert verkleinern oder vergrößern, nutzen Sie dafür die Pfeiltasten oder geben Sie den gewünschten Wert in das dafür vorgesehene Feld ein.</li>
 			    <li><b>Ausrichtung</b> - legt den gewünschten Ausrichtungstyp für jede der Tabulatorpositionen in der obigen Liste fest. Wählen Sie die gewünschte Tabulatorposition in der Liste aus, Ihnen stehen die Optionen <b>Linksbündig</b>, <b>Zentriert</b> oder <b>Rechtsbündig</b> zur Verfügung, klicken sie anschließend auf <b>Festlegen</b>.<ul>
-			            <li><b>Linksbündig</b> - 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> - 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> - der Text wird ab der Position des Tabstopps rechtsbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach links. 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><b>Linksbündig</b> - 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> - 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> - der Text wird ab der Position des Tabstopps rechtsbündig ausgerichtet; d.h. der Text verschiebt sich bei der Eingabe nach links. Ein solcher Tabstopp wird auf dem horizontalen Lineal durch die Markierung <div class = "icon icon-tabstopright_marker"></div> angezeigt.</li>
 			        </ul>
 			        <p>Um Tabstopps aus der Liste zu löschen, wählen Sie einen Tabstopp und drücken Sie <b>Entfernen</b> oder <b>Alle entfernen</b>.</p>
 			    </li>
 			</ul>
             <p>Alternativ können Sie die Tabstopps auch mithilfe des horizontalen Lineals festlegen.</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, um den gewünschten Tabstopp auszuwählen: <b>Links</b> <img alt="Linksbündiger Tabstopp" src="../images/tabstopleft.png" />, <b>Zentriert</b> <img alt="Zentrierter Tabstopp" src="../images/tabstopcenter.png" /> oder <b>Rechts</b> <img alt="Rechtsbündiger Tabstopp" src="../images/tabstopright.png" />.</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>
-                    <p class="note"><b>Hinweis</b>: Wenn die Lineale nicht angezeigt werden, wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie in der oberen rechten Ecke auf das Symbol <b>Ansichtseinstellungen</b> <img alt="Einstellungen anzeigen" src="../images/viewsettingsicon.png" /> und deaktivieren Sie die Option <b>Lineale ausblenden</b>.</p>
+                <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, um den gewünschten Tabstopp auszuwählen: <b>Links</b> <div class = "icon icon-tabstopleft"></div>, <b>Zentriert</b> <div class = "icon icon-tabstopcenter"></div> oder <b>Rechts</b> <div class = "icon icon-tabstopright"></div>.</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><div class = "big big-tabstops_ruler"></div></p>
+                    <p class="note"><b>Hinweis</b>: Wenn die Lineale nicht angezeigt werden, wechseln Sie in die Registerkarte <b>Start</b>, klicken Sie in der oberen rechten Ecke auf das Symbol <b>Ansichtseinstellungen</b> <div class = "icon icon-viewsettingsicon"></div> und deaktivieren Sie die Option <b>Lineale ausblenden</b>.</p>
                 </li>
             </ol>
             <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>
             <ul>
                 <li>Ä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.</li>

apps/presentationeditor/main/resources/help/de/UsageInstructions/ManageSlides.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add new blank slides, duplicate, move or delete them" />
 		<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>Standardmäßig besteht eine neu erstellte Präsentation aus einer leeren <em>Titelfolie</em>. Im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> sie haben nun die Möglichkeit neue Folien zu erstellen, eine Folie zu kopieren, um sie an anderer Stelle in der Folienliste einzufügen, Folien zu duplizieren, Folien mit dem Cursor in eine andere Position zu ziehen, um die Reihenfolge zu verändern, überflüssige Folien zu löschen, ausgewählte Folien auszublenden.</p>
 			<p><b>Erstellen einer neuen Folie mit <em>Titel und Inhalt:</em></b></p>
 			<ul>
-				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf das Symbol <img alt="Folie hinzufügen" src="../images/addslide.png" /> <b>Folie hinzufügen</b> oder</li>
+				<li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf das Symbol <div class = "icon icon-addslide"></div> <b>Folie hinzufügen</b> oder</li>
 				<li>klicken Sie mit der rechten Maustaste auf eine beliebige Folie und wählen Sie die Option <b>Neue Folie</b> im Kontextmenü aus oder</li>
                 <li>nutzen Sie die Tastenkombination <b>STRG+V</b>.</li>
 			</ul>
             <p><b>Erstellen einer neuen Folie mit einem anderen Layout:</b></p>
             <ol>
-                <li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf den Pfeil neben dem Symbol <img alt="Folie hinzufügen" src="../images/addslide.png" /> <b>Folie hinzufügen</b>.</li>
+                <li>Klicken Sie in der oberen Symbolleiste in den Registerkarten <b>Start</b> oder <b>Einfügen</b> auf den Pfeil neben dem Symbol <div class = "icon icon-addslide"></div> <b>Folie hinzufügen</b>.</li>
                 <li>Wählen Sie eine Folie mit dem gewünschten Layout im Menü aus.<p class="note"><b>Hinweis</b>: Sie können das Layout der hinzugefügten Folie jederzeit ändern. Weitere Informationen finden Sie im Abschnitt <a href="../UsageInstructions/SetSlideParameters.htm#changelayout" onclick="onhyperlinkclick(this)">Folienparameter festlegen</a>.</p>
                 </li>
             </ol>
@@ -57,7 +58,7 @@
                 <li>Wählen Sie die Option <b>Folie ausblenden</b> im Kontextmenü.</li>
             </ol>
             <p>Die Foliennummer, die der entsprechenden Folie entspricht, wird durchgestrichen. Um die ausgeblendete Folie wieder normal darzustellen, klicken Sie erneut auf die Option <b>Folie ausblenden</b>.</p>
-            <p><img alt="Ausgeblendete Folie" src="../images/hidden_slide.png" /></p>
+            <p><div class = "big big-hidden_slide"></div></p>
             <p class="note"><b>Hinweis</b>: Nutzen Sie diese Option, wenn Sie Ihrer Zielgruppe bestimmte Folien nicht grundsätzlich vorführen wollen, aber diese bei Bedarf dennoch einbinden können. Wenn Sie die Präsentation in der <a href="../UsageInstructions/PreviewPresentation.htm#presenter" onclick="onhyperlinkclick(this)"><b>Referentenansicht</b> starten</a>, werden alle vorhandenen Folien in der Liste angezeigt, wobei die Foliennummern der ausgeblendeten Folien durchgestrichen sind. Wenn Sie anderen eine ausgeblendete Folie zeigen möchten, klicken Sie in der Folienliste mit der Maus auf die Folie - die Folie wird angezeigt.</p>
             <p><b>Alle vorhandenen Folien auswählen:</b></p>
 			<ol>

apps/presentationeditor/main/resources/help/de/UsageInstructions/ManipulateObjects.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Move, rotate, resize and reshape autoshapes, images, charts." />
 		<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,24 +18,24 @@
 			<p>Im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> sie können die verschiedene Objekte auf einer Folie mithilfe der speziellen Ziehpunkte manuell verschieben, drehen und ihre Größe ändern. Alternativ können Sie über die rechte Seitenleiste oder das Fenster <b>Erweiterte Einstellungen</b> genaue Werte für die Abmessungen und die Position von Objekten festlegen.</p>			
             <p class="note"><b>Hinweis</b>: <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">Hier</a> finden Sie eine Übersicht über die gängigen Tastenkombinationen für die Arbeit mit Objekten.</p>
             <h3>Größe von Objekten ändern</h3>
-			<p>Um die Größe von <b>AutoFormen, Bildern, Diagrammen, Tabellen oder Textboxen</b> zu ändern, ziehen Sie mit der Maus an den kleinen Quadraten <img alt="Quadrat" src="../images/resize_square.png" /> an den Rändern des entsprechenden Objekts. Um das ursprünglichen Seitenverhältnis der ausgewählten Objekte während der Größenänderung beizubehalten, halten Sie Taste <b>UMSCHALT</b> gedrückt und ziehen Sie an einem der Ecksymbole.</p>
-			<p><img alt="Seitenverhältnis sperren" src="../images/maintain_proportions.png" /></p>
+			<p>Um die Größe von <b>AutoFormen, Bildern, Diagrammen, Tabellen oder Textboxen</b> zu ändern, ziehen Sie mit der Maus an den kleinen Quadraten <div class = "icon icon-resize_square"></div> an den Rändern des entsprechenden Objekts. Um das ursprünglichen Seitenverhältnis der ausgewählten Objekte während der Größenänderung beizubehalten, halten Sie Taste <b>UMSCHALT</b> gedrückt und ziehen Sie an einem der Ecksymbole.</p>
+			<p><div class = "big big-maintain_proportions"></div></p>
 			<p>Um die präzise Breite und Höhe eines <b>Diagramms</b> festzulegen, wählen Sie es auf der Folie aus und navigieren Sie über den Bereich <b>Größe</b>, der in der rechten Seitenleiste aktiviert wird.</p>
 			<p>Um die präzise Abmessungen eines <b>Bildes</b> oder einer <b>AutoForm</b> festzulegen, klicken Sie mit der rechten Maustaste auf das gewünschte Objekt und wählen Sie die Option <b>Bild/AutoForm - Erweiterte Einstellungen</b> aus dem Menü aus. Legen Sie benötigte Werte in die Registerkarte <b>Größe</b> im Fenster <b>Erweiterte Einstellungen</b> fest und drücken Sie auf <b>OK</b>.</p>
 			<h3>Die Form einer AutoForm ändern</h3>
-			<p>Bei der Änderung einiger Formen, z.B. geformte Pfeile oder Legenden, ist auch dieses gelbe diamantförmige Symbol <img alt="Gelber Diamant" src="../images/yellowdiamond.png" /> verfügbar. Über dieses Symbol können verschiedene Komponenten einer Form geändert werden, z.B. die Länge des Pfeilkopfes.</p>
-			<p><img alt="Form einer AutoForm ändern" src="../images/reshaping.png" /></p>
+			<p>Bei der Änderung einiger Formen, z.B. geformte Pfeile oder Legenden, ist auch dieses gelbe diamantförmige Symbol <div class = "icon icon-yellowdiamond"></div> verfügbar. Über dieses Symbol können verschiedene Komponenten einer Form geändert werden, z.B. die Länge des Pfeilkopfes.</p>
+			<p><div class = "big big-reshaping"></div></p>
 			<h3>Objekte verschieben</h3>
-			<p>Um die Position von <b>AutoFormen, Bildern, Diagrammen, Tabellen und Textfeldern</b> zu ändern, nutzen Sie das Symbol <img alt="Pfeil" src="../images/arrow.png" />, das eingeblendet wird, wenn Sie den Mauszeiger über die AutoForm bewegen. Ziehen Sie das Objekt in die gewünschten Position, ohne die Maustaste loszulassen. Um ein Objekt in 1-Pixel-Stufen zu verschieben, halten Sie die Taste <b>STRG</b> gedrückt und verwenden Sie die Pfeile auf der Tastatur. Um ein Objekt strikt horizontal/vertikal zu bewegen und zu verhindern, dass es sich perpendikular bewegt, halten Sie die <b>UMSCHALT</b>-Taste beim Ziehen gedrückt.</p>
+			<p>Um die Position von <b>AutoFormen, Bildern, Diagrammen, Tabellen und Textfeldern</b> zu ändern, nutzen Sie das Symbol <div class = "icon icon-arrow"></div>, das eingeblendet wird, wenn Sie den Mauszeiger über die AutoForm bewegen. Ziehen Sie das Objekt in die gewünschten Position, ohne die Maustaste loszulassen. Um ein Objekt in 1-Pixel-Stufen zu verschieben, halten Sie die Taste <b>STRG</b> gedrückt und verwenden Sie die Pfeile auf der Tastatur. Um ein Objekt strikt horizontal/vertikal zu bewegen und zu verhindern, dass es sich perpendikular bewegt, halten Sie die <b>UMSCHALT</b>-Taste beim Ziehen gedrückt.</p>
 			<p>Um die exakte Position eines <b>Bildes</b> festzulegen, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie die Option <b>Bild - Erweiterte Einstellungen</b> aus dem Menü aus. Legen Sie gewünschten Werte im Bereich <b>Position</b> im Fenster <b>Erweiterte Einstellungen</b> fest und drücken Sie auf <b>OK</b>.</p>
 			<h3>Objekte drehen</h3>
-			<p>Um <b>AutoFormen, Bilder und Textfelder</b> manuell zu drehen, positionieren Sie den Cursor auf dem Drehpunkt <img alt="Drehpunkt" src="../images/greencircle.png" /> und ziehen Sie das Objekt im Uhrzeigersinn oder gegen Uhrzeigersinn in die gewünschte Position. Um ein Objekt in 15-Grad-Stufen zu drehen, halten Sie die <b>UMSCHALT</b>-Taste bei der Drehung gedrückt.</p>
-            <p>Sobald Sie das gewünschte Objekt ausgewählt haben, wird der Abschnitt <b>Drehen</b> in der rechten Seitenleiste aktiviert. Hier haben Sie die Möglichkeit das Objekt um 90 Grad im/gegen den Uhrzeigersinn zu drehen oder das Objekt horizontal/vertikal zu drehen. Um die Funktion zu öffnen, klicken Sie rechts auf das Symbol <b>Formeinstellungen</b> <img alt="Formeinstellungen" src="../images/shape_settings_icon.png" /> oder das Symbol <b>Bildeinstellungen</b> <img alt="Bildeinstellungen" src="../images/image_settings_icon.png" />. Wählen Sie eine der folgenden Optionen:</p>
+			<p>Um <b>AutoFormen, Bilder und Textfelder</b> manuell zu drehen, positionieren Sie den Cursor auf dem Drehpunkt <div class = "icon icon-greencircle"></div> und ziehen Sie das Objekt im Uhrzeigersinn oder gegen Uhrzeigersinn in die gewünschte Position. Um ein Objekt in 15-Grad-Stufen zu drehen, halten Sie die <b>UMSCHALT</b>-Taste bei der Drehung gedrückt.</p>
+            <p>Sobald Sie das gewünschte Objekt ausgewählt haben, wird der Abschnitt <b>Drehen</b> in der rechten Seitenleiste aktiviert. Hier haben Sie die Möglichkeit das Objekt um 90 Grad im/gegen den Uhrzeigersinn zu drehen oder das Objekt horizontal/vertikal zu drehen. Um die Funktion zu öffnen, klicken Sie rechts auf das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> oder das Symbol <b>Bildeinstellungen</b> <div class = "icon icon-image_settings_icon"></div>. Wählen Sie eine der folgenden Optionen:</p>
             <ul>
-                <li><img alt="Gegen den Uhrzeigersinn drehen" src="../images/rotatecounterclockwise.png" /> - die Form um 90 Grad gegen den Uhrzeigersinn drehen</li>
-                <li><img alt="Im Uhrzeigersinn drehen" src="../images/rotateclockwise.png" /> - die Form um 90 Grad im Uhrzeigersinn drehen</li>
-                <li><img alt="Horizontal spiegeln" src="../images/fliplefttoright.png" /> - die Form horizontal spiegeln (von links nach rechts)</li>
-                <li><img alt="Vertikal spiegeln" src="../images/flipupsidedown.png" /> - die Form vertikal spiegeln (von oben nach unten)</li>
+                <li><div class = "icon icon-rotatecounterclockwise"></div> - die Form um 90 Grad gegen den Uhrzeigersinn drehen</li>
+                <li><div class = "icon icon-rotateclockwise"></div> - die Form um 90 Grad im Uhrzeigersinn drehen</li>
+                <li><div class = "icon icon-fliplefttoright"></div> - die Form horizontal spiegeln (von links nach rechts)</li>
+                <li><div class = "icon icon-flipupsidedown"></div> - die Form vertikal spiegeln (von oben nach unten)</li>
             </ul>
             <p>Alternativ können Sie mit der rechten Maustaste auf das ausgewählte Objekte klicken, wählen Sie anschließend im Kontextmenü die Option <b>Drehen</b> aus und nutzen Sie dann eine der verfügbaren Optionen zum Drehen.</p>
             <p>Um den Text in einem genau festgelegten Winkel zu drehen, klicken Sie auf das Symbol <b>Erweiterte Einstellungen anzeigen</b> in der rechten Seitenleiste und wählen Sie dann die Option <b>Drehen</b> im Fenster <b>Erweiterte Einstellungen</b>. Geben Sie den erforderlichen Wert in Grad in das Feld <b>Winkel</b> ein und klicken Sie dann auf <b>OK</b>.</p>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Im Präsentationseditor können Sie eine kürzlich bearbeitete Präsentation öffnen, eine neue Präsentation erstellen oder zur Liste der vorhandenen Präsentationen 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>Präsentation</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, legen Sie den Namen fest, wählen Sie das gewünschte Format (PPTX, Presentation template (POTX), ODP, OTP, PDF or 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/presentationeditor/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 Ihrer Präsentation 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/presentationeditor/main/resources/help/de/UsageInstructions/PreviewPresentation.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Preview your presentation" />
 		<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,11 +18,11 @@
             <h3>Vorschau beginnen</h3>
 			<p>Bildschirmpräsentation der aktuellen Präsentation im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a>:</p>
             <ul>
-                <li>Klicken Sie in der Registerkarte <b>Start</b> oder links in der Statusleiste auf das Symbol <b>Bildschirmpräsentation</b> <img alt="Bildschirmpräsentation" src="../images/startpreview.png" /> oder</li>
+                <li>Klicken Sie in der Registerkarte <b>Start</b> oder links in der Statusleiste auf das Symbol <b>Bildschirmpräsentation</b> <div class = "icon icon-startpreview"></div> oder</li>
                 <li>wählen Sie in der Folienliste links eine bestimmte Folie aus, klicken Sie diese mit der rechten Maustaste an und wählen Sie die Option <b>Bildschirmpräsentation starten</b> im Kontextmenü aus.</li>
             </ul>
             <p>Die Bildschirmpräsentation wird ab der aktuellen Folie gestartet.</p>
-            <p>Klicken Sie alternativ in der Registerkarte <b>Start</b> auf das Symbol <b>Bildschirmpräsentation</b> <img alt="Bildschirmpräsentation" src="../images/startpreview.png" /> und wählen Sie eine der verfügbaren Optionen:</p>
+            <p>Klicken Sie alternativ in der Registerkarte <b>Start</b> auf das Symbol <b>Bildschirmpräsentation</b> <div class = "icon icon-startpreview"></div> und wählen Sie eine der verfügbaren Optionen:</p>
             <ul>
                 <li><b>Von Beginn an</b> - die Bildschirmpräsentation aber der ersten Folie starten</li>
                 <li><b>Ab aktueller Folie</b> - die Bildschirmpräsentation beginnt bei der aktuellen Folie</li>
@@ -33,30 +34,30 @@
             <p>Im <b>Vorschaumodus</b> stehen Ihnen folgende Steuerelemente in der unteren linken Ecke zur Verfügung:</p>
             <p><img alt="Steuerelemente für die Vorschau" src="../images/preview_mode.png" /></p>
             <ul>
-                <li><b>Vorherige Folie</b> <img alt="Vorherige Folie" src="../images/previousslide.png" /> - zur vorherigen Folie zurückkehren.</li>
-                <li><b>Bildschirmpräsentation pausieren</b> <img alt="Bildschirmpräsentation pausieren" src="../images/pausepresentation.png" /> - die Vorschau wird angehalten. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <img alt="Bildschirmpräsentation fortsetzen" src="../images/startpresentation.png" />.</li>
-                <li><b>Bildschirmpräsentation fortsetzen</b> <img alt="Bildschirmpräsentation fortsetzen" src="../images/startpresentation.png" /> - die Vorschau wird fortgesetzt. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <img alt="Bildschirmpräsentation pausieren" src="../images/pausepresentation.png" />.</li>
-                <li><b>Nächste Folie</b> <img alt="Nächste Folie" src="../images/nextslide.png" /> - wechseln Sie in die nächste Folie.</li>
+                <li><b>Vorherige Folie</b> <div class = "icon icon-previousslide"></div> - zur vorherigen Folie zurückkehren.</li>
+                <li><b>Bildschirmpräsentation pausieren</b> <div class = "icon icon-pausepresentation"></div> - die Vorschau wird angehalten. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <div class = "icon icon-startpresentation"></div>.</li>
+                <li><b>Bildschirmpräsentation fortsetzen</b> <div class = "icon icon-startpresentation"></div> - die Vorschau wird fortgesetzt. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <div class = "icon icon-pausepresentation"></div>.</li>
+                <li><b>Nächste Folie</b> <div class = "icon icon-nextslide"></div> - wechseln Sie in die nächste Folie.</li>
                 <li><b>Foliennummer</b> - Anzeige der aktuellen Foliennummer sowie der Gesamtzahl von Folien in der Präsentation. Um im Vorschaumodus zu einer bestimmten Folie überzugehen, klicken Sie auf die <b>angezeigte Foliennummer</b>, geben Sie die gewünschte Foliennummer in das geöffnete Fenster ein und drücken Sie die <b>Eingabetaste</b>.</li>
-                <li>Über die Schaltfläche <b>Vollbildmodus</b> <img alt="Vollbild" src="../images/fullscreen.png" /> können Sie in die Vollbildansicht wechseln.</li>
-                <li>Über die Schaltfläche <b>Vollbildmodus verlassen</b> <img alt="Vollbildmodus verlassen" src="../images/exitfullscreen.png" /> können Sie die Vollbildansicht verlassen.</li>
-                <li>Über die Schaltfläche <b>Bildschirmpräsentation beenden</b> <img alt="Bildschirmpräsentation beenden" src="../images/closepreview.png" /> können Sie den Präsentationsmodus verlassen.</li>
+                <li>Über die Schaltfläche <b>Vollbildmodus</b> <div class = "icon icon-fullscreen"></div> können Sie in die Vollbildansicht wechseln.</li>
+                <li>Über die Schaltfläche <b>Vollbildmodus verlassen</b> <div class = "icon icon-exitfullscreen"></div> können Sie die Vollbildansicht verlassen.</li>
+                <li>Über die Schaltfläche <b>Bildschirmpräsentation beenden</b> <div class = "icon icon-closepreview"></div> können Sie den Präsentationsmodus verlassen.</li>
             </ul>
 			<p>Alternativ können Sie im Präsentationsmodus auch mit den <a href="../HelpfulHints/KeyboardShortcuts.htm#preview" onclick="onhyperlinkclick(this)">Tastenkombinationen</a> zwischen den Folien wechseln.</p>
             <h3 id="presenter">Referentenansicht</h3>
             <p><b>Referentenansicht</b> - die Präsentation wird auf einem Bildschirm im Vollbildmodus angezeigt und auf dem anderen Bildschirm wird die „Sprecheransicht“ mit den Notizen wiedergegeben. Die Notizen für jede Folie werden unter dem Folienvorschaubereich angezeigt.</p>
-            <p>Nutzen Sie die Tasten <img alt="Vorherige Folie" src="../images/previousslide.png" /> und <img alt="Nächste Folie" src="../images/nextslide.png" /> oder klicken Sie im linken Seitenbereich auf die entsprechende Folie in der Liste. Foliennummer von ausgeblendeten Folien sind in der Liste durchgestrichen. Wenn Sie anderen eine ausgeblendete Folie zeigen möchten, klicken Sie in der Folienliste mit der Maus auf die Folie - die Folie wird angezeigt.</p>
+            <p>Nutzen Sie die Tasten <div class = "icon icon-previousslide"></div> und <div class = "icon icon-nextslide"></div> oder klicken Sie im linken Seitenbereich auf die entsprechende Folie in der Liste. Foliennummer von ausgeblendeten Folien sind in der Liste durchgestrichen. Wenn Sie anderen eine ausgeblendete Folie zeigen möchten, klicken Sie in der Folienliste mit der Maus auf die Folie - die Folie wird angezeigt.</p>
             <p>Die folgenden Steuerelemente stehen Ihnen unterhalb des Folienvorschaubereichs zur Verfügung:</p>
             <p><img alt="Steuerelemente Präsentationsmodus" src="../images/presenter_mode.png" /></p>
             <ul>
                 <li><b>Timer</b> - zeigt die seit Beginn der Präsentation vergangene Zeit im Format <em>hh.mm.ss</em> an.</li>
-                <li><b>Bildschirmpräsentation pausieren</b> <img alt="Bildschirmpräsentation pausieren" src="../images/pausepresentation.png" /> - die Vorschau wird angehalten. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <img alt="Bildschirmpräsentation fortsetzen" src="../images/startpresentation.png" />.</li>
-                <li><b>Bildschirmpräsentation fortsetzen</b> <img alt="Bildschirmpräsentation fortsetzen" src="../images/startpresentation.png" /> - die Vorschau wird fortgesetzt. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <img alt="Bildschirmpräsentation pausieren" src="../images/pausepresentation.png" />.</li>
+                <li><b>Bildschirmpräsentation pausieren</b> <div class = "icon icon-pausepresentation"></div> - die Vorschau wird angehalten. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <div class = "icon icon-startpresentation"></div>.</li>
+                <li><b>Bildschirmpräsentation fortsetzen</b> <div class = "icon icon-startpresentation"></div> - die Vorschau wird fortgesetzt. Wird diese Schaltfläche angeklickt, wandelt sich der Cursor zu <div class = "icon icon-pausepresentation"></div>.</li>
                 <li><b>Zurücksetzen</b> - Timer auf Null zurücksetzen.</li>
-                <li><b>Vorherige Folie</b> <img alt="Vorherige Folie" src="../images/previousslide.png" /> - zur vorherigen Folie zurückkehren.</li>
-                <li><b>Nächste Folie</b> <img alt="Nächste Folie" src="../images/nextslide.png" /> - wechseln Sie in die nächste Folie.</li>
+                <li><b>Vorherige Folie</b> <div class = "icon icon-previousslide"></div> - zur vorherigen Folie zurückkehren.</li>
+                <li><b>Nächste Folie</b> <div class = "icon icon-nextslide"></div> - wechseln Sie in die nächste Folie.</li>
                 <li><b>Foliennummer</b> - Anzeige der aktuellen Foliennummer sowie der Gesamtzahl von Folien in der Präsentation.</li>
-                <li><b>Pointer</b> <img alt="Pointer" src="../images/pointer.png" /> - Ausgewählte Elemente während der Präsentation hervorheben. Wenn diese Option aktiviert ist, sieht der Cursor aus wie folgt: <img alt="Pointer" src="../images/pointer_enabled.png" />. Um auf bestimmte Objekte zu zeigen, bewegen Sie den Mauszeiger über den Vorschaubereich der Folie und bewegen Sie den Pointer über die Folie. Der Pointer wird wie folgt angezeigt: <img alt="Pointer" src="../images/pointer_screen.png" />. Um diese Option zu deaktivieren, klicken Sie erneut auf <img alt="Pointer" src="../images/pointer_enabled.png" />.</li>
+                <li><b>Pointer</b> <div class = "icon icon-pointer"></div> - Ausgewählte Elemente während der Präsentation hervorheben. Wenn diese Option aktiviert ist, sieht der Cursor aus wie folgt: <div class = "icon icon-pointer_enabled"></div>. Um auf bestimmte Objekte zu zeigen, bewegen Sie den Mauszeiger über den Vorschaubereich der Folie und bewegen Sie den Pointer über die Folie. Der Pointer wird wie folgt angezeigt: <div class = "icon icon-pointer_screen"></div>. Um diese Option zu deaktivieren, klicken Sie erneut auf <div class = "icon icon-pointer_enabled"></div>.</li>
                 <li><b>Bildschirmpräsentation beenden</b> - <b>Präsentationsmodus</b> verlassen.</li>
             </ul>			
 		</div>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Save, print and download your presentations 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 <b>Online-</b><a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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>Aktuelle Präsentation 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>Aktuelle Präsentation 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/presentationeditor/main/resources/help/de/UsageInstructions/SetSlideParameters.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Set slide parameters: select background fill, themes, color schemes, slide layouts" />
 		<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>Folienparameter festlegen</h1>
 			<p>Um Ihre Präsentation zu personalisieren im <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a>, können Sie ein Thema und ein Farbschema sowie die Foliengröße und -ausrichtung für die gesamte Präsentation auswählen, Hintergrundfarbe oder Folienlayout für jede einzelne Folie ändern und Übergänge zwischen den Folien hinzufügen. Es ist außerdem möglich Notizen zu jeder Folie einzufüllen, die hilfreich sein können, wenn Sie die Präsentation in der <b>Referentenansicht</b> wiedergeben.</p>
 			<ul>
-			<li>Über die Vorlagen in <b>Themen</b> können Sie das Design der Präsentation schnell ändern, insbesondere den Hintergrund der Folien, vordefinierte Schriftarten für Titel und Texte sowie das Farbschema, das für die Präsentationselemente verwendet wird. <b>Um ein Thema für die Präsentation zu wählen</b>, klicken Sie auf die gewünschte Themenvorlage auf der rechten Seite der oberen Symbolleiste in der Registerkarte <b>Start</b>. Wenn Sie nicht im Vorfeld bestimmte Folien ausgewählt haben, wird das gewählte Thema auf alle Folien angewendet.<p><img alt="Themengalerie" src="../images/themes.png" /></p>
+			<li>Über die Vorlagen in <b>Themen</b> können Sie das Design der Präsentation schnell ändern, insbesondere den Hintergrund der Folien, vordefinierte Schriftarten für Titel und Texte sowie das Farbschema, das für die Präsentationselemente verwendet wird. <b>Um ein Thema für die Präsentation zu wählen</b>, klicken Sie auf die gewünschte Themenvorlage auf der rechten Seite der oberen Symbolleiste in der Registerkarte <b>Start</b>. Wenn Sie nicht im Vorfeld bestimmte Folien ausgewählt haben, wird das gewählte Thema auf alle Folien angewendet.<p><div class = "big big-themes"></div></p>
             <p>Um das ausgewählte Thema für eine oder mehrere Folien zu ändern, klicken Sie mit der rechten Maustaste auf die ausgewählten Folien in der Liste (oder klicken Sie mit der rechten Maustaste auf eine Folie im Bearbeitungsbereich), wählen Sie im Kontextmenü die Option <b>Design ändern</b> und wählen Sie das gewünschte Thema aus.</p>
 			</li>
-			<li>Der <b>Farbentwurf</b> beeinflusst die vordefinierten Farben für die Präsentationselemente (Schriftarten, Linien, Füllungen usw.) und ermöglicht eine einheitliche Farbgebung für die gesamte Präsentation. <b>Um den Farbentwurf zu ändern</b>, klicken Sie auf das Symbol <img alt="Farbentwurf ändern" src="../images/changecolorscheme.png" /> <b>Farbentwurf ändern</b> in der Registerkarte <b>Start</b> und wählen Sie den gewünschten Entwuf aus dem Listenmenü aus. Der ausgewählte Entwurf wird auf alle Folien angewendet.<p><img alt="Farbentwürfe" src="../images/colorscheme.png" /></p>
+			<li>Der <b>Farbentwurf</b> beeinflusst die vordefinierten Farben für die Präsentationselemente (Schriftarten, Linien, Füllungen usw.) und ermöglicht eine einheitliche Farbgebung für die gesamte Präsentation. <b>Um den Farbentwurf zu ändern</b>, klicken Sie auf das Symbol <div class = "icon icon-changecolorscheme"></div> <b>Farbentwurf ändern</b> in der Registerkarte <b>Start</b> und wählen Sie den gewünschten Entwuf aus dem Listenmenü aus. Der ausgewählte Entwurf wird auf alle Folien angewendet.<p><img alt="Farbentwürfe" src="../images/colorscheme.png" /></p>
 			</li>
-			<li>Um die <b>Foliengröße für die ganze Präsentation zu ändern</b>, klicken Sie auf das Symbol <img alt="Foliengröße wählen" src="../images/selectslidesizeicon.png" /> <b>Foliengröße wählen</b>  in der Registerkarte <b>Start</b> und wählen Sie die gewünschte Option im Listenmenü aus. Folgende Optionen stehen Ihnen zur Auswahl:<ul>
+			<li>Um die <b>Foliengröße für die ganze Präsentation zu ändern</b>, klicken Sie auf das Symbol <div class = "icon icon-selectslidesizeicon"></div> <b>Foliengröße wählen</b>  in der Registerkarte <b>Start</b> und wählen Sie die gewünschte Option im Listenmenü aus. Folgende Optionen stehen Ihnen zur Auswahl:<ul>
 			    <li>eine der zwei Voreinstellungen - <b>Standard (4:3)</b> oder <b>Breitbildschirm (16:9)</b>,</li>
 			    <li>die Option <b>Erweiterte Einstellungen</b>. Klicken Sie auf diese Option, öffnet sich das Fenster <b>Einstellungen Foliengröße</b> und Sie können eine der verfügbaren Voreinstellungen auswählen oder eine <b>benutzerdefinierte</b> Größe festlegen, durch die Angabe der gewünschten <b>Breite</b> und <b>Höhe</b>.<p><img alt="Einstellungen Foliengröße" src="../images/slidesizesettingswindow.png" /></p>
 			    <p>Verfügbare Voreinstellungen: Die verfügbaren Voreinstellungen sind Standard (4:3), Breitbild (16:9), Breitbild (16:10), Briefpapier (8.5x11 in), Ledger (11x17 in), A3 Papier (297x420 mm), A4 (210x297 mm), B4 (ICO) Papier (250x353 mm), B5 (ICO) Papier (176x250 mm), 35 mm Folien, Overhead, Banner.</p>
@@ -46,7 +47,7 @@
 			<li>Durch <b>Übergänge</b> wird Ihre Präsentation dynamischer. Diese helfen Ihnen sich die Aufmerksamkeit des Publikums zu sichern. <b>Einen Übergang hinzufügen:</b><ol>
 				<li>Wählen Sie die Folien, auf die Sie einen Übergang einfügen wollen links in der Folienliste aus.</li>
 				<li>wählen Sie einen Übergang im Listenmenü <b>Effekt</b> in der Registerkarte <b>Folieneinstellungen</b>,
-				<p class="note">Um die Registerkarte <b>Folieneinstellungen</b> zu öffnen, klicken Sie im Folienbearbeitungsbereich auf das Symbol <b>Folieneinstellungen</b> <img alt="Folieneinstellungen" src="../images/slide_settings_icon.png" /> oder öffnen Sie das Rechtsklickmenü und wählen Sie <b>Folieneinstellungen</b> aus dem Kontextmenü aus.</p>
+				<p class="note">Um die Registerkarte <b>Folieneinstellungen</b> zu öffnen, klicken Sie im Folienbearbeitungsbereich auf das Symbol <b>Folieneinstellungen</b> <div class = "icon icon-slide_settings_icon"></div> oder öffnen Sie das Rechtsklickmenü und wählen Sie <b>Folieneinstellungen</b> aus dem Kontextmenü aus.</p>
                 </li>
 				<li>Eigenschaften des Übergangs anpassen: wählen Sie Art und Dauer des Übergangs und die Art des Folienwechsels,</li>
 				<li>klicken Sie auf die Schaltfläche <b>Auf alle Folien anwenden</b>, um den gleichen Übergang auf alle Folien in der Präsentation anzuwenden.<p>Weitere Informationen über diese Optionen finden Sie im Abschnitt <a href="../UsageInstructions/ApplyTransitions.htm" onclick="onhyperlinkclick(this)">Übergänge anwenden</a>.</p>
@@ -55,7 +56,7 @@
 			</li>
 			<li><a id="changelayout"></a><b>Folienlayout ändern:</b><ol>
 			<li>wählen Sie links in der Folienliste die Folien aus, auf die Sie ein neues Layout anwenden wollen.</li>
-			<li>Klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Start</b> auf das Smybol <img alt="Folienlayout ändern" src="../images/changelayout.png" /> <b>Folienlayout ändern</b>.</li>
+			<li>Klicken Sie in der oberen Symbolleiste in der Registerkarte <b>Start</b> auf das Smybol <div class = "icon icon-changelayout"></div> <b>Folienlayout ändern</b>.</li>
 			<li>Wählen Sie das gewünschte Layout im Menü aus.<p>Alternativ können Sie mit der rechten Maustaste auf die gewünschte Folie in der Liste links klicken, wählen Sie die Option <b>Layout ändern</b> im Kontextmenü wählen aus und bestimmen Sie das gewünschte Layout.</p>
 			<p class="note">Aktuell sind die folgenden Layoutoptionen verfügbar: Titel, Titel und Objekt, Abschnittsüberschrift, Zwei Objekte, Zwei Inhalte und zwei Objekte, Nur Titel, Leer, Objekt und Bildunterschrift, Bild und Bildunterschrift, Vertikaler Text, Vertikaler Titel und Text.</p>
 			</li>

apps/presentationeditor/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 Ihrer Präsentation 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 Ihrer Präsentation zu ersetzen.</li>
         </ol>

apps/presentationeditor/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 Ihre Präsentation im <a href="https://www.onlyoffice.com/de/presentation-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</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/presentationeditor/main/resources/help/de/UsageInstructions/ViewPresentationInfo.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="View presentation title, author, location, creation date, persons with the rights to view or edit the presentation" />
 		<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 dieser Präsentation 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 Versionen der Präsentation (Hauptänderungen) und Revisionen (geringfügige Änderungen) unter Angabe aller jeweiligen Autoren sowie Erstellungsdatum und -zeit. Für Versionen der Präsentation 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.</p>
+                <p>Um alle Änderungen an dieser Präsentation 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 Versionen der Präsentation (Hauptänderungen) und Revisionen (geringfügige Änderungen) unter Angabe aller jeweiligen Autoren sowie Erstellungsdatum und -zeit. Für Versionen der Präsentation 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.</p>
                 <p><img alt="Versionsverlauf" src="../images/versionhistory.png" /></p>
                 <p>Um zur aktuellen Version der Präsentation zurückzukehren, klicken Sie oben in der Liste mit Versionen auf <b>Verlauf schließen</b>.</p>
             </div>

apps/presentationeditor/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 Ihrer Präsentation 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/presentationeditor/main/resources/help/de/search/search.html

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

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="The short description of the Presentation 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>
@@ -19,7 +20,7 @@
 			<p>Using the <b>Presentation Editor</b>, you can perform various editing operations like in any desktop editor, 
 			print the edited presentations keeping all the formatting details or download them onto the hard disk drive of your computer
 			as PPTX, PDF, ODP, POTX, PDF/A, OTP 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/presentationeditor/main/resources/help/en/HelpfulHints/AdvancedSettings.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The advanced settings of Presentation 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,7 +15,7 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
 		<h1>Advanced Settings of the Presentation Editor</h1>
-			<p>The <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation 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 target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation 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>Spell Checking</b> is used to turn on/off the spell checking option.</li>
@@ -27,7 +28,7 @@
                     <b>Co-editing Mode</b> is used to select a way of displaying changes made during co-editing:
                     <ul>
                         <li>By default, the <b>Fast</b> mode is selected, the users who take part in the presentation co-editing, will see the changes in real time once they are made by other users.</li>
-                        <li>If you prefer not to see the changes made by other users (so that they will 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 with a notification that there are some changes made by other users.</li>
+                        <li>If you prefer not to see the changes made by other users (so that they will 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 with a notification that there are some changes made by other users.</li>
                     </ul>
                 </li>
                 <li>

apps/presentationeditor/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,17 +32,17 @@
                 <p>The <b>Presentation 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 other user's changes 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 the others.</li>
+                    <li><b>Strict</b> is selected to hide other user's changes 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 the others.</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 necessary 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 necessary 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 presentation in the <b>Fast</b> mode, the possibility to <b>Redo</b> the last undone operation is not available.
                 </p>
                 <p>When a presentation is being edited by several users simultaneously in the <b>Strict</b> mode, the edited objects (autoshapes, text objects, tables, images, charts) are marked with dashed lines of different colors. The object that you are editing is surrounded by the green dashed line. Red dashed lines indicate that objects are being edited by other users. 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 presentation is specified 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> or <em>comment</em> the presentation, 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 on 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>The number of users who are working on the current presentation is specified 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> or <em>comment</em> the presentation, 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 on 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>
                 <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>
@@ -51,34 +52,34 @@
                 <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 on 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 on the top toolbar once again.</p>
             </div>
             <h3>Comments</h3>
             <p>It's possible to work with comments in the offline mode, without connecting to the <em>online version</em>.</p>
                 <p>To leave a comment to a certain object (text box, shape etc.):</p>
                 <ol>
                     <li>select an object 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 />
+                    <li>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 />
                         right-click the selected object and select the <b>Add Сomment</b> option from the menu,<br />
                     </li>
                     <li>enter the needed text,</li>
                     <li>click the <b>Add Comment/Add</b> button.</li>
                 </ol>
-                <p>The object you commented will be marked with the <img alt="Commented object icon" src="../images/added_comment_icon.png" /> icon. To view the comment, just click on this icon.</p>
-                <p>To add a comment to a certain slide, select the slide and use the <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Comment</b> button on the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar. The added comment will be displayed in the upper left corner of the slide.</p>
-                <p>To create a presentation-level comment which is not related to a certain object or slide, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar to open the <b>Comments</b> panel and use the <b>Add Comment to Document</b> link. The presentation-level comments can be viewed on the <b>Comments</b> panel. Comments related to objects and slides are also available here.</p>
+                <p>The object you commented will be marked with the <div class = "icon icon-added_comment_icon"></div> icon. To view the comment, just click on this icon.</p>
+                <p>To add a comment to a certain slide, select the slide and use the <div class = "icon icon-comment_toptoolbar"></div> <b>Comment</b> button on the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar. The added comment will be displayed in the upper left corner of the slide.</p>
+                <p>To create a presentation-level comment which is not related to a certain object or slide, click the <div class = "icon icon-commentsicon"></div> icon on the left sidebar to open the <b>Comments</b> panel and use the <b>Add Comment to Document</b> link. The presentation-level comments can be viewed on the <b>Comments</b> panel. Comments related to objects and slides are also available here.</p>
                 <p>Any other user can answer to 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 text in the entry field and press the <b>Reply</b> button.</p>
-                <p>If you are using the <b>Strict</b> co-editing mode, new comments added by other users will become visible only after you click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar.</p>
+                <p>If you are using the <b>Strict</b> co-editing mode, new comments added by other users will become visible only after you click the <div class = "icon icon-saveupdate"></div> icon in the left upper corner of the top toolbar.</p>
                 <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></li>
                             <li>by author: <b>Author from A to Z</b> or <b>Author from Z to A</b>
@@ -86,9 +87,9 @@
                             </li>
                         </ul>          
                     </li>
-                    <li>edit the currently selected by clicking the <img alt="Edit icon" src="../images/editcommenticon.png" /> icon,</li>
-                    <li>delete the currently selected by clicking the <img alt="Delete icon" src="../images/deletecommenticon.png" /> icon,</li>
-                    <li>close the currently selected discussion by clicking the <img alt="Resolve icon" src="../images/resolveicon.png" /> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <img alt="Open again icon" src="../images/resolvedicon.png" /> icon,</li>
+                    <li>edit the currently selected by clicking the <div class = "icon icon-editcommenticon"></div> icon,</li>
+                    <li>delete the currently selected by clicking the <div class = "icon icon-deletecommenticon"></div> icon,</li>
+                    <li>close the currently selected discussion by clicking the <div class = "icon icon-resolveicon"></div> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <div class = "icon icon-resolvedicon"></div> icon,</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 presentation.</li>
                 </ul>
                 <h4>Adding mentions</h4>
@@ -98,7 +99,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>
@@ -108,7 +109,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/presentationeditor/main/resources/help/en/HelpfulHints/KeyboardShortcuts.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The keyboard shortcut list is used for a faster and easier access to the features of Presentation 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/presentationeditor/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 slide 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,11 +17,11 @@
 		<h1>View Settings and Navigation Tools</h1>
 			<p>The <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a> offers several tools to help you view and navigate through your presentation: zoom, previous/next slide buttons and slide number indicator.</p>
 			<h3>Adjust the View Settings</h3>
-			<p>To adjust default view settings and set the most convenient mode to work with the presentation, 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 presentation, 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. 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. 
+			<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. 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>Slide Number Indicator</b> and <b>Zoom</b> buttons are situated. To show the hidden <b>Status Bar</b>, click this option once again.</li>
@@ -34,13 +35,13 @@
 			<p>
 				The <b>Zoom</b> buttons are situated in the right lower corner and are used to zoom in and out the current presentation.
 				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 slide width to the visible part of the working area.
-				To fit the whole slide to the visible part of the working area, click the <b>Fit to slide</b> <img alt="Fit to slide button" src="../images/fitslide.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 slide width to the visible part of the working area.
+				To fit the whole slide to the visible part of the working area, click the <b>Fit to slide</b> <div class = "icon icon-fitslide"></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 class="note"><b>Note</b>: you can set a default zoom value. Switch to the <b>File</b> tab of the top toolbar, go to the <b>Advanced Settings...</b> section, choose the necessary <b>Default Zoom Value</b> from the list and click the <b>Apply</b> button.</p>
-			<p>To go to the previous or next slide when editing the presentation, you can use the <img alt="Previous Slide button" src="../images/previouspage.png" /> and <img alt="Next Slide button" src="../images/nextpage.png" /> buttons at the top and bottom of the vertical scroll bar located to the right of the slide.</p>
+			<p>To go to the previous or next slide when editing the presentation, you can use the <div class = "icon icon-previouspage"></div> and <div class = "icon icon-nextpage"></div> buttons at the top and bottom of the vertical scroll bar located to the right of the slide.</p>
 			<p>The <b>Slide Number Indicator</b> shows the current slide as a part of all the slides in the current presentation (slide 'n' of 'nn'). 
 			Click this caption to open the window where you can enter the slide number and quickly go to it. If you decide to hide the <b>Status Bar</b>, this tool will become inaccessible.</p>
 			

apps/presentationeditor/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/presentationeditor/main/resources/help/en/HelpfulHints/Search.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the search and replace function in Presentation 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,20 +16,20 @@
         </div>
 		<h1>Search and Replace Function</h1>
 			<p><b>To search</b> for the needed characters, words or phrases in the <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, 
-			click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated on the left sidebar or use the <em>Ctrl+F</em> key combination.</p>
+			click the <div class = "icon icon-searchicon"></div> icon situated on the left sidebar or use the <em>Ctrl+F</em> key combination.</p>
 			<p>The <b>Find and Replace</b> window will open:</p>
             <img alt="Find and Replace Window" src="../images/search_window.png" />
 			<ol>
 			<li>Type in your inquiry into the corresponding data entry field.</li>
                 <li>
-                    Specify search parameters by clicking the <img alt="Search options icon" src="../images/search_options.png" /> icon and checking the necessary options:
+                    Specify search parameters by clicking the <div class = "icon icon-search_options"></div> icon and checking the necessary options:
                     <ul>
                         <li><b>Case sensitive</b> - is used to find only the occurrences typed in the same case as your inquiry (e.g. if your inquiry is 'Editor' and this option is selected, such words as 'editor' or 'EDITOR' etc. will not be found). To disable this option click it once again.</li>
                         <!--<li><b>Highlight results</b> - is used to highlight all found occurrences at once. To disable this option and remove the highlight click the option once again.</li>-->
                     </ul>
                 </li>
 			<li>Click one of the <b>arrow buttons</b> on the right. 
-			The search will be performed either towards the beginning of the presentation (if you click the <img alt="Left arrow button" src="../images/searchupbutton.png" /> button) or towards the end of the presentation (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 presentation (if you click the <div class = "icon icon-searchupbutton"></div> button) or towards the end of the presentation (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/presentationeditor/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 presentation" />
 		<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 target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation 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 presentation. Click the <img alt="Set presentation language icon" src="../images/document_language.png" /> icon on the right side of the status bar. In the opened window, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole presentation. </p>
+			<p>First of all, <b>choose a language</b> for your presentation. Click the <div class = "icon icon-document_language"></div> icon on the right side of the status bar. In the opened window, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole presentation. </p>
 			<p><img alt="Set presentation language window" src="../images/document_language_window.png" /></p>
 			<p>To <b>choose a different language</b> for any piece of text within the presentation, 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 at the status bar, or</li>
+				<li>click the <div class = "icon icon-spellcheckdeactivated"></div> <b>Spell checking</b> icon at 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>Incorrectly spelled words will be underlined with a red line.</p>
@@ -35,7 +36,7 @@
 			<p><img alt="Spell-checking" src="../images/spellchecking_presentation.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/presentationeditor/main/resources/help/en/HelpfulHints/SupportedFormats.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The list of presentation formats supported by Presentation 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/presentationeditor/main/resources/help/en/HelpfulHints/UsingChat.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Tips on using the Chat tool" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 	</head>
 	<body>
 		<div class="mainpart">
@@ -12,12 +13,12 @@
 			<p><b>ONLYOFFICE Presentation Editor</b> offers you the possibility to chat with other users to share ideas concerning particular presentation parts.</p>
 			<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 at the left sidebar,</li>
+				<li>click the <div class = "icon icon-chaticon"></div> icon at the left sidebar,</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 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 once again.</p>
 		</div>
 	</body>
 </html>

apps/presentationeditor/main/resources/help/en/ProgramInterface/CollaborationTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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/presentationeditor/main/resources/help/en/ProgramInterface/HomeTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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/presentationeditor/main/resources/help/en/ProgramInterface/InsertTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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/presentationeditor/main/resources/help/en/ProgramInterface/PluginsTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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/presentationeditor/main/resources/help/en/ProgramInterface/ProgramInterface.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation 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>
@@ -28,28 +29,28 @@
                 <li>
                     The <b>Editor header</b> displays the logo, <span class="desktopDocumentFeatures">tabs for all opened presentations with their names</span> and menu tabs.
                     <p>On the left side of the <b>Editor header</b>, the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons are located.</p>
-                    <p><img alt="Icons in the editor header" src="../images/interface/leftpart.png" /></p>
+                    <p><div class = "big big-leftpart"></div></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" /> <b>View Settings</b> - allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and accessing 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) allows <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">setting 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> <b>View Settings</b> - allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and accessing 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) allows <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">setting 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/TransitionsTab.htm" onclick="onhyperlinkclick(this)">Transitions</a>, <a href="../ProgramInterface/CollaborationTab.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> at the bottom of the editor window contains the <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Start slideshow</a> icon, some <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">navigation tools</a>: slide number indicator and zoom buttons. The <b>Status bar</b> also displays some notifications (such as "All changes saved", etc.) and allows <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">setting the text language and enable spell checking</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 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 contacting our support team,</li>
-                        <li class="onlineDocumentFeatures"><img alt="About icon" src="../images/abouticon.png" /> - (available in the <em>online version</em> only) allows viewing 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 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 contacting our support team,</li>
+                        <li class="onlineDocumentFeatures"><div class = "icon icon-about"></div> - (available in the <em>online version</em> only) allows viewing the information about the program.</li>
                     </ul>
                 </li>
                 <li>The <b>Right sidebar</b> allows adjusting additional parameters of different objects. When you select a particular object on a slide, the corresponding icon is activated on the right sidebar. Click this icon to expand the right sidebar.</li>

apps/presentationeditor/main/resources/help/en/ProgramInterface/TransitionsTab.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation Editor user interface - Transitions 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/presentationeditor/main/resources/help/en/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 or to another slide in the same presentation" />
 		<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>place the cursor within the text box where a hyperlink should be added,</li>
                 <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-				<li>click the <img alt="Hyperlink icon" src="../images/addhyperlink.png" /> <b>Hyperlink</b> icon on the top toolbar,</li>
+				<li>click the <div class = "icon icon-addhyperlink"></div> <b>Hyperlink</b> icon on the top toolbar,</li>
 				<li>after that the <b>Hyperlink Settings</b> window will appear where you can specify the hyperlink parameters:
 				<ul>
 				    <li>Select a link type you wish to insert:

apps/presentationeditor/main/resources/help/en/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 slide." />
 		<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 @@
         <p>To <b>align</b> <em>two or more</em> selected objects, </p>
         <ol>
             <li>
-                Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
+                Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
                 <ul>
                     <li><b>Align to Slide</b> to align objects relative to the edges of the slide,</li>
                     <li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>                    
                 </ul>
             </li>
             <li>
-                Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon once again and select the necessary alignment type from the list:
+                Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon once again and select the necessary alignment type from the list:
                 <ul>
-                    <li><b>Align Left</b> <img alt="Align Left icon" src="../images/alignobjectleft.png" /> - to line up the objects horizontally on the left side of the leftmost object/left edge of the slide,</li>
-                    <li><b>Align Center</b> <img alt="Align Center icon" src="../images/alignobjectcenter.png" /> - to line up the objects horizontally in their centers/center of the slide,</li>
-                    <li><b>Align Right</b> <img alt="Align Right icon" src="../images/alignobjectright.png" /> - to line up the objects horizontally on the right side of the rightmost object/right edge of the slide,</li>
-                    <li><b>Align Top</b> <img alt="Align Top icon" src="../images/alignobjecttop.png" /> - to line up the objects vertically to the top edge of the topmost object/top edge of the slide,</li>
-                    <li><b>Align Middle</b> <img alt="Align Middle icon" src="../images/alignobjectmiddle.png" /> - to line up the objects vertically in their middles/middle of the slide,</li>
-                    <li><b>Align Bottom</b> <img alt="Align Bottom icon" src="../images/alignobjectbottom.png" />  - to line up the objects vertically to the bottom edge of the bottommost object/bottom edge of the slide.</li>
+                    <li><b>Align Left</b> <div class = "icon icon-alignobjectleft"></div> - to line up the objects horizontally on the left side of the leftmost object/left edge of the slide,</li>
+                    <li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to line up the objects horizontally in their centers/center of the slide,</li>
+                    <li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to line up the objects horizontally on the right side of the rightmost object/right edge of the slide,</li>
+                    <li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to line up the objects vertically to the top edge of the topmost object/top edge of the slide,</li>
+                    <li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to line up the objects vertically in their middles/middle of the slide,</li>
+                    <li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div>  - to line up the objects vertically to the bottom edge of the bottommost object/bottom edge of the slide.</li>
                 </ul>
             </li>
         </ol>
@@ -44,17 +45,17 @@
         <p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically so that the equal distance appears between them, </p>
         <ol>
             <li>
-                Click the <b>Align</b> <img alt="Align icon" src="../images/alignshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
+                Click the <b>Align</b> <div class = "icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
                 <ul>                    
                     <li><b>Align to Slide</b> to distribute objects between the edges of the slide,</li>
                     <li><b>Align Selected Objects</b> (this option is selected by default) to distribute objects between two outermost selected objects,</li>
                 </ul>
             </li>
             <li>
-                Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon once again and select the necessary distribution type from the list:
+                Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon once again and select the necessary distribution type from the list:
                 <ul>
-                    <li><b>Distribute Horizontally</b> <img alt="Distribute Horizontally icon" src="../images/distributehorizontally.png" /> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
-                    <li><b>Distribute Vertically</b> <img alt="Distribute Vertically icon" src="../images/distributevertically.png" /> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
+                    <li><b>Distribute Horizontally</b> <div class = "icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
+                    <li><b>Distribute Vertically</b> <div class = "icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
                 </ul>
             </li>
         </ol>
@@ -62,20 +63,20 @@
         <p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
         
         <h3>Group objects</h3>
-        <p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
+        <p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <div class = "icon icon-arrangeshape"></div> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
         <ul>
-            <li><b>Group</b> <img alt="Group icon" src="../images/group.png" /> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
-            <li><b>Ungroup</b> <img alt="Ungroup icon" src="../images/ungroup.png" /> - to ungroup the selected group of the previously combined objects.</li>
+            <li><b>Group</b> <div class = "icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
+            <li><b>Ungroup</b> <div class = "icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
         </ul>
         <p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
         <p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously joined objects is selected.</p>
         <h3>Arrange objects</h3>
-        <p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
+        <p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <div class = "icon icon-arrangeshape"></div> icon on the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
         <ul>
-            <li><b>Bring To Foreground</b> <img alt="Bring To Foreground icon" src="../images/bringtofront.png" /> - to move the object(s) in front of all other objects,</li>
-            <li><b>Send To Background</b> <img alt="Send To Background icon" src="../images/sendtoback.png" /> - to move the object(s) behind all other objects,</li>
-            <li><b>Bring Forward</b> <img alt="Bring Forward icon" src="../images/bringforward.png" /> - to move the selected object(s) one level forward as related to other objects.</li>            
-            <li><b>Send Backward</b> <img alt="Send Backward icon" src="../images/sendbackward.png" /> - to move the selected object(s) one level backward as related to other objects.</li>
+            <li><b>Bring To Foreground</b> <div class = "icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
+            <li><b>Send To Background</b> <div class = "icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
+            <li><b>Bring Forward</b> <div class = "icon icon-bringforward"></div> - to move the selected object(s) one level forward as related to other objects.</li>            
+            <li><b>Send Backward</b> <div class = "icon icon-sendbackward"></div> - to move the selected object(s) one level backward as related to other objects.</li>
         </ul>        
         <p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
         </div>

apps/presentationeditor/main/resources/help/en/UsageInstructions/ApplyTransitions.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add animation effects between slides" />
 		<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/presentationeditor/main/resources/help/en/UsageInstructions/CommunicationPlugins.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="In ONLYOFFICE Presentation Editor, you can always keep in touch with colleagues and use popular online messengers, such as Telegram and Rainbow" />
     <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>Telegram</h2>
         <p>To start chatting in the Telegram plugin,</p>
         <ul>
-            <li>Switch to the <b>Plugins</b> tab and click <img alt="Telegram icon" src="../images/telegram_icon.png" /> <b>Telegram</b>,</li>
+            <li>Switch to the <b>Plugins</b> tab and click <div class = "icon icon-telegram_icon"></div> <b>Telegram</b>,</li>
             <li>enter your phone number into the corresponding field,</li>
             <li>check the <b>Keep me signed in</b> checkbox if you want to save credentials for the current session and click the <b>Next</b> button,</li>
             <li>
@@ -36,7 +37,7 @@
         <h2>Rainbow</h2>
         <p>To start chatting in the Rainbow plugin,</p>
         <ol>
-            <li>Switch to the <b>Plugins</b> tab and click <img alt="Rainbow icon" src="../images/rainbow_icon.png" /> <b>Rainbow</b>,</li>
+            <li>Switch to the <b>Plugins</b> tab and click <div class = "icon icon-rainbow_icon"></div> <b>Rainbow</b>,</li>
             <li>register a new account by clicking the <b>Sign up</b> button, or log into an already created one. To do this, enter your email into the corresponding field and click <b>Continue</b>,</li>
             <li>then enter your account password,</li>
             <li>check the <b>Keep my session alive</b> checkbox if you want to save credentials for the current session, and click the <b>Connect</b> button.</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/CopyClearFormatting.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Copy/clear formatting within your presentation" />
 		<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>To copy a certain text formatting in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>,</p>
 			<ol>
 				<li>select the text passage whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
-				<li>click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" />),</li>
+				<li>click the <b>Copy style</b> <div class = "icon icon-copystyle"></div> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <div class = "icon icon-paste_style"></div>),</li>
 				<li>select the text passage you want to apply the same formatting to.</li>
 			</ol>
             <p>To apply the copied formatting to multiple text passages,</p>
             <ol>
                 <li>select the text passage whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
-                <li>double-click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" /> and the <b>Copy style</b> icon will remain selected: <img alt="Multiple copying style" src="../images/copystyle_selected.png" />),</li>
+                <li>double-click the <b>Copy style</b> <div class = "icon icon-copystyle"></div> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <div class = "icon icon-paste_style"></div> and the <b>Copy style</b> icon will remain selected: <div class = "icon icon-copystyle_selected"></div>),</li>
                 <li>select the necessary text passages one by one to apply the same formatting to each of them,</li>
-                <li>to exit this mode, click the <b>Copy style</b> <img alt="Multiple copying style" src="../images/copystyle_selected.png" /> icon once again or press the <b>Esc</b> key on the keyboard.</li>
+                <li>to exit this mode, click the <b>Copy style</b> <div class = "icon icon-copystyle_selected"></div> icon once again or press the <b>Esc</b> key on the keyboard.</li>
             </ol>
 			<p>To quickly remove the formatting that you have applied to a text passage,</p>
 			<ol>
 				<li>select the text passage which formatting you want to remove,</li>
-				<li>click the <b>Clear style</b> <img alt="Clear style" src="../images/clearstyle.png" /> icon on the <b>Home</b> tab of the top toolbar.</li>
+				<li>click the <b>Clear style</b> <div class = "icon icon-clearstyle"></div> icon on the <b>Home</b> tab of the top toolbar.</li>
 			</ol>
 		</div>
 	</body>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Perform the basic operations with the presentation: 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>To cut, copy and paste the selected objects (slides, text passages, autoshapes) in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a> or undo/redo your actions, use the corresponding options from the right-click menu, keyboard shortcuts or icons available on any tab of the top toolbar:</p>
             <ul>
                 <li><b>Cut</b> – select an object and use the <b>Cut</b> option from the right-click menu to delete the selection and send it to the computer clipboard memory. <span class="onlineDocumentFeatures">The cut data can be later inserted to another place in the same presentation.</span></li>
-                <li><b>Copy</b> – select an object and use the <b>Copy</b> option from the right-click menu or the <b>Copy</b> <img alt="Copy icon" src="../images/copy.png" /> icon on the top toolbar to copy the selection to the computer clipboard memory. <span class="onlineDocumentFeatures">The copied object can be later inserted to another place in the same presentation.</span></li>
-                <li><b>Paste</b> – find the place in your presentation where you need to paste the previously copied object and use the <b>Paste</b> option from the right-click menu or the <b>Paste</b> <img alt="Paste icon" src="../images/paste.png" /> icon on the top toolbar. The object will be inserted to the current cursor position. <span class="onlineDocumentFeatures">The object can be previously copied from the same presentation.</span></li>
+                <li><b>Copy</b> – select an object and use the <b>Copy</b> option from the right-click menu or the <b>Copy</b> <div class = "icon icon-copy"></div> icon on the top toolbar to copy the selection to the computer clipboard memory. <span class="onlineDocumentFeatures">The copied object can be later inserted to another place in the same presentation.</span></li>
+                <li><b>Paste</b> – find the place in your presentation where you need to paste the previously copied object and use the <b>Paste</b> option from the right-click menu or the <b>Paste</b> <div class = "icon icon-paste"></div> icon on the top toolbar. The object will be inserted to the current cursor position. <span class="onlineDocumentFeatures">The object can be previously copied from the same presentation.</span></li>
             </ul>
             <p><span class="onlineDocumentFeatures">In the <em>online version</em>, the following key combinations are only used to copy or paste data from/into another presentation or some other program,</span> <span class="desktopDocumentFeatures">in the <em>desktop version</em>, both the corresponding buttons/menu options and key combinations can be used for any copy/paste operations:</span></p>
             <ul>
@@ -29,7 +30,7 @@
             </ul>
             <h3>Use the Paste Special feature</h3>
             <p class="note"><b>Note</b>: For collaborative editing, the <b>Pase Special</b> feature is available in the <b>Strict</b> co-editing mode only.</p>
-            <p>Once the copied data is pasted, the <b>Paste Special</b> <img alt="Paste Special" src="../images/pastespecialbutton.png" /> button appears next to the inserted text passage/object. Click this button to select the necessary paste option. </p>
+            <p>Once the copied data is pasted, the <b>Paste Special</b> <div class = "icon icon-pastespecialbutton"></div> button appears next to the inserted text passage/object. Click this button to select the necessary paste option. </p>
             <p>When pasting text passages, the following options are available:</p>
             <ul>
                 <li><em>Use destination theme</em> - allows applying the formatting specified by the theme of the current presentation. This option is used by default.</li>
@@ -47,9 +48,9 @@
             <h3>Use the Undo/Redo operations</h3>
             <p>To undo/redo your actions, use the corresponding icons on the left side of the editor header or keyboard shortcuts:</p>
             <ul>
-                <li><b>Undo</b> – use the <b>Undo</b> <img alt="Undo icon" src="../images/undo.png" /> icon to undo the last operation you performed.</li>
+                <li><b>Undo</b> – use the <b>Undo</b> <div class = "icon icon-undo"></div> icon to undo the last operation you performed.</li>
                 <li>
-                    <b>Redo</b> – use the <b>Redo</b> <img alt="Redo icon" src="../images/redo.png" /> icon to redo the last undone operation.
+                    <b>Redo</b> – use the <b>Redo</b> <div class = "icon icon-redo"></div> icon to redo the last undone operation.
                     <p>You can also use the <b>Ctrl+Z</b> key combination for undoing or <b>Ctrl+Y</b> for redoing.</p>
                 </li>
             </ul>

apps/presentationeditor/main/resources/help/en/UsageInstructions/CreateLists.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Create bulleted and numbered lists in the document changing the lists outline" />
 		<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,23 +22,23 @@
                 <li>
                     select the list type you would like to start:
                     <ul>
-                        <li><b>Unordered list</b> with markers is created using the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> icon situated on the top toolbar</li>
+                        <li><b>Unordered list</b> with markers is created using the <b>Bullets</b> <div class = "icon icon-bullets"></div> icon situated on the top toolbar</li>
                         <li>
-                            <b>Ordered list</b> with digits or letters is created using the <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon situated at the top toolbar
+                            <b>Ordered list</b> with digits or letters is created using the <b>Numbering</b> <div class = "icon icon-numbering"></div> icon situated at the top toolbar
                             <p class="note"><b>Note</b>: click the downward arrow next to the <b>Bullets</b> or <b>Numbering</b> icon to select how the list is going to look like.</p>
                         </li>
                     </ul>
                 </li>
                 <li>now each time you press the <b>Enter</b> key at the end of the line, a new ordered or unordered list item will appear. To stop that, press the <b>Backspace</b> key and continue with the common text paragraph.</li>
             </ol>
-            <p>You can also change the text indentation in the lists and their nesting using the <b>Decrease indent</b> <img alt="Decrease indent icon" src="../images/decreaseindent.png" />, and <b>Increase indent</b> <img alt="Increase indent icon" src="../images/increaseindent.png" /> icons on the <b>Home</b> tab of the top toolbar.</p>
+            <p>You can also change the text indentation in the lists and their nesting using the <b>Decrease indent</b> <div class = "icon icon-decreaseindent"></div>, and <b>Increase indent</b> <div class = "icon icon-increaseindent"></div> icons on the <b>Home</b> tab of the top toolbar.</p>
             <p class="note"><b>Note</b>: the additional indentation and spacing parameters can be changed on the right sidebar and in the advanced settings window. To learn more about it, read the <a href="InsertText.htm" onclick="onhyperlinkclick(this)">Insert and format your text</a> section.</p>
 
             <h3>Change the list settings</h3>
             <p>To change the bulleted or numbered list settings, such as a bullet type, size and color:</p>
             <ol>
                 <li>click an existing list item or select the text you want to format as a list,</li>
-                <li>click the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> or <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon on the <b>Home</b> tab of the top toolbar,</li>
+                <li>click the <b>Bullets</b> <div class = "icon icon-bullets"></div> or <b>Numbering</b> <div class = "icon icon-numbering"></div> icon on the <b>Home</b> tab of the top toolbar,</li>
                 <li>select the <b>List Settings</b> option,</li>
                 <li>
                     the <b>List Settings</b> window will open. The bulleted list settings window looks like this:

apps/presentationeditor/main/resources/help/en/UsageInstructions/FillObjectsSelectColor.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Fill the added objects with color, picture or texture, select colors for the slide background, autoshape fill and stroke, font." />
 		<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,9 +19,9 @@
 			<ol>
 			<li>Select an object
                 <ul>
-                    <li>To change the slide background fill, select the necessary slides in the slide list. The <img alt="Slide settings Icon" src="../images/slide_settings_icon.png" /> <b>Slide settings</b> tab will be activated on the right sidebar.</li>
-                    <li>To change the autoshape fill, left-click the necessary autoshape. The <img alt="Shape settings Icon" src="../images/shape_settings_icon.png" /> <b>Shape settings</b> tab will be activated on the right sidebar.</li>
-                    <li>To change the Text Art font fill, left-click the necessary text object. The <img alt="Text Art settings Icon" src="../images/textart_settings_icon.png" /> <b>Text Art settings</b> tab will be activated on the right sidebar.</li>
+                    <li>To change the slide background fill, select the necessary slides in the slide list. The <div class = "icon icon-slide_settings_icon"></div> <b>Slide settings</b> tab will be activated on the right sidebar.</li>
+                    <li>To change the autoshape fill, left-click the necessary autoshape. The <div class = "icon icon-shape_settings_icon"></div> <b>Shape settings</b> tab will be activated on the right sidebar.</li>
+                    <li>To change the Text Art font fill, left-click the necessary text object. The <div class = "icon icon-textart_settings_icon"></div> <b>Text Art settings</b> tab will be activated on the right sidebar.</li>
                 </ul>
 			</li>
 			<li>Set the necessary fill type</li>
@@ -48,7 +49,7 @@
 				<hr />
 			<ul>				
 				<li>
-					<b>Gradient Fill</b> - select this option to fill the slide/shape with two colors which smoothly change from one to another. Click the <img alt="Shape settings Icon" src="../images/shape_settings_icon.png" /> <b>Shape settings</b> icon to open the <b>Fill</b> menu:
+					<b>Gradient Fill</b> - select this option to fill the slide/shape with two colors which smoothly change from one to another. Click the <div class = "icon icon-shape_settings_icon"></div> <b>Shape settings</b> icon to open the <b>Fill</b> menu:
 					<p><img class="floatleft" alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
 					<ul style="margin-left: 280px;">
 						<li><b>Style</b> - choose one of the available options: <b>Linear</b> (colors change in a straight line i.e. along a horizontal/vertical axis or diagonally at a 45 degree angle) or <b>Radial</b> (colors change in a circular path from the center to the edges).</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/HighlightedCode.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The description of Hightlight code plugin for ONLYOFFICE editors, which allows to embed code with the already adjusted style into presentations" />
     <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>In the <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can embed highlighted code with the already adjusted style in accordance with the programming language and coloring style of the program you have chosen.</p>
         <ol>
             <li>Go to your presentation and place the cursor at the location where you want to include the code.</li>
-            <li>Switch to the <b>Plugins</b> tab and choose <img alt="Highlight code plugin icon" src="../images/highlight.png" /> <b>Highlight code</b>.</li>
+            <li>Switch to the <b>Plugins</b> tab and choose <div class = "icon icon-highlight"></div> <b>Highlight code</b>.</li>
             <li>Specify the programming <b>Language</b>.</li>
             <li>Select a <b>Style</b> of the code so that it appears as if it were open in this program.</li>
             <li>Specify if you want to replace tabs with spaces.</li>

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

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add an autoshape to your presentation and adjust its properties." />
 		<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>To <b>add</b> an autoshape to a slide in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>,</p>
 			<ol>
 				<li>in the slide list on the left, select the slide you want to add the autoshape to,</li>
-				<li>click the  <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
+				<li>click the  <div class = "icon icon-insertautoshape"></div> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
 				<li>select one of the available autoshape groups: Basic Shapes, Figured Arrows, Math, Charts, Stars & Ribbons, Callouts, Buttons, Rectangles, Lines,</li>
 				<li>click on the necessary autoshape within the selected group,</li>
 				<li>in the slide editing area, place the mouse cursor where you want the shape to be put,
@@ -31,7 +32,7 @@
             <p>It's also possible to add an autoshape to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
 			<hr />
             <h3>Adjust autoshape settings</h3>
-			<p>Some of the autoshape settings can be altered using the <b>Shape settings</b> tab of the right sidebar. To activate it, click the autoshape and choose the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
+			<p>Some of the autoshape settings can be altered using the <b>Shape settings</b> tab of the right sidebar. To activate it, click the autoshape and choose the <b>Shape settings</b> <div class = "icon icon-shape_settings_icon"></div> icon on the right. Here you can change the following properties:</p>
 			<p><img class="floatleft"alt="Shape settings tab" src="../images/shapesettingstab.png" /></p>
 			<ul  style="margin-left: 280px;">
 			<li><b>Fill</b> - use this section to select the autoshape fill. You can choose the following options:
@@ -54,10 +55,10 @@
                 <li>
                     <b>Rotation</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically. Click one of the buttons:
                     <ul>
-                        <li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the shape by 90 degrees counterclockwise</li>
-                        <li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the shape by 90 degrees clockwise</li>
-                        <li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the shape horizontally (left to right)</li>
-                        <li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the shape vertically (upside down)</li>
+                        <li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the shape by 90 degrees counterclockwise</li>
+                        <li><div class = "icon icon-rotateclockwise"></div> to rotate the shape by 90 degrees clockwise</li>
+                        <li><div class = "icon icon-fliplefttoright"></div> to flip the shape horizontally (left to right)</li>
+                        <li><div class = "icon icon-flipupsidedown"></div> to flip the shape vertically (upside down)</li>
                     </ul>
                 </li>
                 <li><b>Change Autoshape</b> - use this section to replace the current autoshape with another one selected from the dropdown list.</li>
@@ -66,7 +67,7 @@
 			<hr />
 			<p>To change the <b>advanced settings</b> of the autoshape, right-click the shape and select the <b>Shape Advanced Settings</b> option from the contextual menu or left-click it and press the <b>Show advanced settings</b> link on the right sidebar. The shape properties window will be opened:</p>
             <p><img alt="Shape Properties - Size tab" src="../images/shape_properties1.png" /></p>
-			<p>The <b>Size</b> tab allows you to change the autoshape <b>Width</b> and/or <b>Height</b>. If the <b>Constant proportions</b> <img alt="Constant proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original autoshape aspect ratio.</p>
+			<p>The <b>Size</b> tab allows you to change the autoshape <b>Width</b> and/or <b>Height</b>. If the <b>Constant proportions</b> <div class = "icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class = "icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original autoshape aspect ratio.</p>
             <p><img alt="Shape - Advanced Settings" src="../images/shape_properties5.png" /></p>
             <p>The <b>Rotation</b> tab contains the following parameters:</p>
             <ul>
@@ -112,23 +113,23 @@
             <h3>Join autoshapes using connectors</h3>
             <p>You can connect autoshapes using lines with connection points to demonstrate dependencies between the objects (e.g. if you want to create a flowchart). To do that,</p>
             <ol>
-                <li>click the  <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
+                <li>click the  <div class = "icon icon-insertautoshape"></div> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
                 <li>
                     select the <b>Lines</b> group from the menu,
                     <p><img alt="Shapes - Lines" src="../images/connectors.png" /></p>
                 </li>
                 <li>click the necessary shape within the selected group (excepting the last three shapes which are not connectors, namely <em>Curve</em>, <em>Scribble</em> and <em>Freeform</em>),</li>
                 <li>
-                    hover the mouse cursor over the first autoshape and click one of the connection points <img alt="Connection point icon" src="../images/connectionpoint.png" /> that appear on the shape outline,
-                    <p><img alt="Using connectors" src="../images/connectors_firstshape.png" /></p>
+                    hover the mouse cursor over the first autoshape and click one of the connection points <div class = "icon icon-connectionpoint"></div> that appear on the shape outline,
+                    <p><div class = "big big-connectors_firstshape"></div></p>
                 </li>
                 <li>
                     drag the mouse cursor towards the second autoshape and click the necessary connection point on its outline.
-                    <p><img alt="Using connectors" src="../images/connectors_secondshape.png" /></p>
+                    <p><div class = "big big-connectors_secondshape"></div></p>
                 </li>
             </ol>
             <p>If you move the joined autoshapes, the connector remains attached to the shapes and moves together with them. </p>
-            <p><img alt="Moving joined shapes" src="../images/connectors_moveshape.png" /></p>
+            <p><div class = "big big-connectors_moveshape"></div></p>
             <p>You can also detach the connector from the shapes and then attach it to any other connection points.</p>
 		</div>
 	</body>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add a chart to your presentation and adjust its properties" />
 		<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>put the cursor where you want to add a chart,</li>
                 <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-                <li>click the <img alt="Chart icon" src="../images/insertchart.png" /> <b>Chart</b> icon on the top toolbar,</li>
+                <li>click the <div class = "icon icon-insertchart"></div> <b>Chart</b> icon on the top toolbar,</li>
 				<li>select the needed chart type from the available ones:                
                 <details class="details-example">
                 <summary>Column Charts</summary>
@@ -99,10 +100,10 @@
                 <li>
                     after that the <b>Chart Editor</b> window will appear where you can enter the necessary data into the cells using the following controls:
                     <ul>
-                        <li><img alt="Copy" src="../images/copy.png" /> and <img alt="Paste" src="../images/paste.png" /> for copying and pasting the copied data</li>
-                        <li><img alt="Undo" src="../images/undo1.png" /> and <img alt="Redo" src="../images/redo1.png" /> for undoing and redoing actions</li>
-                        <li><img alt="Insert function" src="../images/insertfunction.png" /> for inserting a function</li>
-                        <li><img alt="Decrease decimal" src="../images/decreasedec.png" /> and <img alt="Increase decimal" src="../images/increasedec.png" /> for decreasing and increasing decimal places</li>
+                        <li><div class = "icon icon-copy"></div> and <div class = "icon icon-paste"></div> for copying and pasting the copied data</li>
+                        <li><div class = "icon icon-undo1"></div> and <div class = "icon icon-redo1"></div> for undoing and redoing actions</li>
+                        <li><div class = "icon icon-insertfunction"></div> for inserting a function</li>
+                        <li><div class = "icon icon-decreasedec"></div> and <div class = "icon icon-increasedec"></div> for decreasing and increasing decimal places</li>
                         <li><img alt="Number format" src="../images/numberformat.png" /> for changing the number format, i.e. the way the numbers you enter appear in cells</li>
                         <li><img alt="Chart Type" src="../images/charttypebutton.png" /> for choosing a different type of chart.</li>
                     </ul>
@@ -118,7 +119,7 @@
                                     <b>Chart Data Range</b> - select data for your chart.
                                     <ul>
                                         <li>
-                                            Click the <img alt="Source data range icon" src="../images/changerange.png" /> icon on the right of the <b>Chart data range</b> box to select data range.
+                                            Click the <div class = "icon icon-changerange"></div> icon on the right of the <b>Chart data range</b> box to select data range.
                                             <p><img alt="Select Data Range window" src="../images/selectdata.png" /></p>
                                         </li>
                                     </ul>
@@ -128,7 +129,7 @@
                                     <ul>
                                         <li>In <b>Legend Entries (Series)</b>, click <b>Add</b> button.</li>
                                         <li>
-                                            In <b>Edit Series</b>, type a new legend entry or click the <img alt="Source data range icon" src="../images/changerange.png" /> icon on the right of the <b>Select name</b> box.
+                                            In <b>Edit Series</b>, type a new legend entry or click the <div class = "icon icon-changerange"></div> icon on the right of the <b>Select name</b> box.
                                             <p><img alt="Edit Series window" src="../images/editseries.png" /></p>
                                         </li>
                                     </ul>
@@ -138,7 +139,7 @@
                                     <ul>
                                         <li><b>In Horizontal (Category) Axis Labels</b>, click <b>Edit</b>.</li>
                                         <li>
-                                            In <b>Axis label range</b>, type the labels you want to add or click the <img alt="Source data range icon" src="../images/changerange.png" /> icon on the right of the <b>Axis label range</b> box to select data range.
+                                            In <b>Axis label range</b>, type the labels you want to add or click the <div class = "icon icon-changerange"></div> icon on the right of the <b>Axis label range</b> box to select data range.
                                             <p><img alt="Axis Labels window" src="../images/axislabels.png" /></p>
                                         </li>
                                     </ul>
@@ -328,31 +329,31 @@
                     <p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">chart position</a> on the slide by dragging it vertically or horizontally.</p>
                 </li>
             </ol>
-            <p>You can also add a chart into a text placeholder by pressing the <img alt="Chart icon" src="../images/placeholder_chart.png" /> <b>Chart</b> icon within it and selecting the necessary chart type:</p>
+            <p>You can also add a chart into a text placeholder by pressing the <div class = "icon icon-placeholder_chart"></div> <b>Chart</b> icon within it and selecting the necessary chart type:</p>
             <p><img alt="Add chart to placeholder" src="../images/placeholder_object.png" /></p>	
             <p>It's also possible to add a chart to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>					
 			<hr />
             <h3>Edit chart elements</h3>
             <p>To edit the chart <b>Title</b>, select the default text with the mouse and type in your own one instead.</p>
             <p>To change the font formatting within text elements, such as the chart title, axes titles, legend entries, data labels, etc., select the necessary text element by left-clicking it. Then use the corresponding icons on the <b>Home</b> tab of the top toolbar to change the font <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">type, style, size, or color</a>.</p>
-            <p>When the chart is selected, the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right, since the shape is used as the background for the chart. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
+            <p>When the chart is selected, the <b>Shape settings</b> <div class = "icon icon-shape_settings_icon"></div> icon is also available on the right, since the shape is used as the background for the chart. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
             <p>
                 Using the <b>Shape Settings</b> tab on the right panel, you can not only adjust the chart area itself, but also change the chart elements, such as <em>plot area</em>, <em>data series</em>, <em>chart title</em>, <em>legend</em>, etc. and apply different fill types to them. Select the chart element by clicking it with the left mouse button and choose the preferred fill type: <em>solid color</em>, <em>gradient</em>, <em>texture</em> or <em>picture</em>, <em>pattern</em>. Specify the fill parameters and set the <em>Opacity</em> level if necessary.
                 When you select a vertical or horizontal axis or gridlines, the stroke settings are only available on the <b>Shape Settings</b> tab: <em>color</em>, <em>width</em> and <em>type</em>. For more details on how to work with shape colors, fills and stroke, please refer to <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">this page</a>.
             </p>
             <p class="note"><b>Note</b>: the <b>Show shadow</b> option is also available on the <b>Shape settings</b> tab, but it is disabled for chart elements.</p>
-            <p>If you need to resize chart elements, left-click to select the needed element and drag one of 8 white squares <img alt="Square icon" src="../images/resize_square.png" /> located along the perimeter of the element.</p>
-            <p><img alt="Resize chart elements" src="../images/resizeelement.png" /></p>
-            <p>To change the position of the element, left-click on it, make sure your cursor changed to <img alt="Arrow" src="../images/arrow.png" />, hold the left mouse button and drag the element to the needed position.</p>
-            <p><img alt="Move chart elements" src="../images/moveelement.png" /></p>
+            <p>If you need to resize chart elements, left-click to select the needed element and drag one of 8 white squares <div class = "icon icon-resize_square"></div> located along the perimeter of the element.</p>
+            <p><div class = "big big-resizeelement"></div></p>
+            <p>To change the position of the element, left-click on it, make sure your cursor changed to <div class = "icon icon-arrow"></div>, hold the left mouse button and drag the element to the needed position.</p>
+            <p><div class = "big big-moveelement"></div></p>
             <p>To delete a chart element, select it by left-clicking and press the <b>Delete</b> key.</p>
             <p>You can also rotate 3D charts using the mouse. Left-click within the plot area and hold the mouse button. Drag the cursor without releasing the mouse button to change the 3D chart orientation.</p>
             <p><img alt="3D chart" src="../images/3dchart.png" /></p>
             <hr />
             <h3>Adjust chart settings</h3>
 			<img alt="Chart tab" src="../images/charttab.png" />
-			<p>The chart size, type and style as well as the data used to create the chart can be altered using the right sidebar. To activate it, click the chart and choose the <b>Chart settings</b> <img alt="Chart settings icon" src="../images/chart_settings_icon.png" /> icon on the right.</p>
-			<p>The <b>Size</b> section allows you to change the chart width and/or height. If the <b>Constant proportions</b> <img alt="Constant proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original chart aspect ratio.</p>
+			<p>The chart size, type and style as well as the data used to create the chart can be altered using the right sidebar. To activate it, click the chart and choose the <b>Chart settings</b> <div class = "icon icon-chart_settings_icon"></div> icon on the right.</p>
+			<p>The <b>Size</b> section allows you to change the chart width and/or height. If the <b>Constant proportions</b> <div class = "icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class = "icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original chart aspect ratio.</p>
 			<p>The <b>Change Chart Type</b> section allows you to change the type of the selected chart type and/or its style using the corresponding drop-down menu. </p>
 			<p>To select the necessary chart <b>Style</b>, use the second drop-down menu in the <b>Change Chart Type</b> section.</p>            
             <p>The <b>Edit Data</b> button allows you to open the <b>Chart Editor</b> window and start editing data as described above.</p>

apps/presentationeditor/main/resources/help/en/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>
@@ -19,26 +20,26 @@
             <p>To insert an equation from the gallery,</p>
 			<ol>
                 <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-				<li>click the arrow next to the <img alt="Equation icon" src="../images/insertequationicon.png" /> <b>Equation</b> icon on the top toolbar,</li>
+				<li>click the arrow next to the <div class = "icon icon-insertequationicon"></div> <b>Equation</b> icon on the top toolbar,</li>
 				<li>in the opened drop-down list select the equation category you need. The following categories are currently available: <em>Symbols</em>, <em>Fractions</em>, <em>Scripts</em>, <em>Radicals</em>, <em>Integrals</em>, <em>Large Operators</em>, <em>Brackets</em>, <em>Functions</em>, <em>Accents</em>, <em>Limits and Logarithms</em>, <em>Operators</em>, <em>Matrices</em>,</li>
                 <li>click the certain symbol/equation in the corresponding set of templates.</li>
 			</ol>
             <p>The selected symbol/equation box will be inserted in the center of the current slide.</p>
-            <img alt="Inserted Equation" src="../images/insertedequation.png" />
+            <div class = "big big-insertedequation"></div>
             <p>If you do not see the equation box border, click anywhere within the equation - the border will be displayed as a dashed line. The equation box can be freely <b>moved, resized or rotated</b> on the slide. To do that, click on the equation box border (it will be displayed as a solid line) and use the <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">corresponding handles</a>.</p>
-            <img alt="Selected Equation" src="../images/selectedequation.png" />
-            <p>Each equation template represents a set of slots. A slot is a position for each element that makes up the equation. An empty slot (also called as a placeholder) has a dotted outline <img alt="Equation Placeholder" src="../images/equationplaceholder.png" />. You need to fill in all the placeholders specifying the necessary values.</p>
+            <div class = "big big-selectedequation"></div>
+            <p>Each equation template represents a set of slots. A slot is a position for each element that makes up the equation. An empty slot (also called as a placeholder) has a dotted outline <div class = "icon icon-equationplaceholder"></div>. You need to fill in all the placeholders specifying the necessary values.</p>
             <h3>Enter values</h3>
             <p>The <b>insertion point</b> specifies where the next character you enter will appear. To position the insertion point precisely, click within a placeholder and use the keyboard arrows to move the insertion point one character left/right.</p>
-            <img alt="Edited Equation" src="../images/newslot.png" />
+            <div class = "big big-newslot"></div>
             <p>Once the insertion point is positioned, you can fill in the placeholder:
             <ul>
                 <li>enter the desired numeric/literal value using the keyboard,</li>
-                <li>insert a special character using the <b>Symbols</b> palette from the <img alt="Equation icon" src="../images/insertequationicon.png" /><b>Equation</b> menu on the <b>Insert</b> tab of the top toolbar or typing them from the keyboard (see the <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>Math AutoСorrect</b></a> option description),</li>
+                <li>insert a special character using the <b>Symbols</b> palette from the <div class = "icon icon-insertequationicon"></div><b>Equation</b> menu on the <b>Insert</b> tab of the top toolbar or typing them from the keyboard (see the <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>Math AutoСorrect</b></a> option description),</li>
                 <li>add another equation template from the palette to create a complex nested equation. The size of the primary equation will be automatically adjusted to fit its content. The size of the nested equation elements depends on the primary equation placeholder size, but it cannot be smaller than the sub-subscript size.</li>                
             </ul>
             </p>
-            <p><img alt="Edited Equation" src="../images/nestedfraction.png" /></p>
+            <p><div class = "big big-nestedfraction"></div></p>
             <p>To add some new equation elements, you can also use the <b>right-click menu options</b>:</p>
             <ul>
                 <li>To add a new argument that goes before or after the existing one within <em>Brackets</em>, you can right-click on the existing argument and select the <b>Insert argument before/after</b> option from the menu.</li>
@@ -52,7 +53,7 @@
             <p>By default, the equation within the text box is horizontally centered and vertically aligned to the top of the text box. To change its horizontal/vertical alignment, put the cursor within the the equation box (the text box borders will be displayed as dashed lines) and use the <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">corresponding icons</a> on the <b>Home</b> tab of the top toolbar.</p>
             <p>To increase or decrease the equation <b>font size</b>, click anywhere within the equation box and select the necessary font size from the list on the <b>Home</b> tab of the top toolbar. All the equation elements will change correspondingly.</p>
             <p>The letters within the equation are italicized by default. If necessary, you can change the <b>font style</b> (<em>bold, italic, strikeout</em>) or <b>color</b> for a whole equation or its part. The <em>underlined</em> style can be applied to the entire equation only, not to individual characters. Select the necessary part of the equation by clicking and dragging. The selected part will be highlighted blue. Then use the necessary buttons on the <b>Home</b> tab of the top toolbar to format the selection. For example, you can remove the italic format for ordinary words that are not variables or constants.</p>
-            <img alt="Edited Equation" src="../images/formatastext.png" />
+            <div class = "big big-formatastext"></div>
             <p>To modify some equation elements, you can also use the <b>right-click menu options</b>:</p>
             <ul><li>To change the <em>Fractions</em> format, you can right-click on a fraction and select the <b>Change to skewed/linear/stacked fraction</b> option from the menu (the available options differ depending on the selected fraction type). <!--The <b>Remove/Add fraction bar</b> option is also available for stacked fractions.--></li>
                 <li>To change the <em>Scripts</em> position relating to text, you can right-click on the equation that includes scripts and select the <b>Scripts before/after text</b> option from the menu.</li>
@@ -77,7 +78,7 @@
             <p>To delete a part of the equation, select the part you want to delete by dragging the mouse or holding down the <b>Shift</b> key and using the arrow buttons, then press the <b>Delete</b> key.</p>
             <p>A slot can only be deleted together with the template it belongs to.</p>
             <p>To delete the entire equation, click on the equation box border (it will be displayed as a solid line) and and press the <b>Delete</b> key.</p>
-            <img alt="Delete Equation" src="../images/deleteequation.png" />
+            <div class = "big big-deleteequation"></div>
             <p>To delete some equation elements, you can also use the <b>right-click menu options</b>:</p>
             <ul>
                 <li>To delete a <em>Radical</em>, you can right-click on it and select the <b>Delete radical</b> option from the menu.</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertHeadersFooters.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Insert headers and footers in your presentation, add date and time, slide numbers." />
 		<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>To insert a footer in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>:</p>
 			<ol>
 			<li>switch to the <b>Insert</b> tab,</li>
-			<li>click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button on the top toolbar,</li>
+			<li>click the <div class = "icon icon-header_footer_icon"></div> <b>Edit footer</b> button on the top toolbar,</li>
             <li>the <b>Footer Settings</b> window will open. Check the data you want to add to the footer. The changes are displayed in the preview window on the right.
                 <ul>
                     <li>check the <b>Date and time</b> box to insert a date or time in the selected format. The selected date will be added to the left field of the slide footer.
@@ -39,13 +40,13 @@
             <li>click the <b>Apply to all</b> button to apply changes to all slides or use the <b>Apply</b> button to apply the changes to the current slide only.</li>
 			</ol>
             <p>To quickly insert a date or a slide number to the footer of the selected slide, you can use the <b>Show slide Number</b> and <b>Show Date and Time</b> options on the <b>Slide Settings</b> tab of the right sidebar. In this case, the selected settings will be applied to the current slide only. The date and time or slide number added in such a way can be adjusted later using the <b>Footer Settings</b> window.</p>
-            <p>To edit the added footer, click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button on the top toolbar, make the necessary changes in the <b>Footer Settings</b> window, and click the <b>Apply</b> or <b>Apply to All</b> button to save the changes.</p>
+            <p>To edit the added footer, click the <div class = "icon icon-header_footer_icon"></div> <b>Edit footer</b> button on the top toolbar, make the necessary changes in the <b>Footer Settings</b> window, and click the <b>Apply</b> or <b>Apply to All</b> button to save the changes.</p>
             <h3>Insert date and time and slide number into the text box</h3>
             <p>It's also possible to insert date and time or slide number into the selected text box using the corresponding buttons on the <b>Insert</b> tab of the top toolbar.</p>
             <h5>Insert date and time</h5>
             <ol>
                 <li>put the mouse cursor within the text box where you want to insert the date and time,</li>
-                <li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
+                <li>click the <div class = "icon icon-date_time_icon"></div> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
                 <li>select the necessary <b>Language</b> from the list and choose the necessary date and  time <b>Format</b> in the <b>Date &amp; Time</b> window,
                 <p><img alt="Date and Time Settings" src="../images/date_time_settings.png" /></p>
                 </li>
@@ -55,14 +56,14 @@
             <p>The date and time will be inserted in the current cursor position. To edit the inserted date and time,</p>
             <ol>
                 <li>select the inserted date and time in the text box,</li>
-                <li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
+                <li>click the <div class = "icon icon-date_time_icon"></div> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
                 <li>choose the necessary format in the <b>Date &amp; Time</b> window,</li>
                 <li>click the <b>OK</b> button.</li>
             </ol>
             <h5>Insert a slide number</h5>
             <ol>
                 <li>put the mouse cursor within the text box where you want to insert the slide number,</li>
-                <li>click the <img alt="Slide Number icon" src="../images/slide_number_icon.png" /> <b>Slide Number</b> button on the <b>Insert</b> tab of the top toolbar,</li>
+                <li>click the <div class = "icon icon-slide_number_icon"></div> <b>Slide Number</b> button on the <b>Insert</b> tab of the top toolbar,</li>
                 <li>check the <b>Slide number</b> box in the <b>Footer Settings</b> window,</li>
                 <li>click the <b>OK</b> button to apply the changes.</li>
             </ol>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertImages.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add an image to your presentation and adjust its size and position." />
 		<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 @@
 			<p>To <b>add</b> an image on a slide,</p>
 			<ol>
 				<li>in the slide list on the left, select the slide you want to add the image to,</li>
-				<li>click the <img alt="Image icon" src="../images/image.png" /> <b>Image</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
+				<li>click the <div class = "icon icon-image"></div> <b>Image</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
 				<li>select one of the following options to load the image:
 					<ul>
                         <li>the <b>Image from File</b> option will open the standard dialog window so that you can choose a file. Browse the hard disk drive your computer to select the necessary file and click the <b>Open</b> button
@@ -31,16 +32,16 @@
 				</li>
 				<li>once the image is added, you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.</li>
 			</ol>
-            <p>You can also add an image into a text placeholder pressing the <img alt="Image from file icon" src="../images/placeholder_imagefromfile.png" /> <b>Image from file</b> in it and selecting the necessary image stored on your PC, or use the <img alt="Image from URL icon" src="../images/placeholder_imagefromurl.png" /> <b>Image from URL</b> button and specify the image URL address:</p>
+            <p>You can also add an image into a text placeholder pressing the <div class = "icon icon-placeholder_imagefromfile"></div> <b>Image from file</b> in it and selecting the necessary image stored on your PC, or use the <div class = "icon icon-placeholder_imagefromurl"></div> <b>Image from URL</b> button and specify the image URL address:</p>
             <p><img alt="Add image to placeholder" src="../images/placeholder_object.png" /></p>	
             <p>It's also possible to add an image to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
 			<hr />
             <h3>Adjust image settings</h3>
-			<p>The right sidebar is activated when you left-click an image and choose the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right. It contains the following sections:</p>
+			<p>The right sidebar is activated when you left-click an image and choose the <b>Image settings</b> <div class = "icon icon-image_settings_icon"></div> icon on the right. It contains the following sections:</p>
             <img alt="Image Settings tab" src="../images/imagesettingstab.png" />
             <p><b>Size</b> - is used to view the <b>Width</b> and <b>Height</b> of the current image or restore its <b>Actual Size</b> if necessary.</p>
 			
-            <p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of its each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <img alt="Arrow" src="../images/arrow.png" /> icon and drag the area. </p>
+            <p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of its each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <div class = "icon icon-arrow"></div> icon and drag the area. </p>
             <ul>
                 <li>To crop a single side, drag the handle located in the center of this side.</li>
                 <li>To simultaneously crop two adjacent sides, drag one of the corner handles.</li>
@@ -56,12 +57,12 @@
             <p><b>Replace Image</b> - is used to load another image instead of the current one from the desired source. You can select one of the options: <b>From File</b>, <b>From Storage</b>, or <b>From URL</b>. The <b>Replace image</b> option is also available in the right-click menu.</p>
             <p><b>Rotation</b> is used to rotate the image by 90 degrees clockwise or counterclockwise as well as to flip the image horizontally or vertically. Click one of the buttons:</p>
             <ul>
-                <li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the image by 90 degrees counterclockwise</li>
-                <li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the image by 90 degrees clockwise</li>
-                <li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the image horizontally (left to right)</li>
-                <li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the image vertically (upside down)</li>
+                <li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
+                <li><div class = "icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
+                <li><div class = "icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
+                <li><div class = "icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
             </ul>
-            <p>When the image is selected, the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Line</b></a> type, size and color of the shape as well as change its type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
+            <p>When the image is selected, the <b>Shape settings</b> <div class = "icon icon-shape_settings_icon"></div> icon is also available on the right. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Line</b></a> type, size and color of the shape as well as change its type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
             <p>On the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
             <p><img alt="Shape Settings tab" src="../images/right_image_shape.png" /></p>
 			<hr />
@@ -69,7 +70,7 @@
             <p><img alt="Image Properties" src="../images/image_properties.png" /></p>
 			<p>The <b>Placement</b> tab allows you to set the following image properties:</p>
 			<ul>
-				<li><b>Size</b> - use this option to change the image width and/or height. If the <b>Constant proportions</b> <img alt="Constant proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
+				<li><b>Size</b> - use this option to change the image width and/or height. If the <b>Constant proportions</b> <div class = "icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class = "icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
 				<li><b>Position</b> - use this option to change the image position on the slide (the position is calculated from the top and the left side of the slide).</li>
 			</ul>
             <p><img alt="Image Properties: Rotation" src="../images/image_properties2.png" /></p>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertSymbols.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Insert symbols and characters" />
     <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,12 +15,12 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
         <h1>Insert symbols and characters</h1>
-        <p>When working on a presentation in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you may need to insert a symbol which is not available on your keyboard. To insert such symbols into your presentation, use the <img alt="Insert symbol icon" src="../images/insert_symbol_icon.png" /> <b>Insert symbol</b> option and follow these simple steps:</p>
+        <p>When working on a presentation in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you may need to insert a symbol which is not available on your keyboard. To insert such symbols into your presentation, use the <div class = "icon icon-insert_symbol_icon"></div> <b>Insert symbol</b> option and follow these simple steps:</p>
         <ul>
             <li>place the cursor where a special symbol should be inserted,</li>
             <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
             <li>
-                click the <img alt="Insert symbol icon" src="../images/insert_symbol_icon.png" /> <b>Symbol</b>,
+                click the <div class = "icon icon-insert_symbol_icon"></div> <b>Symbol</b>,
                 <p><img alt="Insert symbol sidebar " src="../images/insert_symbol_window.png" /></p>
             </li>
             <li>The <b>Symbol</b> dialog box will appear, and you will be able to select the required symbol,</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertTables.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add a table to your presentation and adjust its properties" />
 		<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>select the slide where a table should be added,</li>
                 <li>switch to the <b>Insert</b> tab of the top toolbar,</li>
-				<li>click the <img alt="Table icon" src="../images/inserttable.png" /> <b>Table</b> icon on the top toolbar,</li>
+				<li>click the <div class = "icon icon-inserttable"></div> <b>Table</b> icon on the top toolbar,</li>
 				<li>select one of the following options to create a table:
 					<ul>
 						<li><p>either a table with a predefined number of cells (10 x 8 cells maximum)</p>
@@ -30,11 +31,11 @@
 				</li>
 				<li>once the table is added, you can change its properties and position.</li>
 			</ol>
-            <p>You can also add a table into a text placeholder by pressing the <img alt="Table icon" src="../images/placeholder_table.png" /> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
+            <p>You can also add a table into a text placeholder by pressing the <div class = "icon icon-placeholder_table"></div> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
             <p><img alt="Add table to placeholder" src="../images/placeholder_object.png" /></p>
-            <p>To resize a table, drag the handles <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges until the table reaches the necessary size.</p>
-            <p><img alt="Resize table" src="../images/resizetable.png" /></p>
-            <p>You can also manually change the width of a certain column or the height of a row. Move the mouse cursor over the right border of the column so that the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing column width" src="../images/changecolumnwidth.png" /> and drag the border to the left or right to set the necessary width. To change the height of a single row manually, move the mouse cursor over the bottom border of the row until the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing row height" src="../images/changerowheight.png" /> and drag it up or down.</p>
+            <p>To resize a table, drag the handles <div class = "icon icon-resize_square"></div> situated on its edges until the table reaches the necessary size.</p>
+            <p><div class = "big big-resizetable"></div></p>
+            <p>You can also manually change the width of a certain column or the height of a row. Move the mouse cursor over the right border of the column so that the cursor turns into the bidirectional arrow <div class = "icon icon-changecolumnwidth"></div> and drag the border to the left or right to set the necessary width. To change the height of a single row manually, move the mouse cursor over the bottom border of the row until the cursor turns into the bidirectional arrow <div class = "icon icon-changerowheight"></div> and drag it up or down.</p>
 			<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">table position</a> on the slide by dragging it vertically or horizontally.</p>
             <p class="note">
                 <b>Note</b>: to move around in a table, you can use <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)">keyboard shortcuts</a>.
@@ -43,7 +44,7 @@
 			<hr />
             <h3>Adjust table settings</h3>
 			<img class="floatleft"alt="Table settings tab" src="../images/tablesettingstab.png" />
-			<p>Most of the table properties as well as its structure can be altered by using the right sidebar. To activate it, click the table and choose the <b>Table settings</b> <img alt="Table settings icon" src="../images/table_settings_icon.png" /> icon on the right.</p>
+			<p>Most of the table properties as well as its structure can be altered by using the right sidebar. To activate it, click the table and choose the <b>Table settings</b> <div class = "icon icon-table_settings_icon"></div> icon on the right.</p>
 			<p>The <b>Rows</b> and <b>Columns</b> sections on the top allow you to emphasize certain rows/columns by applying a specific formatting to them, or highlight different rows/columns with different background colors to clearly distinguish them. The following options are available:</p>
 			<ul style="margin-left: 280px;">
 				<li><b>Header</b> - emphasizes the topmost row in the table with special formatting.</li>
@@ -55,15 +56,15 @@
 			</ul>
 			<p>The <b>Select From Template</b> section allows you to choose one of the predefined tables styles. Each template combines certain formatting parameters, such as a background color, border style, row/column banding etc.
 			Depending on the options checked in the <b>Rows</b> and/or <b>Columns</b> sections above, the templates set will be displayed differently. For example, if you've checked the <b>Header</b> option in the <b>Rows</b> section and the <b>Banded</b> option in the <b>Columns</b> section, the displayed templates list will include only templates with the header row and banded columns enabled:</p>
-			<p><img alt="Templates list" src="../images/templateslist.png" /></p>
+			<p><div class = "big big-templateslist"></div></p>
 			<p>The <b>Borders Style</b> section allows you to change the applied formatting that corresponds to the selected template. You can select the entire table or a certain cell range and set all the parameters manually.</p>
 			<ul>
-				<li><b>Border</b> parameters - set the border width using the <img alt="Border Size list" src="../images/bordersize.png" /> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells when clicking on the icons: 
-				<p><img alt="Border Type icons" src="../images/bordertype.png" /></p>
+				<li><b>Border</b> parameters - set the border width using the <div class = "big big-bordersize"></div> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells when clicking on the icons: 
+				<p><div class = "big big-bordertype"></div></p>
 				</li>
 				<li><b>Background color</b> - select the color for the background within the selected cells.</li>
 			</ul>
-			<p>The <b>Rows & Columns</b> <img alt="Rows & Columns" src="../images/rowsandcolumns.png" /> section allows you to perform the following operations:</p>
+			<p>The <b>Rows & Columns</b> <div class = "icon icon-rowsandcolumns"></div> section allows you to perform the following operations:</p>
 			<ul>
 				<li><b>Select</b> a row, column, cell (depending on the cursor position), or the entire table.</li>
 				<li><b>Insert</b> a new row above or below the selected one as well as a new column to the left or to the right of the selected one.</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertText.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Learn how to insert and format text box in PowerPoint presentations with ONLYOFFICE. Align the text, change its direction, adjust paragraph advanced settings." />
 		<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,10 +22,10 @@
 			        <li>Add a text passage anywhere on a slide. You can insert a text box (a rectangular frame that allows you to enter some text within it) or a Text Art object (a text box with a predefined font style and color that allows you to apply some text effects). Depending on the necessary text object type, you can do the following:
 			                    <ul>
                                     <li>
-                                        to add a text box, click the <img alt="Text Box icon" src="../images/inserttexticon.png" /> <b>Text Box</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, then click where you want to insert the text box, hold the mouse button and drag the text box border to specify its size. When you release the mouse button, the insertion point will appear in the added text box, allowing you to enter your text.
-                                        <p class="note">It's also possible to insert a text box by clicking the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the top toolbar and selecting the <img alt="Insert Text autoshape" src="../images/text_autoshape.png" /> shape from the <b>Basic Shapes</b> group.</p>
+                                        to add a text box, click the <div class = "icon icon-inserttexticon"></div> <b>Text Box</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, then click where you want to insert the text box, hold the mouse button and drag the text box border to specify its size. When you release the mouse button, the insertion point will appear in the added text box, allowing you to enter your text.
+                                        <p class="note">It's also possible to insert a text box by clicking the <div class = "icon icon-insertautoshape"></div> <b>Shape</b> icon on the top toolbar and selecting the <div class = "icon icon-text_autoshape"></div> shape from the <b>Basic Shapes</b> group.</p>
                                     </li>
-                                    <li>to add a Text Art object, click the <img alt="Text Art icon" src="../images/inserttextarticon.png" /> <b>Text Art</b> icon on the <b>Insert</b> tab of the top toolbar, then click on the desired style template – the Text Art object will be added in the center of the slide. Select the default text within the text box with the mouse and replace it with your own text.</li>
+                                    <li>to add a Text Art object, click the <div class = "icon icon-inserttextarticon"></div> <b>Text Art</b> icon on the <b>Insert</b> tab of the top toolbar, then click on the desired style template – the Text Art object will be added in the center of the slide. Select the default text within the text box with the mouse and replace it with your own text.</li>
                                 </ul>
 			        </li>
                     <li>Add a text passage within an autoshape. Select a shape and start typing your text.</li>
@@ -38,9 +39,9 @@
             <p><img alt="Text box selected" src="../images/textbox_boxselected.png" /></p>
 			<ul>
                 <li>to <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">resize, move, rotate</a> the text box, use the special handles on the edges of the shape.</li>
-                <li>to edit the text box <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">fill</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shapestroke" onclick="onhyperlinkclick(this)">line</a>, <b>replace</b> the rectangular box with a different shape, or access the <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shape advanced settings</a>, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon on the right sidebar and use the corresponding options.</li>
+                <li>to edit the text box <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">fill</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shapestroke" onclick="onhyperlinkclick(this)">line</a>, <b>replace</b> the rectangular box with a different shape, or access the <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shape advanced settings</a>, click the <b>Shape settings</b> <div class = "icon icon-shape_settings_icon"></div> icon on the right sidebar and use the corresponding options.</li>
                 <li>to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">align a text box on the slide, rotate or flip it, arrange</a> text boxes as related to other objects, right-click on the text box border and use the contextual menu options.</li>
-				<li>to create <b>columns of text</b> within the text box, click the corresponding icon <img alt="Insert columns icon" src="../images/insert_columns.png" /> on the text formatting toolbar and choose the preferable option, or right-click on the text box border, click the <b>Shape Advanced Settings</b> option and switch to the <a href="../UsageInstructions/InsertAutoshapes.htm#columns" onclick="onhyperlinkclick(this)"><b>Columns</b></a> tab in the <b>Shape - Advanced Settings</b> window.</li>
+				<li>to create <b>columns of text</b> within the text box, click the corresponding icon <div class = "icon icon-insert_columns"></div> on the text formatting toolbar and choose the preferable option, or right-click on the text box border, click the <b>Shape Advanced Settings</b> option and switch to the <a href="../UsageInstructions/InsertAutoshapes.htm#columns" onclick="onhyperlinkclick(this)"><b>Columns</b></a> tab in the <b>Shape - Advanced Settings</b> window.</li>
             </ul>
             <h2 id="formattext">Format the text within the text box</h2>
             <p>Click the text within the text box to change its properties. When the text is selected, the text box borders are displayed as dashed lines.</p>
@@ -50,13 +51,13 @@
 			<p>The text is aligned horizontally in four ways: left, right, center or justified. To do that:</p>
 			<ol>
 				<li>place the cursor to the position where you want the alignment to be applied (this can be a new line or already entered text),</li>
-				<li>drop-down the <b>Horizontal align</b> <img alt="Horizontal align icon" src="../images/horizontalalign.png" />list on the <b>Home</b> tab of the top toolbar,</li>
+				<li>drop-down the <b>Horizontal align</b> <div class = "icon icon-horizontalalign"></div>list on the <b>Home</b> tab of the top toolbar,</li>
 				<li>select the alignment type you would like to apply:
 					<ul>
-						<li>the <b>Align text left</b> option <img alt="Align Left icon" src="../images/alignleft.png" /> allows you to line up your text on the left side of the text box (the right side remains unaligned).</li>
-						<li>the <b>Align text center</b> option <img alt="Align Center icon" src="../images/aligncenter.png" /> allows you to line up your text in the center of the text box (the right and the left sides remains unaligned).</li>
-						<li>the <b>Align text right</b> option <img alt="Align Right icon" src="../images/alignright.png" /> allows you to line up your text on the right side of the text box (the left side remains unaligned).</li>
-						<li>the <b>Justify</b> option <img alt="Justify icon" src="../images/justify.png" /> allows you to line up your text both on the left and on the right sides of the text box (additional spacing is added where necessary to keep the alignment).</li>
+						<li>the <b>Align text left</b> option <div class = "icon icon-alignleft"></div> allows you to line up your text on the left side of the text box (the right side remains unaligned).</li>
+						<li>the <b>Align text center</b> option <div class = "icon icon-aligncenter"></div> allows you to line up your text in the center of the text box (the right and the left sides remains unaligned).</li>
+						<li>the <b>Align text right</b> option <div class = "icon icon-alignright"></div> allows you to line up your text on the right side of the text box (the left side remains unaligned).</li>
+						<li>the <b>Justify</b> option <div class = "icon icon-justify"></div> allows you to line up your text both on the left and on the right sides of the text box (additional spacing is added where necessary to keep the alignment).</li>
 					</ul>
 				</li>
 			</ol>
@@ -64,12 +65,12 @@
 			<p>The text is aligned vertically in three ways: top, middle or bottom. To do that:</p>
 			<ol>
 				<li>place the cursor to the position where you want the alignment to be applied (this can be a new line or already entered text),</li>
-				<li>drop-down the <b>Vertical align</b> <img alt="Vertical align icon" src="../images/verticalalign.png" />list on the <b>Home</b> tab of the top toolbar,</li>
+				<li>drop-down the <b>Vertical align</b> <div class = "icon icon-verticalalign"></div>list on the <b>Home</b> tab of the top toolbar,</li>
 				<li>select the alignment type you would like to apply:
 					<ul>
-						<li>the <b>Align text to the top</b> option <img alt="Align Top icon" src="../images/aligntop.png" /> allows you to line up your text to the top of the text box.</li>
-						<li>the <b>Align text to the middle</b> option <img alt="Align Middle icon" src="../images/alignmiddle.png" /> allows you to line up your text in the center of the text box.</li>
-						<li>the <b>Align text to the bottom</b> option <img alt="Align Bottom icon" src="../images/alignbottom.png" /> allows you to line up your text to the bottom of the text box.</li>
+						<li>the <b>Align text to the top</b> option <div class = "icon icon-aligntop"></div> allows you to line up your text to the top of the text box.</li>
+						<li>the <b>Align text to the middle</b> option <div class = "icon icon-alignmiddle"></div> allows you to line up your text in the center of the text box.</li>
+						<li>the <b>Align text to the bottom</b> option <div class = "icon icon-alignbottom"></div> allows you to line up your text to the bottom of the text box.</li>
 					</ul>
 				</li>
 			</ol>
@@ -83,67 +84,67 @@
 			<table>
 				<tr>
 					<td width="10%">Font</td>
-					<td width="15%"><img alt="Font" src="../images/fontfamily.png" /></td>
+					<td width="15%"><div class = "big big-fontfamily"></div></td>
 					<td>Used to select one of the fonts from the list of the available ones. <span class="desktopDocumentFeatures">If the required font is not available in the list, you can download and install it on your operating system, and the font will be available for use in the <em>desktop version</em>.</span></td>
 				</tr>
 				<tr>
 					<td>Font size</td>
-					<td><img alt="Font size" src="../images/fontsize.png" /></td>
+					<td><div class = "icon icon-fontsize"></div></td>
 					<td>Used to choose from the preset font size values in the dropdown list (the default values are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 and 96).  It's also possible to manually enter a custom value up to 300 pt in the font size field. Press <em>Enter</em> to confirm.</td>
 				</tr>
 				<tr>
 					<td>Increment font size</td>
-					<td><img alt="Increment font size" src="../images/larger.png" /></td>
+					<td><div class = "icon icon-larger"></div></td>
 					<td>Used to change the font size making it one point bigger each time the button is pressed.</td>
 				</tr>
 				<tr>
 					<td>Decrement font size</td>
-					<td><img alt="Decrement font size" src="../images/smaller.png" /></td>
+					<td><div class = "icon icon-smaller"></div></td>
 					<td>Used to change the font size making it one point smaller each time the button is pressed.</td>
 				</tr>
 				<tr>
 					<td>Change case</td>
-					<td><img alt="Change case" src="../images/change_case.png" /></td>
+					<td><div class = "icon icon-change_case"></div></td>
 					<td>Used to change the font case. <em>Sentence case.</em> - the case matches that of a common sentence. <em>lowercase</em> - all letters are small. <em>UPPERCASE</em> - all letters are capital. <em>Capitalize Each Word</em> - each word starts with a capital letter. <em>tOGGLE cASE</em> - reverse the case of the selected text or the word where the mouse cursor is positioned.</td>
 				</tr>
 				<tr>
 					<td>Highlight color</td>
-					<td><img alt="Highlight color" src="../images/highlightcolor.png" /></td>
-					<td>Used to mark separate sentences, phrases, words, or even characters by adding a color band that imitates the highlighter pen effect throughout the text. You can select the required part of the text and click the downward arrow next to the icon to select a color in the palette (this color set does not depend on the selected <b>Color scheme</b> and includes 16 colors) - the color will be applied to the selected text. Alternatively, you can first choose a highlight color and then start selecting the text with the mouse - the mouse pointer will look like this <img alt="Mouse pointer while highlighting" src="../images/highlight_color_mouse_pointer.png" /> and you'll be able to highlight several different parts of your text sequentially. To stop highlighting, just click the icon once again. To delete the highlight color, choose the <b>No Fill</b> option.</td>
+					<td><div class = "icon icon-highlightcolor"></div></td>
+					<td>Used to mark separate sentences, phrases, words, or even characters by adding a color band that imitates the highlighter pen effect throughout the text. You can select the required part of the text and click the downward arrow next to the icon to select a color in the palette (this color set does not depend on the selected <b>Color scheme</b> and includes 16 colors) - the color will be applied to the selected text. Alternatively, you can first choose a highlight color and then start selecting the text with the mouse - the mouse pointer will look like this <div class = "icon icon-highlight_color_mouse_pointer"></div> and you'll be able to highlight several different parts of your text sequentially. To stop highlighting, just click the icon once again. To delete the highlight color, choose the <b>No Fill</b> option.</td>
 				</tr>
 				<tr>
 					<td>Font color</td>
-					<td><img alt="Font color" src="../images/fontcolor.png" /></td>
+					<td><div class = "icon icon-fontcolor"></div></td>
 					<td>Used to change the color of the letters/characters in the text. Click the downward arrow next to the icon to <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">select the color</a>.</td>
 				</tr>
 				<tr>
 					<td>Bold</td>
-					<td><img alt="Bold" src="../images/bold.png" /></td>
+					<td><div class = "icon icon-bold"></div></td>
 					<td>Used to make the font bold giving it a heavier appearance.</td>
 				</tr>
 				<tr>
 					<td>Italic</td>
-					<td><img alt="Italic" src="../images/italic.png" /></td>
+					<td><div class = "icon icon-italic"></div></td>
 					<td>Used to make the font slightly slanted to the right.</td>
 				</tr>
 				<tr>
 					<td>Underline</td>
-					<td><img alt="Underline" src="../images/underline.png" /></td>
+					<td><div class = "icon icon-underline"></div></td>
 					<td>Used to make the text underlined with a line going under the letters.</td>
 				</tr>
 				<tr>
 					<td>Strikeout</td>
-					<td><img alt="Strikeout" src="../images/strike.png" /></td>
+					<td><div class = "icon icon-strike"></div></td>
 					<td>Used to make the text struck out with a line going through the letters.</td>
 				</tr>
 				<tr>
 					<td>Superscript</td>
-					<td><img alt="Superscript" src="../images/sup.png" /></td>
+					<td><div class = "icon icon-sup"></div></td>
 					<td>Used to make the text smaller placing it in the upper part of the text line, e.g. as in fractions.</td>
 				</tr>
 				<tr>
 					<td>Subscript</td>
-					<td><img alt="Subscript" src="../images/sub.png" /></td>
+					<td><div class = "icon icon-sub"></div></td>
 					<td>Used to make the text smaller placing it in the lower part of the text line, e.g. as in chemical formulas.</td>
 				</tr>
 			</table>
@@ -153,7 +154,7 @@
 			<p>To do that,</p>
 			<ol style="margin-left: 280px;">
 				<li>put the cursor within the required paragraph or select several paragraphs with the mouse,</li>
-				<li>use the corresponding fields of the <img alt="Paragraph settings Icon" src="../images/text_settings_icon.png" /> <b>Paragraph settings</b> tab on the right sidebar to achieve the desired results:
+				<li>use the corresponding fields of the <div class = "icon icon-text_settings_icon"></div> <b>Paragraph settings</b> tab on the right sidebar to achieve the desired results:
 					<ul>
 						<li><b>Line Spacing</b> - set the line height for the text lines within the paragraph. You can select among two options: <b>multiple</b> (sets line spacing that can be expressed in numbers greater than 1), <b>exactly</b> (sets fixed line spacing). You can specify the necessary value in the field on the right.</li>
 						<li><b>Paragraph Spacing</b> - set the amount of space between paragraphs.
@@ -166,10 +167,10 @@
 				</li>
 			</ol>
             <p class="note"><b>Note</b>: these parameters can also be found in the <a href="../UsageInstructions/InsertText.htm#textadvancedsettings" onclick="onhyperlinkclick(this)"><b>Paragraph - Advanced Settings</b></a> window.</p>
-			<p>To quickly change the current paragraph line spacing, you can also use the <b>Line spacing</b> <img alt="Line spacing" src="../images/linespacing.png" /> icon on the <b>Home</b> tab of the top toolbar selecting the required value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
-		    <p>To change the paragraph offset from the left side of the text box, put the cursor within the required paragraph, or select several paragraphs with the mouse and use the respective icons on the <b>Home</b> tab of the top toolbar: <b>Decrease indent</b> <img alt="Decrease indent" src="../images/decreaseindent.png" /> and <b>Increase indent</b> <img alt="Increase indent" src="../images/increaseindent.png" />.</p>
+			<p>To quickly change the current paragraph line spacing, you can also use the <b>Line spacing</b> <div class = "icon icon-linespacing"></div> icon on the <b>Home</b> tab of the top toolbar selecting the required value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
+		    <p>To change the paragraph offset from the left side of the text box, put the cursor within the required paragraph, or select several paragraphs with the mouse and use the respective icons on the <b>Home</b> tab of the top toolbar: <b>Decrease indent</b> <div class = "icon icon-decreaseindent"></div> and <b>Increase indent</b> <div class = "icon icon-increaseindent"></div>.</p>
             <h2 id="textadvancedsettings">Adjust paragraph advanced settings</h2>
-		    <p>To open the <b>Paragraph - Advanced Settings</b> window, right-click the text and choose the <b>Paragraph Advanced Settings</b> option from the menu. It's also possible to put the cursor within the required paragraph - the <img alt="Paragraph settings Icon" src="../images/text_settings_icon.png" /> <b>Paragraph settings</b> tab will be activated on the right sidebar. Press the <b>Show advanced settings</b> link. The paragraph properties window will be opened:</p>
+		    <p>To open the <b>Paragraph - Advanced Settings</b> window, right-click the text and choose the <b>Paragraph Advanced Settings</b> option from the menu. It's also possible to put the cursor within the required paragraph - the <div class = "icon icon-text_settings_icon"></div> <b>Paragraph settings</b> tab will be activated on the right sidebar. Press the <b>Show advanced settings</b> link. The paragraph properties window will be opened:</p>
 			<img alt="Paragraph Properties - Indents & Spacing tab" src="../images/textadvancedsettings1.png" />
 			<p>The <b>Indents & Spacing</b> tab allows you to:</p>
             <ul>
@@ -184,15 +185,15 @@
                 <li>change the paragraph <b>line spacing</b>.</li>
             </ul>
             <p>You can also use the horizontal <b>ruler</b> to set indents.</p>
-            <img alt="Ruler - Indent markers" src="../images/indents_ruler.png" />
+            <div class = "big big-indents_ruler"></div>
             <p>Select the necessary paragraph(s) and drag the indent markers along the ruler.</p>
             <ul>
-                <li><b>First Line Indent</b> marker <img alt="First Line Indent marker" src="../images/firstline_indent.png" /> is used to set the offset from the left internal margin of the text box for the first line of the paragraph.</li>
-                <li><b>Hanging Indent</b> marker <img alt="Hanging Indent marker" src="../images/hanging.png" /> is used to set the offset from the left internal margin of the text box for the second and all the subsequent lines of the paragraph.</li>
-                <li><b>Left Indent</b> marker <img alt="Left Indent marker" src="../images/leftindent.png" /> is used to set the entire paragraph offset from the left internal margin of the text box.</li>
-                <li><b>Right Indent</b> marker <img alt="Right Indent marker" src="../images/right_indent.png" /> is used to set the paragraph offset from the right internal margin of the text box.</li>
+                <li><b>First Line Indent</b> marker <div class = "icon icon-firstline_indent"></div> is used to set the offset from the left internal margin of the text box for the first line of the paragraph.</li>
+                <li><b>Hanging Indent</b> marker <div class = "icon icon-hanging"></div> is used to set the offset from the left internal margin of the text box for the second and all the subsequent lines of the paragraph.</li>
+                <li><b>Left Indent</b> marker <div class = "icon icon-leftindent"></div> is used to set the entire paragraph offset from the left internal margin of the text box.</li>
+                <li><b>Right Indent</b> marker <div class = "icon icon-right_indent"></div> is used to set the paragraph offset from the right internal margin of the text box.</li>
             </ul>
-            <p class="note"><b>Note</b>: if you don't see the rulers, switch to the <b>Home</b> tab of the top toolbar, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon at the upper right corner and uncheck the <b>Hide Rulers</b> option to display them.</p>
+            <p class="note"><b>Note</b>: if you don't see the rulers, switch to the <b>Home</b> tab of the top toolbar, click the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> icon at the upper right corner and uncheck the <b>Hide Rulers</b> option to display them.</p>
             <img alt="Paragraph Properties - Font tab" src="../images/textadvancedsettings2.png" />
 			<p>The <b>Font</b> tab contains the following parameters:</p>
 			<ul>
@@ -213,23 +214,23 @@
                 <li><b>Tab Position</b> - is used to set custom tab stops. Enter the necessary value in this box, adjust it more precisely using the arrow buttons and press the <b>Specify</b> button. Your custom tab position will be added to the list in the field below.</li>
 			    <li><b>Alignment</b> - is used to set the necessary alignment type for each of the tab positions in the list above. Select the necessary tab position in the list, choose the <b>Left</b>, <b>Center</b> or <b>Right</b> option from the <b>Alignment</b> drop-down list and press the <b>Specify</b> button.
 			        <ul>
-			            <li><b>Left</b> - lines up your text on the left side at the tab stop position; the text moves to the right from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Left Tab Stop marker" src="../images/tabstopleft_marker.png" /> marker.</li>
-			            <li><b>Center</b> - centres the text at the tab stop position. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Center Tab Stop marker" src="../images/tabstopcenter_marker.png" /> marker.</li>
-			            <li><b>Right</b> - lines up your text on the right side at the tab stop position; the text moves to the left from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Right Tab Stop marker" src="../images/tabstopright_marker.png" /> marker.</li>
+			            <li><b>Left</b> - lines up your text on the left side at the tab stop position; the text moves to the right from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <div class = "icon icon-tabstopleft_marker"></div> marker.</li>
+			            <li><b>Center</b> - centres the text at the tab stop position. Such a tab stop will be indicated on the horizontal ruler by the <div class = "icon icon-tabstopcenter_marker"></div> marker.</li>
+			            <li><b>Right</b> - lines up your text on the right side at the tab stop position; the text moves to the left from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <div class = "icon icon-tabstopright_marker"></div> marker.</li>
 			        </ul>
 			        <p>To delete tab stops from the list, select a tab stop and press the <b>Remove</b> or <b>Remove All</b> button.</p>
 			    </li>
 			</ul>
             <p>To set tab stops, you can also use the horizontal ruler:</p>
             <ol>
-                <li>Click the tab selector button <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> in the upper left corner of the working area to choose the necessary tab stop type: <b>Left</b> <img alt="Left Tab Stop button" src="../images/tabstopleft.png" />, <b>Center</b> <img alt="Center Tab Stop button" src="../images/tabstopcenter.png" />, <b>Right</b> <img alt="Right Tab Stop button" src="../images/tabstopright.png" />.</li>
+                <li>Click the tab selector button <div class = "icon icon-tabstopleft"></div> in the upper left corner of the working area to choose the necessary tab stop type: <b>Left</b> <div class = "icon icon-tabstopleft"></div>, <b>Center</b> <div class = "icon icon-tabstopcenter"></div>, <b>Right</b> <div class = "icon icon-tabstopright"></div>.</li>
                 <li>Click on the bottom edge of the ruler where you want to place the tab stop. Drag it along the ruler to change its position. To remove the added tab stop, drag it out of the ruler.
-                    <p><img alt="Horizontal Ruler with the Tab stops added" src="../images/tabstops_ruler.png" /></p>
-                    <p class="note"><b>Note</b>: if you don't see the rulers, switch to the <b>Home</b> tab of the top toolbar, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon at the upper right corner and uncheck the <b>Hide Rulers</b> option to display them.</p>
+                    <p><div class = "big big-tabstops_ruler"></div></p>
+                    <p class="note"><b>Note</b>: if you don't see the rulers, switch to the <b>Home</b> tab of the top toolbar, click the <b>View settings</b> <div class = "icon icon-viewsettingsicon"></div> icon at the upper right corner and uncheck the <b>Hide Rulers</b> option to display them.</p>
                 </li>
             </ol>
             <h2>Edit a Text Art style</h2>
-            <p>Select a text object and click the <b>Text Art settings</b> <img alt="Text Art settings icon" src="../images/textart_settings_icon.png" /> icon on the right sidebar.</p>
+            <p>Select a text object and click the <b>Text Art settings</b> <div class = "icon icon-textart_settings_icon"></div> icon on the right sidebar.</p>
             <p><img alt="Text Art setting tab" src="../images/right_textart.png" /></p>
             <ul>
                 <li>Change the applied text style selecting a new <b>Template</b> from the gallery. You can also change the basic style additionally by selecting a different font type, size etc.</li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/ManageSlides.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add new blank slides, duplicate, move or delete them" />
 		<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>By default, a newly created presentation has one blank <em>Title Slide</em>. In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can create new slides, copy a slide to paste it later to another place in the slide list, duplicate slides, move slides to change their order, delete unnecessary slides and mark some slides as hidden. </p>
 			<p><b>To create a new <em>Title and Content</em> slide:</b></p>
 			<ul>
-				<li>click the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, or</li>
+				<li>click the <div class = "icon icon-addslide"></div> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, or</li>
 				<li>right-click any slide in the list and select the <b>New Slide</b> option from the contextual menu, or</li>
                 <li>press the <b>Ctrl+M</b> key combination.</li>
 			</ul>
             <p><b>To create a new slide with a different layout:</b></p>
             <ol>
-                <li>click the arrow next to the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
+                <li>click the arrow next to the <div class = "icon icon-addslide"></div> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
                 <li>
                     select a slide with the necessary layout from the menu.
                     <p class="note"><b>Note</b>: you can change the layout of the added slide anytime. For additional information on how to do that, please refer to the <a href="../UsageInstructions/SetSlideParameters.htm#changelayout" onclick="onhyperlinkclick(this)">Set slide parameters</a> section.</p>
@@ -59,7 +60,7 @@
                 <li>select the <b>Hide Slide</b> option from the contextual menu.</li>
             </ol>
             <p>The number that corresponds to the hidden slide in the slide list on the left will be crossed out. To display the hidden slide as a regular one in the slide list, click the <b>Hide Slide</b> option once again.</p>
-            <p><img alt="Hidden slide" src="../images/hidden_slide.png" /></p>
+            <p><div class = "big big-hidden_slide"></div></p>
             <p class="note"><b>Note</b>: use this option if you do not want to demonstrate some slides to your audience, but want to be able to access them if necessary. If you start the slideshow in the <a href="../UsageInstructions/PreviewPresentation.htm#presenter" onclick="onhyperlinkclick(this)"><b>Presenter</b> mode</a>, you can see all the existing slides in the list on the left, while hidden slides numbers are crossed out. If you wish to show a slide marked as hidden to others, just click it in the slide list on the left - the slide will be displayed.</p>
             <p><b>To select all the existing slides at once:</b></p>
 			<ol>

apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Move, rotate, resize and reshape autoshapes, images, charts." />
 		<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,26 +20,26 @@
                 <b>Note</b>: the list of keyboard shortcuts that can be used when working with objects is available <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">here</a>.
             </p>
             <h3>Resize objects</h3>
-			<p>To change the <b>autoshape/image/chart/table/text box</b> size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on the object edges. To maintain the original proportions of the selected object while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
-			<p><img alt="Maintaining proportions" src="../images/maintain_proportions.png" /></p>
+			<p>To change the <b>autoshape/image/chart/table/text box</b> size, drag small squares <div class = "icon icon-resize_square"></div> situated on the object edges. To maintain the original proportions of the selected object while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
+			<p><div class = "big big-maintain_proportions"></div></p>
 			<p>To specify the precise width and height of a <b>chart</b>, select it on a slide and use the <b>Size</b> section of the right sidebar that will be activated.</p>
 			<p>To specify the precise dimensions of an <b>image</b> or <b>autoshape</b>, right-click the necessary object on the slide and select the <b>Image/Shape Advanced Settings</b> option from the menu. Specify necessary values on the <b>Size</b> tab of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
 			<h3>Reshape autoshapes</h3>
-			<p>When modifying some shapes, for example Figured arrows or Callouts, the yellow diamond-shaped <img alt="Yellow diamond icon" src="../images/yellowdiamond.png" /> icon is also available. It allows adjusting some aspects of the shape, for example, the length of the head of an arrow.</p>
-			<p><img alt="Reshaping autoshape" src="../images/reshaping.png" /></p>
+			<p>When modifying some shapes, for example Figured arrows or Callouts, the yellow diamond-shaped <div class = "icon icon-yellowdiamond"></div> icon is also available. It allows adjusting some aspects of the shape, for example, the length of the head of an arrow.</p>
+			<p><div class = "big big-reshaping"></div></p>
 			<h3>Move objects</h3>
-			<p>To alter the <b>autoshape/image/chart/table/text box</b> position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the object. Drag the object to the necessary position without releasing the mouse button. 
+			<p>To alter the <b>autoshape/image/chart/table/text box</b> position, use the <div class = "icon icon-arrow"></div> icon that appears after hovering your mouse cursor over the object. Drag the object to the necessary position without releasing the mouse button. 
 			To move the object by the one-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows. 
 			To move the object strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.</p>
 			<p>To specify the precise position of an <b>image</b>, right-click it on a slide and select the <b>Image Advanced Settings</b> option from the menu. Specify necessary values in the <b>Position</b> section of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
 			<h3>Rotate objects</h3>
-			<p>To manually rotate an <b>autoshape/image/text box</b>, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
-            <p>To rotate the object by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically, you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" />  or the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon to the right. Click one of the buttons:</p>
+			<p>To manually rotate an <b>autoshape/image/text box</b>, hover the mouse cursor over the rotation handle <div class = "icon icon-greencircle"></div> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
+            <p>To rotate the object by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically, you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <div class = "icon icon-shape_settings_icon"></div>  or the <b>Image settings</b> <div class = "icon icon-image_settings_icon"></div> icon to the right. Click one of the buttons:</p>
             <ul>
-                <li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the object by 90 degrees counterclockwise</li>
-                <li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the object by 90 degrees clockwise</li>
-                <li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the object horizontally (left to right)</li>
-                <li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the object vertically (upside down)</li>
+                <li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the object by 90 degrees counterclockwise</li>
+                <li><div class = "icon icon-rotateclockwise"></div> to rotate the object by 90 degrees clockwise</li>
+                <li><div class = "icon icon-fliplefttoright"></div> to flip the object horizontally (left to right)</li>
+                <li><div class = "icon icon-flipupsidedown"></div> to flip the object vertically (upside down)</li>
             </ul>
             <p>It's also possible to right-click the object, choose the <b>Rotate</b> option from the contextual menu and then use one of the available rotation options.</p>
             <p>To rotate the object by an exactly specified angle, click the <b>Show advanced settings</b> link on the right sidebar and use the <b>Rotation</b> tab of the <b>Advanced Settings</b> window. Specify the necessary value measured in degrees in the <b>Angle</b> field and click <b>OK</b>.</p>

apps/presentationeditor/main/resources/help/en/UsageInstructions/OpenCreateNew.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Open a recently edited presentation, create a new one, or return to the list of existing presentations" />
     <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>In the <em>desktop editor</em></p>
             <ol>
                 <li>in the main program window, select the <b>Presentation</b> menu item from the <b>Create new</b> section of the left sidebar - a new file will open in a new tab,</li>
-                <li>when all the necessary changes are made, click the <b>Save</b> <img alt="Save icon" src="../images/save.png" /> icon in the upper left corner or switch to the <b>File</b> tab and choose the <b>Save as</b> menu item. </li>
+                <li>when all the necessary changes are made, click the <b>Save</b> <div class = "icon icon-save"></div> icon in the upper left corner or switch to the <b>File</b> tab and choose the <b>Save as</b> menu item. </li>
                 <li>in the file manager window, select the file location, specify its name, choose the format you want to save the presentation to (PPTX, Presentation template (POTX), ODP, OTP, PDF or PDFA) and click the <b>Save</b> button.</li>
             </ol>
         </div>
@@ -60,7 +61,7 @@
             </ol>
         </div>
 
-        <p>To open the folder where the file is stored <span class="onlineDocumentFeatures"> in a new browser tab in the <em>online version</em>,</span> <span class="desktopDocumentFeatures">in the file explorer window in the <em>desktop version</em>,</span> click the <img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> icon on the right side of the editor header. Alternatively, you can switch to the <b>File</b> tab of the top toolbar and select the <b>Open file location</b> option.</p>
+        <p>To open the folder where the file is stored <span class="onlineDocumentFeatures"> in a new browser tab in the <em>online version</em>,</span> <span class="desktopDocumentFeatures">in the file explorer window in the <em>desktop version</em>,</span> click the <div class = "icon icon-gotodocuments"></div> <b>Open file location</b> icon on the right side of the editor header. Alternatively, you can switch to the <b>File</b> tab of the top toolbar and select the <b>Open file location</b> option.</p>
     </div>
 </body>
 </html>

apps/presentationeditor/main/resources/help/en/UsageInstructions/PhotoEditor.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The description of Photo Editor plugin for ONLYOFFICE editors, which allows to edit images" />
     <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>Select an image in your presentation.</li>
             <li>
-                Switch to the <b>Plugins</b> tab and choose <img alt="Photo Editor plugin icon" src="../images/photoeditor.png" /> <b>Photo Editor</b>.<br />
+                Switch to the <b>Plugins</b> tab and choose <div class = "icon icon-photoeditor"></div> <b>Photo Editor</b>.<br />
                 You are now in the editing environment.
                 <ul>
                     <li>

apps/presentationeditor/main/resources/help/en/UsageInstructions/PreviewPresentation.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Preview your presentation" />
 		<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,11 +19,11 @@
             <p class="note">Note: If you download a presentation that was created using a third-party application, you can see a preview of the animation effects, if any.</p>
 			<p>To preview the current presentation in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can:</p>
             <ul>
-                <li>click the <b>Start slideshow</b> <img alt="Start slideshow icon" src="../images/startpreview.png" /> icon on the <b>Home</b> tab of the top toolbar or on the left side of the status bar, or</li>
+                <li>click the <b>Start slideshow</b> <div class = "icon icon-startpreview"></div> icon on the <b>Home</b> tab of the top toolbar or on the left side of the status bar, or</li>
                 <li>select a certain slide within the slide list on the left, right-click it and choose the <b>Start Slideshow</b> option from the contextual menu.</li>
             </ul>
             <p>The preview will start from the currently selected slide. </p>
-            <p>You can also click the arrow next to the <b>Start slideshow</b> <img alt="Start slideshow icon" src="../images/startpreview.png" /> icon on the <b>Home</b> tab of the top toolbar and select one of the available options:</p>
+            <p>You can also click the arrow next to the <b>Start slideshow</b> <div class = "icon icon-startpreview"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the available options:</p>
             <ul>
                 <li><b>Show from Beginning</b> - to start the preview from the very first slide,</li>
                 <li><b>Show from Current slide</b> - to start the preview from the currently selected slide,</li>
@@ -35,31 +36,31 @@
             <p>In the <b>Preview</b> mode, you can use the following controls at the bottom left corner:</p>
             <p><img alt="Preview Mode controls" src="../images/preview_mode.png" /></p>
             <ul>
-                <li>the <b>Previous slide</b> <img alt="Previous slide icon" src="../images/previousslide.png" /> button allows you to return to the previous slide.</li>
-                <li>the <b>Pause presentation</b> <img alt="Pause presentation icon" src="../images/pausepresentation.png" /> button allows you to stop previewing. When the button is pressed, it turns into the <img alt="Start presentation icon" src="../images/startpresentation.png" /> button.</li>
-                <li>the <b>Start presentation</b> <img alt="Start presentation icon" src="../images/startpresentation.png" /> button allows you to resume previewing. When the button is pressed, it turns into the <img alt="Pause presentation icon" src="../images/pausepresentation.png" /> button.</li>
-                <li>the <b>Next slide</b> <img alt="Next slide icon" src="../images/nextslide.png" /> button allows you to advance to the following slide.</li>
+                <li>the <b>Previous slide</b> <div class = "icon icon-previousslide"></div> button allows you to return to the previous slide.</li>
+                <li>the <b>Pause presentation</b> <div class = "icon icon-pausepresentation"></div> button allows you to stop previewing. When the button is pressed, it turns into the <div class = "icon icon-startpresentation"></div> button.</li>
+                <li>the <b>Start presentation</b> <div class = "icon icon-startpresentation"></div> button allows you to resume previewing. When the button is pressed, it turns into the <div class = "icon icon-pausepresentation"></div> button.</li>
+                <li>the <b>Next slide</b> <div class = "icon icon-nextslide"></div> button allows you to advance to the following slide.</li>
                 <li>the <b>Slide number indicator</b> displays the current slide number as well as the overall number of slides in the presentation. To go to a certain slide in the preview mode, click on the <b>Slide number indicator</b>, enter the necessary slide number in the opened window and press <b>Enter</b>.</li>
-                <li>the <b>Full screen</b> <img alt="Full screen icon" src="../images/fullscreen.png" /> button allows you to switch to the full screen mode.</li>
-                <li>the <b>Exit full screen</b> <img alt="Exit full screen icon" src="../images/exitfullscreen.png" /> button allows you to exit the full screen mode.</li>
-                <li>the <b>Close slideshow</b> <img alt="Close slideshow icon" src="../images/closepreview.png" /> button allows you to exit the preview mode.</li>
+                <li>the <b>Full screen</b> <div class = "icon icon-fullscreen"></div> button allows you to switch to the full screen mode.</li>
+                <li>the <b>Exit full screen</b> <div class = "icon icon-exitfullscreen"></div> button allows you to exit the full screen mode.</li>
+                <li>the <b>Close slideshow</b> <div class = "icon icon-closepreview"></div> button allows you to exit the preview mode.</li>
             </ul>
 			<p>You can also <a href="../HelpfulHints/KeyboardShortcuts.htm#preview" onclick="onhyperlinkclick(this)">use the keyboard shortcuts</a> to navigate between the slides in the preview mode.</p>
             <h3 id="presenter">Use the Presenter mode</h3>
             <p class="note"><b>Note</b>: in the <em>desktop version</em>, the presenter mode can be activated only if the second monitor is connected.</p>
             <p>In the <b>Presenter</b> mode, you can view your presentations with slide notes in a separate window, while demonstrating it without notes on a different monitor. The notes for each slide are displayed below the slide preview area.</p>
-            <p>To navigate among the slides, you can use the <img alt="Previous Slide icon" src="../images/previousslide.png" /> and <img alt="Next Slide icon" src="../images/nextslide.png" /> buttons or click slides in the list on the left. The hidden slide numbers are crossed out in the slide list on the left. If you wish to show a slide marked as hidden to others, just click it in the slide list on the left - the slide will be displayed.</p>
+            <p>To navigate among the slides, you can use the <div class = "icon icon-previousslide"></div> and <div class = "icon icon-nextslide"></div> buttons or click slides in the list on the left. The hidden slide numbers are crossed out in the slide list on the left. If you wish to show a slide marked as hidden to others, just click it in the slide list on the left - the slide will be displayed.</p>
             <p>You can use the following controls below the slide preview area:</p>
             <p><img alt="Presenter Mode controls" src="../images/presenter_mode.png" /></p>
             <ul>
                 <li>the <b>Timer</b> displays the elapsed time of the presentation in the <em>hh.mm.ss</em> format.</li>
-                <li>the <b>Pause presentation</b> <img alt="Pause presentation icon" src="../images/presenter_pausepresentation.png" /> button allows you to stop previewing. When the button is pressed, it turns into the <img alt="Start presentation icon" src="../images/presenter_startpresentation.png" /> button.</li>
-                <li>the <b>Start presentation</b> <img alt="Start presentation icon" src="../images/presenter_startpresentation.png" /> button allows you to resume previewing. When the button is pressed, it turns into the <img alt="Pause presentation icon" src="../images/presenter_pausepresentation.png" /> button.</li>
+                <li>the <b>Pause presentation</b> <div class = "icon icon-presenter_pausepresentation"></div> button allows you to stop previewing. When the button is pressed, it turns into the <div class = "icon icon-presenter_startpresentation"></div> button.</li>
+                <li>the <b>Start presentation</b> <div class = "icon icon-presenter_startpresentation"></div> button allows you to resume previewing. When the button is pressed, it turns into the <div class = "icon icon-presenter_pausepresentation"></div> button.</li>
                 <li>the <b>Reset</b> button allows to reset the elapsed time of the presentation.</li>
-                <li>the <b>Previous slide</b> <img alt="Previous slide icon" src="../images/presenter_previousslide.png" /> button allows you to return to the previous slide.</li>
-                <li>the <b>Next slide</b> <img alt="Next slide icon" src="../images/presenter_nextslide.png" /> button allows you to advance to the following slide.</li>
+                <li>the <b>Previous slide</b> <div class = "icon icon-presenter_previousslide"></div> button allows you to return to the previous slide.</li>
+                <li>the <b>Next slide</b> <div class = "icon icon-presenter_nextslide"></div> button allows you to advance to the following slide.</li>
                 <li>the <b>Slide number indicator</b> displays the current slide number as well as the overall number of slides in the presentation.</li>
-                <li>the <b>Pointer</b> <img alt="Pointer icon" src="../images/pointer.png" /> button allows you to highlight something on the screen when showing the presentation. When this option is enabled, the button looks like this: <img alt="Pointer icon" src="../images/pointer_enabled.png" />. To point some objects, hover your mouse pointer over the slide preview area and move the pointer around the slide. The pointer will look the following way: <img alt="Pointer icon" src="../images/pointer_screen.png" />. To disable this option, click the <img alt="Pointer icon" src="../images/pointer_enabled.png" /> button once again.</li>
+                <li>the <b>Pointer</b> <div class = "icon icon-pointer"></div> button allows you to highlight something on the screen when showing the presentation. When this option is enabled, the button looks like this: <div class = "icon icon-pointer_enabled"></div>. To point some objects, hover your mouse pointer over the slide preview area and move the pointer around the slide. The pointer will look the following way: <div class = "icon icon-pointer_screen"></div>. To disable this option, click the <div class = "icon icon-pointer_enabled"></div> button once again.</li>
                 <li>the <b>End slideshow</b> button allows you to exit the <b>Presenter</b> mode.</li>
             </ul>			
 		</div>

apps/presentationeditor/main/resources/help/en/UsageInstructions/SavePrintDownload.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Save, print and download your presentations 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">By default, the online <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a> automatically saves your file every 2 seconds when you are working on it preventing your data loss if the program closes unexpectedly. If you co-edit the file in the <b>Fast</b> mode, the timer requests for updates 25 times a second and saves the changes if there are any. When the file is co-edited in the <b>Strict</b> mode, changes are automatically saved within 10-minute intervals. If you need, you can easily select the preferred co-editing mode or disable the <b>Autosave</b> feature on the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> page.</p>
             <p>To save your presentation manually in the current format and location,</p>
             <ul>
-                <li>press the <b>Save</b> <img alt="Save icon" src="../images/save.png" /> icon on the left side of the editor header, or</li>
+                <li>press the <b>Save</b> <div class = "icon icon-save"></div> icon on the left side of the editor header, or</li>
                 <li>use the <b>Ctrl+S</b> key combination, or</li>
                 <li>click the <b>File</b> tab of the top toolbar and select the <b>Save</b> option.</li>
             </ul>
@@ -51,7 +52,7 @@
             <h3 id="print">Printing</h3>
             <p>To print out the current presentation,</p>
             <ul>
-                <li>click the <b>Print</b> <img alt="Print icon" src="../images/print.png" /> icon on the left side of the editor header, or</li>
+                <li>click the <b>Print</b> <div class = "icon icon-print"></div> icon on the left side of the editor header, or</li>
                 <li>use the <b>Ctrl+P</b> key combination, or</li>
                 <li>click the <b>File</b> tab of the top toolbar and select the <b>Print</b> option.</li>
             </ul>

apps/presentationeditor/main/resources/help/en/UsageInstructions/SetSlideParameters.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Set slide parameters: select background fill, themes, color schemes, slide layouts" />
 		<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,16 +20,16 @@
                 <li>
                     <b>Themes</b> allow you to quickly change the presentation design, notably the slides background appearance, predefined fonts for titles and texts and the color scheme that is used for the presentation elements.
                     <b>To select a theme</b> for the presentation, click on the necessary predefined theme from the themes gallery on the right side of the top toolbar on the <b>Home</b> tab. The selected theme will be applied to all the slides if you have not previously selected certain slides to apply the theme to.
-                    <p><img alt="Themes gallery" src="../images/themes.png" /></p>
+                    <p><div class = "big big-themes"></div></p>
                     <p>To change the selected theme for one or more slides, you can right-click the selected slides in the list on the left (or right-click a slide in the editing area), select the <b>Change Theme</b> option from the contextual menu and choose the necessary theme.</p>
                 </li>
                 <li>
                     <b>Color Schemes</b> affect the predefined colors used for the presentation elements (fonts, lines, fills etc.) and allow you to maintain color consistency throughout the entire presentation.
-                    <b>To change a color scheme</b>, click the <img alt="Change color scheme icon" src="../images/changecolorscheme.png" /> <b>Change color scheme</b> icon on the <b>Home</b> tab of the top toolbar and select the necessary scheme from the drop-down list. The selected color scheme will be highlighted in the list and applied to all the slides.
+                    <b>To change a color scheme</b>, click the <div class = "icon icon-changecolorscheme"></div> <b>Change color scheme</b> icon on the <b>Home</b> tab of the top toolbar and select the necessary scheme from the drop-down list. The selected color scheme will be highlighted in the list and applied to all the slides.
                     <p><img alt="Color Schemes" src="../images/colorscheme.png" /></p>
                 </li>
                 <li>
-                    <b>To change the size</b> of all the slides in the presentation, click the <img alt="Select slide size icon" src="../images/selectslidesizeicon.png" /> <b>Select slide size</b> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the drop-down list. You can select:
+                    <b>To change the size</b> of all the slides in the presentation, click the <div class = "icon icon-selectslidesizeicon"></div> <b>Select slide size</b> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the drop-down list. You can select:
                     <ul>
                         <li>one of the two quick-access presets - <b>Standard (4:3)</b> or <b>Widescreen (16:9)</b>,</li>
                         <li>
@@ -63,7 +64,7 @@
                         <li>in the slide list on the left, select the slides you want to apply a transition to,</li>
                         <li>
                             choose a transition in the <b>Effect</b> drop-down list on the <b>Slide settings</b> tab,
-                            <p class="note">To open the <b>Slide settings</b> tab, you can click the <b>Slide settings</b> <img alt="Slide settings icon" src="../images/slide_settings_icon.png" /> icon on the right or right-click the slide in the slide editing area and select the <b>Slide Settings</b> option from the contextual menu.</p>
+                            <p class="note">To open the <b>Slide settings</b> tab, you can click the <b>Slide settings</b> <div class = "icon icon-slide_settings_icon"></div> icon on the right or right-click the slide in the slide editing area and select the <b>Slide Settings</b> option from the contextual menu.</p>
                         </li>
                         <li>adjust the transition properties: choose a transition variation, duration and the way to advance slides,</li>
                         <li>
@@ -76,7 +77,7 @@
                     <a id="changelayout"></a><b>To change a slide layout:</b>
                     <ol>
                         <li>in the slide list on the left, select the slides you want to apply a new layout to,</li>
-                        <li>click the <img alt="Change slide layout icon" src="../images/changelayout.png" /> <b>Change slide layout</b> icon on the <b>Home</b> tab of the top toolbar,</li>
+                        <li>click the <div class = "icon icon-changelayout"></div> <b>Change slide layout</b> icon on the <b>Home</b> tab of the top toolbar,</li>
                         <li>
                             select the necessary layout from the menu.
                             <p>Alternatively, you can right-click the necessary slide in the list on the left or in the editing area, select the <b>Change Layout</b> option from the contextual menu and choose the necessary layout.</p>
@@ -87,13 +88,13 @@
                 <li>
                     <a id="addtolayout"></a><b>To add objects to a slide layout:</b>
                     <ol>
-                        <li>click the <b>Change slide layout</b> <img alt="Change slide layout icon" src="../images/changelayout.png" /> icon and select a layout you want to add an object to,</li>
+                        <li>click the <b>Change slide layout</b> <div class = "icon icon-changelayout"></div> icon and select a layout you want to add an object to,</li>
                         <li>
                             using the <b>Insert</b> tab of the top toolbar, add the necessary object to the slide (<em>image</em>, <em>table</em>, <em>chart</em>, <em>shape</em>), then <b>right-click</b> on this object and select <b>Add to Layout</b> option,
                             <br /><img alt="Add to layout" src="../images/addtolayout.png" />
                         </li>
                         <li>
-                            on the <b>Home</b> tab, click <b>Change slide layout</b> <img alt="Change slide layout icon" src="../images/changelayout.png" /> and apply the changed layout.
+                            on the <b>Home</b> tab, click <b>Change slide layout</b> <div class = "icon icon-changelayout"></div> and apply the changed layout.
                             <p><img alt="Apply layout" src="../images/applylayout.png" /></p>
                             <p>The selected objects will be added to the current theme's layout.</p>
                             <p class="note">Objects placed on a slide this way cannot be selected, resized, or moved.</p>

apps/presentationeditor/main/resources/help/en/UsageInstructions/Thesaurus.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The description of Thesaurus plugin for ONLYOFFICE editors, which helps you find synonyms" />
     <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>Select the word in your presentation.</li>
-            <li>Switch to the <b>Plugins</b> tab and choose <img alt="Thesaurus plugin icon" src="../images/thesaurus_icon.png" /> <b>Thesaurus</b>.</li>
+            <li>Switch to the <b>Plugins</b> tab and choose <div class = "icon icon-thesaurus_icon"></div> <b>Thesaurus</b>.</li>
             <li>The synonyms and antonyms will show up in the left sidebar.</li>
             <li>Click a word to replace the word in your presentation.</li>
         </ol>

apps/presentationeditor/main/resources/help/en/UsageInstructions/Translator.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The description of Translator plugin for ONLYOFFICE editors, which allows to translate text into different languages" />
     <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>In the <a target="_blank" href="https://www.onlyoffice.com/en/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can translate your presentation from and to numerous languages.</p>
         <ol>
             <li>Select the text that you want to translate.</li>
-            <li>Switch to the <b>Plugins</b> tab and choose <img alt="Translator plugin icon" src="../images/translator.png" /> <b>Translator</b>, the Translator appears in a sidebar on the left.</li>
+            <li>Switch to the <b>Plugins</b> tab and choose <div class = "icon icon-translator"></div> <b>Translator</b>, the Translator appears in a sidebar on the left.</li>
             <li>Click the drop-down box and choose the preferred language.</li>
         </ol>
         <p>The text will be translated to the required language.</p>

apps/presentationeditor/main/resources/help/en/UsageInstructions/ViewPresentationInfo.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="View presentation title, author, location, creation date, persons with the rights to view or edit the presentation" />
 		<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>
@@ -38,7 +39,7 @@
                 <h3>Version History</h3>
                 <p>In the <em>online version</em>, you can view the version history for the files stored in the cloud.</p>
                 <p class="note">This option is not available for users with the <b>Read Only</b> permissions.</p>
-                <p>To view all the changes made to this presentation, select the <b>Version History</b> option at the left sidebar. It's also possible to open the history of versions using the <img alt="Version History icon" src="../images/versionhistoryicon.png" /> <b>Version History</b> icon on the <b>Collaboration</b> tab of the top toolbar. You'll see the list of this presentation versions (major changes) and revisions (minor changes) with the indication of each version/revision author and creation date and time. For presentation versions, the version number is also specified (e.g. <em>ver. 2</em>). To know exactly which changes have been made in each separate version/revision, you can view the one you need by clicking it on the left sidebar. The changes made by the version/revision author are marked with the color which is displayed next to the author's name on the left sidebar. You can use the <b>Restore</b> link below the selected version/revision to restore it. <!--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>To view all the changes made to this presentation, select the <b>Version History</b> option at the left sidebar. It's also possible to open the history of versions using the <div class = "icon icon-versionhistoryicon"></div> <b>Version History</b> icon on the <b>Collaboration</b> tab of the top toolbar. You'll see the list of this presentation versions (major changes) and revisions (minor changes) with the indication of each version/revision author and creation date and time. For presentation versions, the version number is also specified (e.g. <em>ver. 2</em>). To know exactly which changes have been made in each separate version/revision, you can view the one you need by clicking it on the left sidebar. The changes made by the version/revision author are marked with the color which is displayed next to the author's name on the left sidebar. You can use the <b>Restore</b> link below the selected version/revision to restore it. <!--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><img alt="Version History" src="../images/versionhistory.png" /></p>
                 <p>To return to the current version of the presentation, use the <b>Close History</b> option on the top of the version list.</p>
             </div>

apps/presentationeditor/main/resources/help/en/UsageInstructions/YouTube.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="The description of YouTube plugin for ONLYOFFICE editors, which allows to embed videos into presentations" />
     <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 @@
                 (the complete address shown in the address line of your browser)
             </li>
             <li>Go to your presentation and place the cursor at the location where you want to include the video.</li>
-            <li>Switch to the <b>Plugins</b> tab and choose <img alt="Youtube plugin icon" src="../images/youtube.png" /> <b>YouTube</b>.</li>
+            <li>Switch to the <b>Plugins</b> tab and choose <div class = "icon icon-youtube"></div> <b>YouTube</b>.</li>
             <li>Paste the <b>URL</b> and click <b>OK</b>.</li>
             <li>Check if it is the correct video and click the <b>OK</b> button below the video.</li>
         </ol>

apps/presentationeditor/main/resources/help/en/search/search.html

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

apps/presentationeditor/main/resources/help/es/HelpfulHints/About.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="The short description of Presentation 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>Acerca del editor de presentaciones</h1>
 			<p><b>El editor de presentaciones</b> es una aplicación <span class="onlineDocumentFeatures">en línea</span> que le permite ver y editar presentaciones<span class="onlineDocumentFeatures"> directamente en su navegador</span>.</p>
 			<p>Usando el <b>editor de presentaciones</b>, puede realizar varias operaciones de edición como en cualquier editor de escritorio, imprimir las presentaciones editadas manteniendo todos los detalles de formato o descargarlas en el disco duro de su ordenador como archivos PPTX, PDF, ODP, POTX, PDF/A u OTP.</p>
-            <p><span class="onlineDocumentFeatures">Para ver la versión actual de software y la información de la licencia en la <em>versión en línea</em>, haga clic en el icono <img alt="Icono Acerca de" src="../images/about.png" /> en la barra izquierda lateral.</span> <span class="desktopDocumentFeatures">Para ver la versión actual de software y la información de la licencia en la <em>versión de escritorio</em>, selecciona la opción <b>Acerca de</b> en la barra lateral izquierda de la ventana principal del programa.</span></p>
+            <p><span class="onlineDocumentFeatures">Para ver la versión actual de software y la información de la licencia en la <em>versión en línea</em>, haga clic en el icono <div class = "icon icon-about"></div> en la barra izquierda lateral.</span> <span class="desktopDocumentFeatures">Para ver la versión actual de software y la información de la licencia en la <em>versión de escritorio</em>, selecciona la opción <b>Acerca de</b> en la barra lateral izquierda de la ventana principal del programa.</span></p>
 		</div>
 	</body>
 </html>

apps/presentationeditor/main/resources/help/es/HelpfulHints/AdvancedSettings.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The advanced settings of Presentation 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,7 +15,7 @@
             <input id="search" class="searchBar" placeholder="Buscar" type="text" onkeypress="doSearch(event)">
         </div>
 		<h1>Ajustes avanzados del editor de presentaciones</h1>
-			<p><b>El editor de presentaciones</b> le permite cambiar los ajustes avanzados. Para acceder a ellos, abra la pestaña <b>Archivo</b>  en la barra de herramientas superior y seleccione la opción <b>Ajustes avanzados...</b>. También puede hacer clic en el icono <b>Mostrar Ajustes</b> <img alt="Icono Mostrar ajustes" src="../images/viewsettingsicon.png" /> a la derecha del editor de encabezado y seleccionar la opción <b>Ajustes Avanzados</b>.</p>
+			<p><b>El editor de presentaciones</b> le permite cambiar los ajustes avanzados. Para acceder a ellos, abra la pestaña <b>Archivo</b>  en la barra de herramientas superior y seleccione la opción <b>Ajustes avanzados...</b>. También puede hacer clic en el icono <b>Mostrar Ajustes</b> <div class = "icon icon-viewsettingsicon"></div> a la derecha del editor de encabezado y seleccionar la opción <b>Ajustes Avanzados</b>.</p>
 			<p>Los ajustes avanzados son:</p>
 			<ul>
                 <li><b>Corrección ortográfica</b> se usa para activar/desactivar la opción de corrección ortográfica.</li>
@@ -23,7 +24,7 @@
                 <li><span class="onlineDocumentFeatures"><b>Guardar automáticamente</b> se usa en la <em>versión en línea</em> para activar/desactivar el autoguardado de los cambios mientras edita.</span> <span class="desktopDocumentFeatures">La <b>Autorecuperación</b> - se usa en la <em>versión de escritorio</em> para activar/desactivar la opción que permite recuperar automáticamente los documentos en caso de cierre inesperado del programa.</span></li>
                 <li class="onlineDocumentFeatures">El <b>Modo Co-edición</b> se usa para seleccionar la visualización de los cambios hechos durante la co-edición:<ul>
                         <li>De forma predeterminada, el modo <b>Rápido</b> es seleccionado, los usuarios que participan en la co-edición del documento verán los cambios a tiempo real una vez que estos se lleven a cabo por otros usuarios.</li>
-                        <li>Si prefiere no ver los cambios de otros usuarios (para que no le moleste, o por otros motivos), seleccione el modo <b>Estricto</b>, y todos los cambios se mostrarán solo una vez que haga clic en el icono <img alt="Icono Guardar" src="../images/saveupdate.png" /> <b>Guardar</b>, notificándole que hay cambios de otros usuarios.</li>
+                        <li>Si prefiere no ver los cambios de otros usuarios (para que no le moleste, o por otros motivos), seleccione el modo <b>Estricto</b>, y todos los cambios se mostrarán solo una vez que haga clic en el icono <div class = "icon icon-saveupdate"></div> <b>Guardar</b>, notificándole que hay cambios de otros usuarios.</li>
                     </ul>
                 </li>
                 <li><b>Valor de Zoom Predeterminado</b> se usa para establecer el valor de zoom predeterminado seleccionándolo en la lista de las opciones disponibles que van desde 50% hasta 200%. También puede elegir la opción <b>Ajustar a la diapositiva</b> o <b>Ajustar a la anchura</b>.</li>

apps/presentationeditor/main/resources/help/es/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,48 +32,48 @@
                 <p>El <b>editor de presentaciones</b> permite seleccionar uno de los dos modos de co-edición disponibles.</p>
                 <ul>
                     <li><b>Rápido</b> se usa de forma predeterminada y muestra los cambios hechos por otros usuarios en tiempo real.</li>
-                    <li><b>Estricto</b> se selecciona para ocultar los cambios de otros usuarios hasta que usted haga clic en el icono <b>Guardar</b> <img alt="Icono Guardar" src="../images/saveupdate.png" /> para guardar sus propios cambios y aceptar los cambios hechos por otros usuarios.</li>
+                    <li><b>Estricto</b> se selecciona para ocultar los cambios de otros usuarios hasta que usted haga clic en el icono <b>Guardar</b> <div class = "icon icon-saveupdate"></div> para guardar sus propios cambios y aceptar los cambios hechos por otros usuarios.</li>
                 </ul>
-                <p>El modo se puede seleccionar en los <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Ajustes Avanzados</a>. También es posible elegir el modo necesario utilizando el icono <img alt="Icono del modo de Co-edición" src="../images/coeditingmode.png" /> <b>Modo de Co-edición</b> en la pestaña <b>Colaboración</b> de la barra de herramientas superior:</p>
+                <p>El modo se puede seleccionar en los <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Ajustes Avanzados</a>. También es posible elegir el modo necesario utilizando el icono <div class = "icon icon-coeditingmode"></div> <b>Modo de Co-edición</b> en la pestaña <b>Colaboración</b> de la barra de herramientas superior:</p>
                 <p><img alt="Menú del modo de Co-edición" src="../images/coeditingmodemenu.png" /></p>
                 <p class="note"><b>Nota</b>: cuando co-edita una presentación en modo <b>Rápido</b> la posibilidad de <b>Rehacer</b> la última operación que se deshizo no está disponible.</p>
                 <p>Cuando una presentación se está editando por varios usuarios simultáneamente en el modo <b>Estricto</b>, los objetos editados (autoformas, objetos de texto, tablas, imágenes, gráficos) aparecen marcados con línea discontinua de diferentes colores. El objeto que está editando se rodea con una línea discontinua de color verde. Las líneas rojas discontinuas indican que los objetos se están editando por otros usuarios. Al poner el cursor del ratón sobre uno de los pasajes editados se muestra el nombre del usuario que está editandolo en este momento. El modo <b>Rápido</b> mostrará las acciones y los nombres de los coeditores cuando ellos están editando el texto.</p>
-                <p>El número de usuarios que están trabajando en la presentación actual se especifica en la parte derecha del encabezado de editor -<img alt="Icono Número de usuarios" src="../images/usersnumber.png" /> . Si quiere ver quién está editando el archivo en ese preciso momento, pulse este icono o abrir el panel <b>Chat</b> con la lista completa de los usuarios.</p>
-                <p>Cuando ningún usuario esté viendo o editando el archivo, el icono en el encabezado del editar se verá así <img alt="Gestionar derechos de acceso de documentos" src="../images/access_rights.png" /> permitiéndole gestionar qué usuarios tienen acceso al archivo desde el documento: invite a nuevos usuarios dándoles permiso para <em>editar</em>, <em>leer</em> o <em>comentar</em> la presentación, o <em>denegar</em> el acceso a algunos de los usuarios a los derechos de acceso al archivo. Haga clic en este icono para manejar acceso al archivo; este se puede realizar cuando no hay otros usuarios que están viendo o co-editando el documento en este momento y cuando hay otros usuarios y el icono parece como <img alt="Icono Número de usuarios" src="../images/usersnumber.png" />. También es posible establecer derechos de acceso utilizando el icono <img alt="Icono de comparitr" src="../images/sharingicon.png" /> <b>Compartir</b> en la pestaña <b>Colaboración</b> de la barra de herramientas superior:</p>
-                <p>Cuando uno de los usuarios guarda sus cambios al hacer clic en el icono <img alt="Icono Guardar" src="../images/savewhilecoediting.png" />, los otros verán una nota dentro de la barra de estado indicando que hay actualizaciones. Para guardar los cambios que usted ha realizado, y que así otros usuarios puedan verlos y obtener las actualizaciones guardadas por sus co-editores, haga clic en el icono <img alt="Icono Guardar" src="../images/saveupdate.png" /> en la esquina superior izquierda de la barra de herramientas superior. Las actualizaciones se resaltarán para que usted pueda verificar qué se ha cambiado de forma concreta.</p>
+                <p>El número de usuarios que están trabajando en la presentación actual se especifica en la parte derecha del encabezado de editor -<div class = "icon icon-usersnumber"></div> . Si quiere ver quién está editando el archivo en ese preciso momento, pulse este icono o abrir el panel <b>Chat</b> con la lista completa de los usuarios.</p>
+                <p>Cuando ningún usuario esté viendo o editando el archivo, el icono en el encabezado del editar se verá así <div class = "icon icon-access_rights"></div> permitiéndole gestionar qué usuarios tienen acceso al archivo desde el documento: invite a nuevos usuarios dándoles permiso para <em>editar</em>, <em>leer</em> o <em>comentar</em> la presentación, o <em>denegar</em> el acceso a algunos de los usuarios a los derechos de acceso al archivo. Haga clic en este icono para manejar acceso al archivo; este se puede realizar cuando no hay otros usuarios que están viendo o co-editando el documento en este momento y cuando hay otros usuarios y el icono parece como <div class = "icon icon-usersnumber"></div>. También es posible establecer derechos de acceso utilizando el icono <div class = "icon icon-sharingicon"></div> <b>Compartir</b> en la pestaña <b>Colaboración</b> de la barra de herramientas superior:</p>
+                <p>Cuando uno de los usuarios guarda sus cambios al hacer clic en el icono <div class = "icon icon-savewhilecoediting"></div>, los otros verán una nota dentro de la barra de estado indicando que hay actualizaciones. Para guardar los cambios que usted ha realizado, y que así otros usuarios puedan verlos y obtener las actualizaciones guardadas por sus co-editores, haga clic en el icono <div class = "icon icon-saveupdate"></div> en la esquina superior izquierda de la barra de herramientas superior. Las actualizaciones se resaltarán para que usted pueda verificar qué se ha cambiado de forma concreta.</p>
                 <h3>Chat</h3>
                 <p>Usted puede usar esta herramienta para coordinar el proceso de co-edición sobre la marcha, por ejemplo, para asignar los párrafos a cada compañero de trabajo y especificar, que párrafo va a editar ahora usted.</p>
                 <p>Los mensajes de Chat se almacenan solo durante una sesión. Para discutir el contenido del documento es mejor usar comentarios que se almacenen hasta que decida eliminarlos.</p>
                 <p>Para acceder al chat y dejar un mensaje para otros usuarios,</p>
                 <ol>
-                    <li>Haga clic en el <img alt="Icono Chat" src="../images/chaticon.png" /> ícono en la barra de herramientas de la izquierda, o <br /> cambie a la pestaña <b>Colaboración</b> de la barra de herramientas superior y haga clic en el botón de <img alt="Icono Chat" src="../images/chat_toptoolbar.png" /> <b>Chat</b>,</li>
+                    <li>Haga clic en el <div class = "icon icon-chaticon"></div> ícono en la barra de herramientas de la izquierda, o <br /> cambie a la pestaña <b>Colaboración</b> de la barra de herramientas superior y haga clic en el botón de <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b>,</li>
                     <li>introduzca su texto en el campo correspondiente debajo,</li>
                     <li>pulse el botón <b>Enviar</b>.</li>
                 </ol>
-                <p>Todos los mensajes dejados por otros usuarios se mostrarán en el panel a la izquierda. Si hay mensajes nuevos que no ha leído todavía, el icono de chat aparecerá así - <img alt="Icono Chat" src="../images/chaticon_new.png" />.</p>
-                <p>Para cerrar el panel con mensajes de chat, haga clic en el ícono <img alt="Icono Chat" src="../images/chaticon.png" /> en la barra de herramientas de la izquierda o el botón <img alt="Icono Chat" src="../images/chat_toptoolbar.png" /> <b>Chat</b> en la barra de herramientas superior una vez más.</p>
+                <p>Todos los mensajes dejados por otros usuarios se mostrarán en el panel a la izquierda. Si hay mensajes nuevos que no ha leído todavía, el icono de chat aparecerá así - <div class = "icon icon-chaticon_new"></div>.</p>
+                <p>Para cerrar el panel con mensajes de chat, haga clic en el ícono <div class = "icon icon-chaticon"></div> en la barra de herramientas de la izquierda o el botón <div class = "icon icon-chat_toptoolbar"></div> <b>Chat</b> en la barra de herramientas superior una vez más.</p>
             </div>
             <h3>Comentarios</h3>
             <p>Es posible trabajar con comentarios en el modo sin conexión, sin necesidad de conectarse a la <em>versión en línea</em>.</p>
                 <p>Para dejar un comentario a un objeto determinado (cuadro de texto, forma, etc.):</p>
                 <ol>
                     <li>seleccione un objeto que en su opinión tiene un error o problema,</li>
-                    <li>cambie a la pestaña <b>Insertar</b> o <b>Colaboración</b> de la barra de herramientas superior y haga clic en el botón <img alt="Icono de Comentario" src="../images/comment_toptoolbar.png" /> <b>Comentario</b>, o haga <br /> clic derecho en el objeto seleccioando y seleccione la opción <b>Añadir Comentario</b> del menú,<br /></li>
+                    <li>cambie a la pestaña <b>Insertar</b> o <b>Colaboración</b> de la barra de herramientas superior y haga clic en el botón <div class = "icon icon-comment_toptoolbar"></div> <b>Comentario</b>, o haga <br /> clic derecho en el objeto seleccioando y seleccione la opción <b>Añadir Comentario</b> del menú,<br /></li>
                     <li>introduzca el texto necesario,</li>
                     <li>Haga clic en el botón <b>Añadir comentario/Añadir</b>.</li>
                 </ol>
-                <p>El objeto que usted ha comentado será marcado con el icono <img alt="Icono objeto comentado" src="../images/added_comment_icon.png" />. Para ver el comentario, solo pulse este icono.</p>
-                <p>Para agregar un comentario a una determinada diapositiva, seleccione la diapositiva y utilice el botón <img alt="Icono de Comentario" src="../images/comment_toptoolbar.png" /> <b>Comentario</b> en la pestaña <b>Insertar</b> o <b>Colaborar</b> de la barra de herramientas superior. El comentario agregado se mostrará en la esquina superior izquierda de la diapositiva.</p>
-                <p>Para crear un comentario a nivel de presentación que no esté relacionado con un determinado objeto o diapositiva, haga clic en el icono <img alt="Icono Comentarios" src="../images/commentsicon.png" /> en la barra de herramientas izquierda para abrir el panel <b>Comentarios</b> y usar el enlace <b>Añadir Comentario al Documento</b>. Los comentarios a nivel de presentación se pueden ver en el panel <b>Comentarios</b>. Los comentarios relacionados con objetos y diapositivas también están disponibles aquí.</p>
+                <p>El objeto que usted ha comentado será marcado con el icono <div class = "icon icon-added_comment_icon"></div>. Para ver el comentario, solo pulse este icono.</p>
+                <p>Para agregar un comentario a una determinada diapositiva, seleccione la diapositiva y utilice el botón <div class = "icon icon-comment_toptoolbar"></div> <b>Comentario</b> en la pestaña <b>Insertar</b> o <b>Colaborar</b> de la barra de herramientas superior. El comentario agregado se mostrará en la esquina superior izquierda de la diapositiva.</p>
+                <p>Para crear un comentario a nivel de presentación que no esté relacionado con un determinado objeto o diapositiva, haga clic en el icono <div class = "icon icon-commentsicon"></div> en la barra de herramientas izquierda para abrir el panel <b>Comentarios</b> y usar el enlace <b>Añadir Comentario al Documento</b>. Los comentarios a nivel de presentación se pueden ver en el panel <b>Comentarios</b>. Los comentarios relacionados con objetos y diapositivas también están disponibles aquí.</p>
                 <p>Otro usuario puede contestar al comentario añadido haciendo preguntas o informando sobre el trabajo realizado. Para hacerlo, pulse el enlace <b>Añadir respuesta</b> que se sitúa debajo del comentario.</p>
                 <p>Puede gestionar sus comentarios añadidos de esta manera:</p>
                 <ul>
-                    <li>editar los comentarios pulsando en el icono <img alt="Icono Editar" src="../images/editcommenticon.png" />,</li>
-                    <li>eliminar los comentarios pulsando en el icono <img alt="Icono Borrar" src="../images/deletecommenticon.png" />,</li>
-                    <li>cierre la discusión haciendo clic en el icono <img alt="Icono resolver" src="../images/resolveicon.png" /> si la tarea o el problema que usted ha indicado en su comentario se ha solucionado, después de esto la discusión que usted ha abierto con su comentario obtendrá el estado de resuelta. Para abrir la discusión de nuevo, haga clic en el icono <img alt="Icono Abrir de nuevo" src="../images/resolvedicon.png" />.</li>
+                    <li>editar los comentarios pulsando en el icono <div class = "icon icon-editcommenticon"></div>,</li>
+                    <li>eliminar los comentarios pulsando en el icono <div class = "icon icon-deletecommenticon"></div>,</li>
+                    <li>cierre la discusión haciendo clic en el icono <div class = "icon icon-resolveicon"></div> si la tarea o el problema que usted ha indicado en su comentario se ha solucionado, después de esto la discusión que usted ha abierto con su comentario obtendrá el estado de resuelta. Para abrir la discusión de nuevo, haga clic en el icono <div class = "icon icon-resolvedicon"></div>.</li>
                 </ul>
-                <p>Nuevos comentarios añadidos por otros usuarios se harán visibles solo después de hacer clic en el icono <img alt="Icono Guardar" src="../images/saveupdate.png" /> en la esquina superior izquierda de la barra superior de herramientas.</p>
-                <p>Para cerrar el panel con comentarios, haga clic en el icono <img alt="Icono Comentarios" src="../images/commentsicon.png" /> situado en la barra de herramientas izquierda una vez más.</p>
+                <p>Nuevos comentarios añadidos por otros usuarios se harán visibles solo después de hacer clic en el icono <div class = "icon icon-saveupdate"></div> en la esquina superior izquierda de la barra superior de herramientas.</p>
+                <p>Para cerrar el panel con comentarios, haga clic en el icono <div class = "icon icon-commentsicon"></div> situado en la barra de herramientas izquierda una vez más.</p>
             </div>
 	</body>
 </html>

apps/presentationeditor/main/resources/help/es/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 Presentation 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/presentationeditor/main/resources/help/es/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 slide 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>Configuración de la vista y herramientas de navegación</h1>
 			<p><b>El editor de presentaciones</b> ofrece varias herramientas para ayudarle a visualizar y navegar por su presentación: zoom, los botones de diapositiva anterior/siguiente, el indicador del numero de diapositiva.</p>
 			<h3>Ajuste la configuración de la vista</h3>
-			<p>Para ajustar la configuración predeterminada de la vista y establecer el modo más conveniente de trabajar en la presentación, cambie a la pestaña <b>Inicio</b> en la barra de herramientas superior, haga clic en el icono <img alt="Icono Mostrar ajustes" src="../images/viewsettingsicon.png" /> <b>Mostrar ajustes</b> en la esquina izquierda de la barra de herramientas superior y seleccione qué elementos de la interfaz quiere mostrar u ocultar. Usted puede seleccionar las opciones siguientes en la lista desplegable <b>Mostrar ajustes</b>:</p>
+			<p>Para ajustar la configuración predeterminada de la vista y establecer el modo más conveniente de trabajar en la presentación, cambie a la pestaña <b>Inicio</b> en la barra de herramientas superior, haga clic en el icono <div class = "icon icon-viewsettingsicon"></div> <b>Mostrar ajustes</b> en la esquina izquierda de la barra de herramientas superior y seleccione qué elementos de la interfaz quiere mostrar u ocultar. Usted puede seleccionar las opciones siguientes en la lista desplegable <b>Mostrar ajustes</b>:</p>
 			<ul>
-			<li><b>Ocultar barra de herramientas</b> - oculta la barra de herramientas superior que contiene comandos mientras que las pestañas permaneces visibles. Cuando esta opción está desactivada, puede hacer clic en cualquier pestaña para mostrar la barra de herramientas. La barra de herramientas se muestra hasta que hace clic en cualquier lugar fuera de este. Para desactivar este modo cambie a la pestaña de <b>Inicio</b>, luego haga clic en el icono <img alt="Icono Mostrar ajustes" src="../images/viewsettingsicon.png" /> <b>Mostrar ajustes</b> y haga clic en la opción <b>Ocultar barra de herramientas</b> de nuevo. La barra de herramientas superior se mostrará todo el tiempo.<p class="note"><b>Nota</b>: de forma alternativa, puede hacer doble clic en cualquier pestaña para ocultar la barra de herramientas superior o mostrarla de nuevo.</p>
+			<li><b>Ocultar barra de herramientas</b> - oculta la barra de herramientas superior que contiene comandos mientras que las pestañas permaneces visibles. Cuando esta opción está desactivada, puede hacer clic en cualquier pestaña para mostrar la barra de herramientas. La barra de herramientas se muestra hasta que hace clic en cualquier lugar fuera de este. Para desactivar este modo cambie a la pestaña de <b>Inicio</b>, luego haga clic en el icono <div class = "icon icon-viewsettingsicon"></div> <b>Mostrar ajustes</b> y haga clic en la opción <b>Ocultar barra de herramientas</b> de nuevo. La barra de herramientas superior se mostrará todo el tiempo.<p class="note"><b>Nota</b>: de forma alternativa, puede hacer doble clic en cualquier pestaña para ocultar la barra de herramientas superior o mostrarla de nuevo.</p>
             </li>
 			<li><b>Ocultar barra de estado</b> - oculta la barra más baja donde se sitúan los botones <b>Indicador de número de diapositiva</b> y <b>Zoom</b>. Para mostrar la <b>Barra de estado</b> ocultada pulse esta opción de nuevo.</li>
             <li><b>Ocultar reglas</b> - oculta las reglas usadas para establecer tabuladores y sangrías de párrafo en bloques de texto. Para mostrar las <b>Reglas</b> ocultadas, pulse esta opción de nuevo.</li>
@@ -26,9 +27,9 @@
 			<p>La barra derecha lateral se minimiza de manera predeterminada. Para expandirla, seleccione cualquier objeto/diapositiva y pulse el icono de la pestaña actualmente activada a la derecha. Para minimizar la barra lateral derecha, pulse el icono de nuevo. Se puede ajustar el ancho de la barra izquierda lateral usando la acción de arrastrar y soltar: mueva el cursor del ratón sobre el borde de la barra izquierda lateral para que se convierta en una flecha bi-direccional y arrastre el borde a la izquierda para reducir el ancho de la barra lateral o a la derecha para expandirlo.</p>
 			<h3>Utilice las herramientas de navegación</h3>
 			<p>Para navegar por su presentación, utilice las herramientas siguientes:</p>
-			<p>Los botones <b>Zoom</b> se sitúan en la esquina derecha inferior y se usan para acercar o alejar la presentación actual. Para cambiar el valor de zoom seleccionado que se muestra en porcentajes, haz clic en este y seleccione una de las opciones de zoom disponibles de la lista o use los botones <b>Acercar</b>  <img alt="Botón acercar" src="../images/zoomin.png" /> o <b>Alejar</b> . Pulse el icono <img alt="Botón ajustar al ancho" src="../images/fitwidth.png" /> <b>Ajustar al ancho</b> para ajustar el ancho de la diapositiva a la parte visible del área de trabajo. Para ajustar toda la diapositiva a la parte visible del área de trabajo, pulse el icono <img alt="Botón ajustar diapositiva" src="../images/fitslide.png" /> <b>Ajustar diapositiva</b> . Los ajustes de zoom también están disponibles en la lista desplegable <img alt="Icono Mostrar ajustes" src="../images/viewsettingsicon.png" /> <b>Mostrar ajustes</b> que puede ser útil si usted decide ocultar la <b>Barra de estado</b>.</p>
+			<p>Los botones <b>Zoom</b> se sitúan en la esquina derecha inferior y se usan para acercar o alejar la presentación actual. Para cambiar el valor de zoom seleccionado que se muestra en porcentajes, haz clic en este y seleccione una de las opciones de zoom disponibles de la lista o use los botones <b>Acercar</b>  <div class = "icon icon-zoomin"></div> o <b>Alejar</b> . Pulse el icono <div class = "icon icon-fitwidth"></div> <b>Ajustar al ancho</b> para ajustar el ancho de la diapositiva a la parte visible del área de trabajo. Para ajustar toda la diapositiva a la parte visible del área de trabajo, pulse el icono <div class = "icon icon-fitslide"></div> <b>Ajustar diapositiva</b> . Los ajustes de zoom también están disponibles en la lista desplegable <div class = "icon icon-viewsettingsicon"></div> <b>Mostrar ajustes</b> que puede ser útil si usted decide ocultar la <b>Barra de estado</b>.</p>
 			<p class="note"><b>Nota</b>: usted puede establecer el valor predeterminado de zoom. Cambie a la pestaña <b>Archivo</b> en la barra de herramientas superior, pase a la sección <b>Ajustes avanzados...</b>, elija el <b>Valor de zoom predeterminado</b> de la lista y haga clic en el botón <b>Aplicar</b>.</p>
-			<p>Para ir a la diapositiva anterior o la diapositiva siguiente cuando edita una presentación, puede usar los botones de <img alt="Botón Diapositiva anterior" src="../images/previouspage.png" /> y <img alt="Botón Diapositiva siguiente" src="../images/nextpage.png" /> en la parte superior e inferior de la barra de desplazamiento vertical situada a la derecha de la presentación.</p>
+			<p>Para ir a la diapositiva anterior o la diapositiva siguiente cuando edita una presentación, puede usar los botones de <div class = "icon icon-previouspage"></div> y <div class = "icon icon-nextpage"></div> en la parte superior e inferior de la barra de desplazamiento vertical situada a la derecha de la presentación.</p>
 			<p>El <b>Indicador del número de diapositiva</b> muestra la diapositiva actual como parte de todas las diapositivas en la presentación actual (diapositiva 'n' de 'nn'). Haga clic en esta leyenda para abrir la ventana donde usted puede introducir el número de diapositiva y rápidamente ir a esta. Si usted decide ocultar la <b>Barra de estado</b>, esta herramienta será inaccesible.</p>
 			
 			

apps/presentationeditor/main/resources/help/es/HelpfulHints/Search.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the search and replace function in Presentation 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="Buscar" type="text" onkeypress="doSearch(event)">
         </div>
 		<h1>Función "Encontrar y Reemplazar"</h1>
-			<p><b>Para buscar</b> los caracteres, palabras o frases usadas en la presentación que se está editando actualmente, haga clic en el icono <img alt="Icono Buscar" src="../images/searchicon.png" /> situado en la barra lateral izquierda o use la combinación de teclas <em>Ctrl+F</em>.</p>
+			<p><b>Para buscar</b> los caracteres, palabras o frases usadas en la presentación que se está editando actualmente, haga clic en el icono <div class = "icon icon-searchicon"></div> situado en la barra lateral izquierda o use la combinación de teclas <em>Ctrl+F</em>.</p>
 			<p>Se abrirá la ventana <b>Encontrar y reemplazar</b>:</p><img alt="Ventana de búsqueda y sustitución" src="../images/search_window.png" /><ol>
 			<li>Introduzca su consulta en el campo correspondiente.</li>
-                <li>Especifique los parámetros de búsqueda al hacer clic en el icono <img alt="Icono Buscar opciones" src="../images/search_options.png" /> y marcar las opciones necesarias:<ul>
+                <li>Especifique los parámetros de búsqueda al hacer clic en el icono <div class = "icon icon-search_options"></div> y marcar las opciones necesarias:<ul>
                         <li><b>Sensible a mayúsculas y minúsculas</b> - se usa para encontrar solamente las ocurrencias escritas en el mismo tipo de letra (minúsculas o mayúsculas) que su consulta (por ejemplo, si su consulta es 'Editor' y esta opción está seleccionada, palabras como 'editor' o 'EDITOR', etc., no se mostrarán. Para desactivar esta opción haga clic en él de nuevo.</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>Pulse uno de los <b>botones de flecha</b> a la derecha. La búsqueda se realizará o hacia el principio de la presentación (si pulsa el botón <img alt="Botón de flecha izquierda" src="../images/searchupbutton.png" />) o hacia el final de la presentación (si pulsa el botón <img alt="Botón de flecha derecha" src="../images/searchdownbutton.png" />) de la posición actual de cursor. <!--<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>
+			<li>Pulse uno de los <b>botones de flecha</b> a la derecha. La búsqueda se realizará o hacia el principio de la presentación (si pulsa el botón <div class = "icon icon-searchupbutton"></div>) o hacia el final de la presentación (si pulsa el botón <div class = "icon icon-searchdownbutton"></div>) de la posición actual de cursor. <!--<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>
 			<p>La primera diapositiva en la dirección seleccionada que contiene los caracteres introducidos se resaltará en la lista de diapositivas y se mostrará en el área de trabajo con los caracteres necesarios resaltados. Si no es la diapositiva que está buscando, haga clic en el botón de nuevo para encontrar la siguiente diapositiva que contiene los caracteres introducidos.</p>
             <p><b>Para reemplazar</b> una o más ocurrencias de los caracteres encontrados, haga clic en el enlace <b>Reemplazar</b> ue aparece debajo del campo de entrada de datos o utilice la combinación de teclas <em>Ctrl+H</em>. Se cambiará la ventana <b>Encontrar y reemplazar</b>:</p>