diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/CollaborativeEditing.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/CollaborativeEditing.htm
index 20d5b744c..4998e6a1b 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/CollaborativeEditing.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/CollaborativeEditing.htm
@@ -17,15 +17,15 @@
             <h1>Gemeinsame Bearbeitung von Präsentationen in Echtzeit</h1>
             <p>Der <a target="_blank" href="https://www.onlyoffice.com/de/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Präsentationseditor</b></a> ermöglicht es Ihnen, einen konstanten teamweiten Ansatz für den Arbeitsablauf beibehalten: Sie können die Dateien und Ordner <a href="https://helpcenter.onlyoffice.com/de/userguides/groups-guides-documents-share-documents.aspx">freigeben</a>; an Präsentationen in Echtzeit <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">zusammenarbeiten</a>; direkt im Editor <a href="../HelpfulHints/UsingChat.htm" onclick="onhyperlinkclick(this)">kommunizieren</a>; bestimmte Teile Ihrer Präsentationen, die zusätzliche Eingaben Dritter erfordern, <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">kommentieren</a>; die <a href="../HelpfulHints/VersionHistory.htm" onclick="onhyperlinkclick(this)">Versionen von Präsentationen</a> für die zukünftige Verwendung speichern.</p>
             <p>Im <b>Präsentationseditor</b> können Sie in Echtzeit an Präsentationen mit zwei Modi zusammenarbeiten: <b>Schnell</b> oder <b>Formal</b>.</p>
-            <p>Die Modi können in den <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">erweiterten Einstellungen</a> ausgewählt werden. Es ist auch möglich, den erforderlichen Modus über das Symbol <img alt="Co-editing Mode icon" src="../images/coeditingmode.png" /> <b>Modus "Gemeinsame Bearbeitung"</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste auswählen:</p>
+            <p>Die Modi können in den <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">erweiterten Einstellungen</a> ausgewählt werden. Es ist auch möglich, den erforderlichen Modus über das Symbol <div class = "icon icon-coeditingmode"></div> <b>Modus "Gemeinsame Bearbeitung"</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste auswählen:</p>
             <p><img alt="Co-editing Mode menu" src="../../../../../../common/main/resources/help/de/images/coeditingmodemenu.png" /></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="Number of users icon" src="../images/usersnumber.png" />. Wenn Sie sehen möchten, wer genau die Datei gerade bearbeitet, können Sie auf dieses Symbol klicken oder das <b>Chat</b>-Bedienfeld mit der vollständigen Liste der Benutzer öffnen.</p>
+            <p>Die Anzahl der Benutzer, die 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 genau die Datei gerade bearbeitet, können Sie auf dieses Symbol klicken oder das <b>Chat</b>-Bedienfeld mit der vollständigen Liste der Benutzer öffnen.</p>
             <h3><b>Modus "Schnell"</b></h3>
             <p>Der Modus <b>Schnell</b> wird standardmäßig verwendet und zeigt die von anderen Benutzern vorgenommenen Änderungen in Echtzeit an. Wenn Sie eine Präsentation in diesem Modus gemeinsam bearbeiten, ist die Möglichkeit zum <b>Wiederholen</b> des letzten rückgängig gemachten Vorgangs nicht verfügbar. In diesem Modus werden die Aktionen und die Namen der Mitbearbeiter angezeigt. Wenn eine Präsentation in diesem Modus von mehreren Benutzern gleichzeitig bearbeitet wird, werden die bearbeiteten Objekte mit gestrichelten Linien in unterschiedlichen Farben gekennzeichnet. Wenn Sie den Mauszeiger über eine der bearbeiteten Passagen bewegen, wird der Name des Benutzers angezeigt, der sie gerade bearbeitet.</p>
             <h3><b>Modus "Formal"</b></h3>
-            <p>Der Modus <b>Formal</b> wird ausgewählt, um von anderen Benutzern vorgenommene Änderungen auszublenden, bis Sie auf das Symbol <b>Speichern</b> <img alt="Save icon" src="../images/savewhilecoediting.png" /> klicken, um Ihre Änderungen zu speichern und die von Co-Autoren vorgenommenen Änderungen anzunehmen.</p>
+            <p>Der Modus <b>Formal</b> wird ausgewählt, um von anderen Benutzern vorgenommene Änderungen auszublenden, bis Sie auf das Symbol <b>Speichern</b> <div class = "icon icon-savewhilecoediting"></div> klicken, um Ihre Änderungen zu speichern und die von Co-Autoren vorgenommenen Änderungen anzunehmen.</p>
             <p>Wenn eine Präsentation von mehreren Benutzern gleichzeitig im Modus <b>Formal</b> bearbeitet wird, werden die bearbeiteten Objekte (AutoFormen, Textobjekte, Tabellen, Bilder, Diagramme) mit gestrichelten Linien unterschiedlicher Farbe markiert. Das Objekt, das Sie bearbeiten, ist von der grün gestrichelten Linie umgeben. Rote gestrichelte Linien zeigen an, dass Objekte von anderen Benutzern bearbeitet werden.</p>
-            <p>Sobald einer der Benutzer seine Änderungen durch Klicken auf das Symbol <img alt="Save icon" src="../images/savewhilecoediting.png" /> speichert, sehen die anderen einen Hinweis in der Statusleiste, der darauf informiert, dass es Aktualisierungen gibt. Um die von Ihnen vorgenommenen Änderungen zu speichern, damit andere Benutzer sie sehen, und die von Ihren Mitbearbeitern gespeicherten Aktualisierungen abzurufen, klicken Sie auf das Symbol <img alt="Save icon" src="../images/saveupdate.png" /> in der linken oberen Ecke der oberen Symbolleiste. Die Aktualisierungen werden hervorgehoben, damit Sie überprüfen können, was genau geändert wurde.</p>
+            <p>Sobald einer der Benutzer seine Änderungen durch Klicken auf das Symbol <div class = "icon icon-savewhilecoediting"></div> speichert, sehen die anderen einen Hinweis in der Statusleiste, der darauf informiert, dass es Aktualisierungen gibt. Um die von Ihnen vorgenommenen Änderungen zu speichern, damit andere Benutzer sie sehen, und die von Ihren Mitbearbeitern gespeicherten Aktualisierungen abzurufen, klicken Sie auf das Symbol <div class = "icon icon-saveupdate"></div> in der linken oberen Ecke der oberen Symbolleiste. Die Aktualisierungen werden hervorgehoben, damit Sie überprüfen 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>
diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Commenting.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Commenting.htm
index b0f448025..af4344f96 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Commenting.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Commenting.htm
@@ -4,6 +4,7 @@
 		<title>Präsentationen kommentieren</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Tips on using the Chat tool" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 	</head>
 	<body>
@@ -16,22 +17,22 @@
 			<ol>
 				<li>Wählen Sie ein Objekt aus, bei dem Ihrer Meinung nach ein Fehler oder Problem vorliegt.</li>
 				<li>
-					Wechseln Sie zur Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> der oberen Symbolleiste und klicken Sie auf die Schaltfläche <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Kommentar</b>, oder<br />
+					Wechseln Sie zur Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> der oberen Symbolleiste und klicken Sie auf die Schaltfläche <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentar</b>, oder<br />
 					Klicken Sie mit der rechten Maustaste auf das ausgewählte Objekt und wählen Sie im Menü die Option <b>Kommentar hinzufügen</b>.<br />
 				</li>
 				<li>Geben Sie den erforderlichen Text ein.</li>
 				<li>Klicken Sie auf die Schaltfläche <b>Kommentar hinzufügen/Hinzufügen</b>.</li>
 			</ol>
-			<p>Das von Ihnen kommentierte Objekt wird mit dem Symbol <img alt="Commented object icon" src="../images/added_comment_icon.png" /> gekennzeichnet. Um den Kommentar anzuzeigen, klicken Sie einfach auf dieses Symbol.</p>
-			<p>Um einen Kommentar zu einer bestimmten Folie hinzuzufügen, wählen Sie die Folie aus und verwenden Sie die Schaltfläche <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Kommentar</b> auf der Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> in der oberen Symbolleiste. Der hinzugefügte Kommentar wird in der oberen linken Ecke der Folie angezeigt.</p>
-			<p>Um einen Kommentar auf Präsentationsebene zu erstellen, der sich nicht auf ein bestimmtes Objekt oder eine bestimmte Folie bezieht, klicken Sie auf das Symbol <img alt="Comments icon" src="../images/commentsicon.png" /> in der linken Seitenleiste, um das Bedienfield <b>Kommentare</b> zu öffnen, und verwenden Sie den Link <b>Kommentar zum Dokument hinzufügen</b>. Die Kommentare auf Präsentationsebene können im Bereich <b>Kommentare</b> angezeigt werden. Hier sind auch Kommentare zu Objekten und Folien verfügbar.</p>
+			<p>Das von Ihnen kommentierte Objekt wird mit dem Symbol <div class = "icon icon-added_comment_icon"></div> gekennzeichnet. Um den Kommentar anzuzeigen, klicken Sie einfach auf dieses Symbol.</p>
+			<p>Um einen Kommentar zu einer bestimmten Folie hinzuzufügen, wählen Sie die Folie aus und verwenden Sie die Schaltfläche <div class = "icon icon-comment_toptoolbar"></div> <b>Kommentar</b> auf der Registerkarte <b>Einfügen</b> oder <b>Zusammenarbeit</b> in der oberen Symbolleiste. Der hinzugefügte Kommentar wird in der oberen linken Ecke der Folie angezeigt.</p>
+			<p>Um einen Kommentar auf Präsentationsebene zu erstellen, der sich nicht auf ein bestimmtes Objekt oder eine bestimmte Folie bezieht, klicken Sie auf das Symbol <div class = "icon icon-commentsicon"></div> in der linken Seitenleiste, um das Bedienfield <b>Kommentare</b> zu öffnen, und verwenden Sie den Link <b>Kommentar zum Dokument hinzufügen</b>. Die Kommentare auf Präsentationsebene können im Bereich <b>Kommentare</b> angezeigt werden. Hier sind auch Kommentare zu Objekten und Folien verfügbar.</p>
 			<p>Jeder andere Benutzer kann auf den hinzugefügten Kommentar antworten, indem er Fragen stellt oder über seine Arbeit berichtet. Klicken Sie dazu auf den Link <b>Antwort hinzufügen</b> unterhalb des Kommentars, geben Sie Ihren Antworttext in das Eingabefeld ein und klicken Sie auf die Schaltfläche <b>Antworten</b>.</p>
-			<p>Wenn Sie den Co-Bearbeitungsmodus <b>Formal</b> verwenden, werden neue Kommentare, die von anderen Benutzern hinzugefügt wurden, erst sichtbar, nachdem Sie auf das Symbol <img alt="Save icon" src="../images/saveupdate.png" /> in der linken oberen Ecke der oberen Symbolleiste geklickt haben.</p>
+			<p>Wenn Sie den Co-Bearbeitungsmodus <b>Formal</b> verwenden, werden neue Kommentare, die von anderen Benutzern hinzugefügt wurden, erst sichtbar, nachdem Sie auf das Symbol <div class = "icon icon-saveupdate"></div> in der linken oberen Ecke der oberen Symbolleiste geklickt haben.</p>
 			<h3>Kommentare verwalten</h3>
 			<p>Sie können die hinzugefügten Kommentare mit den Symbolen in der Kommentarsprechblase oder im Bereich <b>Kommentare</b> auf der linken Seite verwalten:</p>
 			<ul>
 				<li>
-					Sortieren Sie die hinzugefügten Kommentare, indem Sie auf das Symbol <img alt="Sort icon" src="../images/sortcommentsicon.png" /> klicken:
+					Sortieren Sie die hinzugefügten Kommentare, indem Sie auf das Symbol <div class = "icon icon-sortcommentsicon"></div> klicken:
 					<ul>
 						<li>nach Datum: <b>Neueste zuerst</b> oder <b>Älteste zuerste</b>.</li>
 						<li>nach Verfasser: <b>Verfasser (A-Z)</b> oder <b>Verfasser (Z-A)</b>.</li>
@@ -41,9 +42,9 @@
 						</li>
 					</ul>
 				</li>
-				<li>Bearbeiten Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <img alt="Edit icon" src="../images/editcommenticon.png" /> klicken.</li>
-				<li>Löschen Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <img alt="Delete icon" src="../images/deletecommenticon.png" /> klicken.</li>
-				<li>Schließen Sie die aktuell ausgewählte Diskussion, indem Sie auf das Symbol <img alt="Resolve icon" src="../images/resolveicon.png" /> klicken, wenn die von Ihnen in Ihrem Kommentar angegebene Aufgabe oder das Problem gelöst wurde, danach die von Ihnen geöffnete Diskussion mit Ihrem Kommentar erhält den gelösten Status. Klicken Sie auf das Symbol <img alt="Open again icon" src="../images/resolvedicon.png" />, um die Diskussion neu zu öffnen.</li>
+				<li>Bearbeiten Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <div class = "icon icon-editcommenticon"></div> klicken.</li>
+				<li>Löschen Sie den aktuell ausgewählten Kommentar, indem Sie auf das Symbol <div class = "icon icon-deletecommenticon"></div> klicken.</li>
+				<li>Schließen Sie die aktuell ausgewählte Diskussion, indem Sie auf das Symbol <div class = "icon icon-resolveicon"></div> klicken, wenn die von Ihnen in Ihrem Kommentar angegebene Aufgabe oder das Problem gelöst wurde, danach die von Ihnen geöffnete Diskussion mit Ihrem Kommentar erhält den gelösten Status. Klicken Sie auf das Symbol <div class = "icon icon-resolvedicon"></div>, um die Diskussion neu zu öffnen.</li>
 				<li>Wenn Sie mehrere Kommentare verwalten möchten, öffnen Sie das Drop-Down-Menü <b>Lösen</b> auf der Registerkarte <b>Zusammenarbeit</b>. Wählen Sie eine der Optionen zum Auflösen von Kommentaren aus: <b>Gültige Kommentare lösen</b>, <b>Meine Kommentare lösen</b> oder <b>Alle Kommentare lösen</b>.</li>
 			</ul>
 			<h3>Erwähnungen hinzufügen</h3>
@@ -59,7 +60,7 @@
 			<h3>Kommentare entfernen</h3>
 			<p>Um Kommentare zu entfernen:</p>
 			<ol>
-				<li>Klicken Sie auf die Schaltfläche <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Entfernen</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste.</li>
+				<li>Klicken Sie auf die Schaltfläche <div class = "icon icon-removecomment_toptoolbar"></div> <b>Entfernen</b> auf der Registerkarte <b>Zusammenarbeit</b> in der oberen Symbolleiste.</li>
 				<li>
 					Wählen Sie die erforderliche Option aus dem Menü:
 					<ul>
@@ -69,7 +70,7 @@
 					</ul>
 				</li>
 			</ol>
-			<p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf das Symbol <img alt="Comments icon" src="../images/commentsicon.png" />.</p>
+			<p>Um die Leiste mit den Kommentaren zu schließen, klicken Sie in der linken Seitenleiste erneut auf das Symbol <div class = "icon icon-commentsicon"></div>.</p>
 		</div>
 	</body>
 </html>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Navigation.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Navigation.htm
index 5556993f6..f73c45581 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Navigation.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Navigation.htm
@@ -30,7 +30,7 @@
 			<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% / 300% / 400% / 500%) aus der Liste 
-			oder klicken Sie auf <b>Vergrößern</b> <img alt="Vergrößern" src="../images/zoomin.png" /> oder <b>Verkleinern</b> <img alt="Verkleinern" src="../images/zoomout.png" />. Klicken Sie auf das Symbol <b>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>
+			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 <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>
diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Password.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Password.htm
index 0c1a0b3ce..2b4d7fafa 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/Password.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/Password.htm
@@ -24,7 +24,7 @@
 				<li>öffnen Sie die Registerkarte <b>Datei</b> in der oberen Symbolleiste,</li>
 				<li>wählen Sie die Option <b>Schützen</b> aus,</li>
 				<li>klicken Sie auf die Schaltfläche <b>Kennwort hinzufügen</b>,</li>
-				<li>geben Sie das Kennwort im Feld <b>Kennwort</b> ein und wiederholen Sie es im Feld <b>Kennwort wiederholen</b> nach unten, dann klicken Sie auf <b>OK</b>. Klicken Sie auf <img alt="Kennwortsymbol anzeigen" src="../images/show_password.png" />, um die Kennwortzeichen bei der Eingabe anzuzeigen oder auszublenden.</li>
+				<li>geben Sie das Kennwort im Feld <b>Kennwort</b> ein und wiederholen Sie es im Feld <b>Kennwort wiederholen</b> nach unten, dann klicken Sie auf <b>OK</b>. Klicken Sie auf <div class = "icon icon-show_password"></div>, um die Kennwortzeichen bei der Eingabe anzuzeigen oder auszublenden.</li>
 			</ul>
 			<p><img alt="Kennwort erstellen" src="../../../../../../common/main/resources/help/de/images/setpassword.png" /></p>
 
diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/UsingChat.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/UsingChat.htm
index 0158cf33f..b7aa45139 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/UsingChat.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/UsingChat.htm
@@ -14,13 +14,13 @@
 			<p>Im <b>Präsentationseditor</b> können Sie mit Ihren Mitbearbeitern in Echtzeit kommunizieren, indem Sie das integrierte <b>Chat</b>-Tool sowie eine Reihe nützlicher Plugins verwenden, z. B. <a href="../UsageInstructions/CommunicationPlugins.htm" onclick="onhyperlinkclick(this)">Telegram oder Rainbow</a>.</p>
 			<p>Um auf das <b>Chat</b>-Tool zuzugreifen und eine Nachricht für andere Benutzer zu hinterlassen:</p>
 			<ol>
-				<li>Klicken Sie auf das Symbol <img alt="Chat icon" src="../images/chaticon.png" /> in der linken Symbolleiste.</li>
+				<li>Klicken Sie auf das Symbol <div class = "icon icon-chaticon"></div> in der linken Symbolleiste.</li>
 				<li>Geben Sie Ihren Text in das entsprechende Feld unten ein.</li>
 				<li>Klicken Sie die Schaltfläche <b>Senden</b>.</li>
 			</ol>
 			<p class="note">Die Chat-Nachrichten werden nur während einer Sitzung gespeichert. Um den Inhalt der Präsentation zu diskutieren, verwenden Sie besser <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">Kommentare</a>, die bis zu ihrer Löschung gespeichert werden.</p>
-			<p>Alle von Benutzern hinterlassenen Nachrichten werden auf der linken Seite angezeigt. Wenn es neue Nachrichten gibt, die Sie noch nicht gelesen haben, sieht das Chat-Symbol so aus - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
-			<p>Um das Fenster mit Chat-Nachrichten zu schließen, klicken Sie erneut auf das Symbol <img alt="Chat icon" src="../images/chaticon.png" />.</p>
+			<p>Alle von Benutzern hinterlassenen Nachrichten werden auf der linken Seite angezeigt. Wenn es neue Nachrichten gibt, die Sie noch nicht gelesen haben, sieht das Chat-Symbol so aus - <div class = "icon icon-chaticon_new"></div>.</p>
+			<p>Um das Fenster mit Chat-Nachrichten zu schließen, klicken Sie erneut auf das Symbol <div class = "icon icon-chaticon"></div>.</p>
 		</div>
 	</body>
 </html>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/help/de/HelpfulHints/VersionHistory.htm b/apps/presentationeditor/main/resources/help/de/HelpfulHints/VersionHistory.htm
index 869854aa8..561185a86 100644
--- a/apps/presentationeditor/main/resources/help/de/HelpfulHints/VersionHistory.htm
+++ b/apps/presentationeditor/main/resources/help/de/HelpfulHints/VersionHistory.htm
@@ -4,6 +4,7 @@
 	<title>Versionshistorie</title>
 	<meta charset="utf-8" />
 	<meta name="description" content="Tips on collaborative editing" />
+	<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 	<link type="text/css" rel="stylesheet" href="../editor.css" />
 	<script type="text/javascript" src="../callback.js"></script>
 	<script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -25,7 +26,7 @@
 				<p>oder</p>
 			</li>
 			<li>Gehen Sie zur Registerkarte <b>Zusammenarbeit</b>.</li>
-			<li>Öffnen Sie die Versionshistorie mithilfe des Symbols <img alt="Version history" src="../images/versionhistoryicon.png" /> <b>Versionshistorie</b> in der oberen Symbolleiste.</li>
+			<li>Öffnen Sie die Versionshistorie mithilfe des Symbols <div class = "icon icon-versionhistoryicon"></div> <b>Versionshistorie</b> in der oberen Symbolleiste.</li>
 		</ul>
 		<p>Sie sehen die Liste der Präsentationsversionen und -Revisionen mit Angabe des Autors jeder Version/Revision sowie Erstellungsdatum und -zeit. Bei Präsentationsversionen wird auch die Versionsnummer angegeben (z. B. <em>ver. 2</em>).</p>
 		<p><b>Versionen anzeigen:</b></p>
diff --git a/apps/presentationeditor/main/resources/help/de/ProgramInterface/AnimationTab.htm b/apps/presentationeditor/main/resources/help/de/ProgramInterface/AnimationTab.htm
index 48ae0884f..feca7a25c 100644
--- a/apps/presentationeditor/main/resources/help/de/ProgramInterface/AnimationTab.htm
+++ b/apps/presentationeditor/main/resources/help/de/ProgramInterface/AnimationTab.htm
@@ -4,6 +4,7 @@
 		<title>Registerkarte Animation</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Benutzeroberfläche - Registerkarte Animation - Präsentationseditor" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/de/ProgramInterface/TransitionsTab.htm b/apps/presentationeditor/main/resources/help/de/ProgramInterface/TransitionsTab.htm
index 6bcfcffa7..06f7b59bf 100644
--- a/apps/presentationeditor/main/resources/help/de/ProgramInterface/TransitionsTab.htm
+++ b/apps/presentationeditor/main/resources/help/de/ProgramInterface/TransitionsTab.htm
@@ -4,6 +4,7 @@
 		<title>Registerkarte Übergänge</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Einführung in die Benutzeroberfläche des Präsentationseditors – Registerkarte Übergänge" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/de/ProgramInterface/ViewTab.htm b/apps/presentationeditor/main/resources/help/de/ProgramInterface/ViewTab.htm
index d435783c1..7b6a07eee 100644
--- a/apps/presentationeditor/main/resources/help/de/ProgramInterface/ViewTab.htm
+++ b/apps/presentationeditor/main/resources/help/de/ProgramInterface/ViewTab.htm
@@ -4,6 +4,7 @@
 		<title>Registerkarte Ansicht</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Benutzeroberfläche - Registerkarte Ansicht - Präsentationseditor" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/AddingAnimations.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/AddingAnimations.htm
index d20c6d4d7..888231692 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/AddingAnimations.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/AddingAnimations.htm
@@ -4,6 +4,7 @@
 		<title>Animationen hinzufügen</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Wie kann man Animationseffekte auf einer Folie hinzufügen und verwalten." />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/CopyPasteUndoRedo.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/CopyPasteUndoRedo.htm
index 7ed8794a2..6bd5e34f5 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/CopyPasteUndoRedo.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/CopyPasteUndoRedo.htm
@@ -30,7 +30,7 @@
             </ul>
             <h3>Inhalte einfügen mit Optionen</h3>
             <p class="note"><b>Hinweis</b>: Für die gemeinsame Bearbeitung ist die Option <b>Spezielles Einfügen</b> ist nur im Co-Editing-Modus <b>Formal</b> verfügbar.</p>
-            <p>Nachdem der kopierte Text eingefügt wurde, erscheint neben der eingefügten Textpassage 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>
@@ -48,9 +48,9 @@
             <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>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> <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>
+                    <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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/FillObjectsSelectColor.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/FillObjectsSelectColor.htm
index 81abf5c44..c26d5f9a7 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/FillObjectsSelectColor.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/FillObjectsSelectColor.htm
@@ -19,9 +19,9 @@
 			<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>
@@ -57,7 +57,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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm
index dd691bbf6..b0cb12546 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertAutoshapes.htm
@@ -20,7 +20,7 @@
 			<ol>
 				<li>Wählen Sie in der Folienliste links die Folie aus, der Sie eine AutoForm hinzufügen wollen.</li>
 				<li>
-					Klicken Sie auf das Symbol <img alt="Form" src="../images/insertautoshape.png" /> <b>Form</b> auf der Registerkarte <b>Startseite</b> oder klicken Sie auf die <img alt="Formengalerie" src="../images/shapegallery.png" /><b>Formengalerie</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.
+					Klicken Sie auf das Symbol <div class = "icon icon-insertautoshape"></div> <b>Form</b> auf der Registerkarte <b>Startseite</b> oder klicken Sie auf die <div class = "big big-shapegallery"></div><b>Formengalerie</b> auf der Registerkarte <b>Einfügen</b> in der oberen Symbolleiste.
 				</li>
 				<li>Wählen Sie eine der verfügbaren Gruppen von AutoFormen aus der <b>Formengalerie</b> aus: <em>Zuletzt verwendet</em>, <em>Standardformen</em>, <em>Geformte Pfeile</em>, <em>Mathematik</em>, <em>Diagramme</em>, <em>Sterne &amp; Bänder</em>, <em>Legenden</em>, <em>Schaltflächen</em>, <em>Rechtecke</em>, <em>Linien</em>.</li>
 				<li>Klicken Sie in der gewählten Gruppe auf die gewünschte AutoForm.</li>
@@ -36,7 +36,7 @@
 			<p>Es ist auch möglich, einem Folienlayout eine AutoForm hinzuzufügen. Weitere Informationen finden Sie in dieser <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">Artikel</a>.</p>
 			<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:
@@ -59,10 +59,10 @@
 				<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>
 				<li><b>AutoForm ändern</b> - verwenden Sie diesen Abschnitt, um die aktuelle AutoForm durch eine andere Form aus der Drop-Down-Liste zu ersetzen.</li>
@@ -71,7 +71,7 @@
 			<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>
@@ -117,19 +117,19 @@
 			<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>
+					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>
+					<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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertCharts.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertCharts.htm
index e71a74122..6d3156fac 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertCharts.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertCharts.htm
@@ -340,16 +340,16 @@
             <h3>Diagrammelemente bearbeiten</h3>
             <p>Um den <b>Diagrammtitel</b> zu bearbeiten, wählen Sie den Standardtext mit der Maus aus und geben Sie stattdessen Ihren eigenen Text ein.</p>
             <p>Um die Schriftformatierung innerhalb von Textelementen, wie beispielsweise Diagrammtitel, Achsentitel, Legendeneinträge, Datenbeschriftungen usw. zu ändern, wählen Sie das gewünschte Textelement durch Klicken mit der linken Maustaste aus. Wechseln Sie in die Registerkarte <b>Startseite</b> und nutzen Sie die in der Menüleiste angezeigten Symbole, um <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">Schriftart, Schriftform, Schriftgröße oder Schriftfarbe</a> zu bearbeiten.</p>
-            <p>Wenn das Diagramm ausgewählt ist, ist das Symbol <b>Formeinstellungen</b> <img alt="Symbol für Formeinstellungen" src="../images/shape_settings_icon.png" /> auch auf der rechten Seite verfügbar, da die Form als Hintergrund für das Diagramm verwendet wird. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Formeinstellungen anzupassen: <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Füllung</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strich</b></a> und <b>Textumbruch</b>. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
+            <p>Wenn das Diagramm ausgewählt ist, ist das Symbol <b>Formeinstellungen</b> <div class = "icon icon-shape_settings_icon"></div> auch auf der rechten Seite verfügbar, da die Form als Hintergrund für das Diagramm verwendet wird. Sie können auf dieses Symbol klicken, um die Registerkarte <b>Formeinstellungen</b> in der rechten Seitenleiste zu öffnen und die Formeinstellungen anzupassen: <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Füllung</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Strich</b></a> und <b>Textumbruch</b>. Beachten Sie, dass Sie den Formtyp nicht ändern können.</p>
             <p>
                 Mit der Registerkarte <b>Formeinstellungen</b> auf der rechten Seite können Sie nicht nur den Diagrammbereich selbst anpassen, sondern auch die Diagrammelemente wie <em>Zeichnungsfläche</em>, <em>Datenreihe</em>, <em>Diagrammtitel</em>, <em>Legende</em> usw. und wenden Sie verschiedene Füllungstypen darauf an. Wählen Sie das Diagrammelement aus, indem Sie es mit der linken Maustaste anklicken, und wählen Sie den bevorzugten Füllungstyp aus: <em>Farbfüllung</em>, <em>Füllung mit Farbverlauf</em>, <em>Bild oder Textur</em>, <em>Muster</em>. Geben Sie die Füllparameter an und stellen Sie bei Bedarf die <em>Undurchsichtigkeit</em> ein.
                 Wenn Sie eine vertikale oder horizontale Achse oder Gitternetzlinien auswählen, sind die Stricheinstellungen nur auf der Registerkarte <b>Formeinstellungen</b> verfügbar: <em>Farbe</em>, <em>Größe</em> und <em>Typ</em>. Weitere Einzelheiten zum Arbeiten mit Formfarben, Füllungen und Striche finden Sie auf <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">dieser Seite</a>.
             </p>
             <p class="note">Die Option <b>Schatten anzeigen</b> ist auch auf der Registerkarte <b>Formeinstellungen</b> verfügbar, sie ist jedoch für Diagrammelemente deaktiviert.</p>
-            <p>Wenn Sie die Größe von Diagrammelementen ändern müssen, klicken Sie mit der linken Maustaste, um das gewünschte Element auszuwählen, und ziehen Sie eines der 8 weißen Quadrate <img alt="Quadrat Symbol" src="../images/resize_square.png" /> entlang des Umfangs von das Element.</p>
-            <p><img alt="Größe von Diagrammelementen ändern" src="../images/resizeelement.png" /></p>
-            <p>Um die Position des Elements zu ändern, klicken Sie mit der linken Maustaste darauf, vergewissern Sie sich, dass sich Ihr Cursor in <img alt="Pfeil" src="../images/arrow.png" /> geändert hat, halten Sie die linke Maustaste gedrückt und ziehen Sie die Element in die benötigte Position.</p>
-            <p><img alt="Diagrammelemente positionieren" src="../images/moveelement.png" /></p>
+            <p>Wenn Sie die Größe von Diagrammelementen ändern müssen, klicken Sie mit der linken Maustaste, um das gewünschte Element auszuwählen, und ziehen Sie eines der 8 weißen Quadrate <div class = "icon icon-resize_square"></div> entlang des Umfangs von das Element.</p>
+            <p><div class = "big big-resizeelement"></div></p>
+            <p>Um die Position des Elements zu ändern, klicken Sie mit der linken Maustaste darauf, vergewissern Sie sich, dass sich Ihr Cursor in <div class = "icon icon-arrow"></div> geändert hat, halten Sie die linke Maustaste gedrückt und ziehen Sie die Element in die benötigte Position.</p>
+            <p><div class = "big big-moveelement"></div></p>
             <p>Um ein Diagrammelement zu löschen, wählen Sie es mit der linken Maustaste aus und drücken Sie die Taste <b>Entfernen</b> auf Ihrer Tastatur.</p>
             <p>Sie haben die Möglichkeit, 3D-Diagramme mithilfe der Maus zu drehen. Klicken Sie mit der linken Maustaste in den Diagrammbereich und halten Sie die Maustaste gedrückt. Um die 3D-Diagrammausrichtung zu ändern, ziehen Sie den Mauszeiger in die gewünschte Richtung ohne die Maustaste loszulassen.</p>
             <p><img alt="3D-Diagramm" src="../../../../../../common/main/resources/help/de/images/3dchart.png" /></p>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertEquation.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertEquation.htm
index 6533f2460..822ec2ec0 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertEquation.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertEquation.htm
@@ -20,23 +20,23 @@
             <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" />
+            <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</b> oder <b>gedreht</b> werden. Klicken Sie dazu auf den Rahmen des Formelfelds (der Rahmen wird als durchgezogene 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 Gleichungsvorlage repräsentiert eine Reihe von Slots. Ein Slot ist eine Position für jedes Element, aus dem die Gleichung besteht. Ein leerer Platz (auch als Platzhalter bezeichnet) hat einen gepunkteten Umriss <img alt="Gleichung Platzhalter" src="../images/equationplaceholder.png" />. Sie müssen alle Platzhalter mit den erforderlichen Werten ausfüllen.</p>
+            <div class = "big big-selectedequation"></div>
+            <p>Jede Gleichungsvorlage repräsentiert eine Reihe von Slots. Ein Slot ist eine Position für jedes Element, aus dem die Gleichung besteht. Ein leerer Platz (auch als Platzhalter bezeichnet) hat einen gepunkteten Umriss <div class = "icon icon-equationplaceholder"></div>. Sie müssen alle Platzhalter mit den erforderlichen Werten ausfüllen.</p>
             <h3>Werte eingeben</h3>
             <p>Der <b>Einfügepunkt</b> gibt an, wo das nächste von Ihnen eingegebene Zeichen erscheinen wird. Um die Einfügemarke genau zu positionieren, klicken Sie in einen Platzhalter und bewegen Sie die Einfügemarke mit den Pfeiltasten der Tastatur, um ein Zeichen nach links/rechts zu bewegen.</p>
-            <img alt="Bearbeitete Formel" src="../images/newslot.png" />
+            <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 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 (sehen Sie die Beschreibung der Option <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>AutoKorrekturfunktionen</b></a>).</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 (sehen Sie die Beschreibung der Option <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>AutoKorrekturfunktionen</b></a>).</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>
@@ -54,7 +54,7 @@
             <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>Startseite</b> in 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>Startseite</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>Startseite</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" />
+            <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>
@@ -80,7 +80,7 @@
             <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" />
+            <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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertImages.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertImages.htm
index 3d9e622ee..2c5a9c35c 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertImages.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertImages.htm
@@ -20,7 +20,7 @@
             <p>Um ein Bild in eine Folie <b>einzufü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 auf das Symbol <img alt="Bild Symbol" src="../images/image.png" /> <b>Bild</b> auf der Registerkarte <b>Startseite</b> oder <b>Einfügen</b> in der oberen Symbolleiste,</li>
+                <li>Klicken Sie auf das Symbol <div class = "icon icon-image"></div> <b>Bild</b> auf der Registerkarte <b>Startseite</b> oder <b>Einfügen</b> in der oberen Symbolleiste,</li>
                 <li>
                     Wählen Sie eine der folgenden Optionen, um das Bild hochzuladen:
                     <ul>
@@ -34,14 +34,14 @@
                 </li>
                 <li>Wenn Sie das Bild hinzugefügt haben, können Sie <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">Größe und Position</a> ändern.</li>
             </ol>
-            <p>Sie können auch ein Bild in einen Textplatzhalter einfügen, indem Sie das <img alt="Bild aus Datei Symbol" src="../images/placeholder_imagefromfile.png" /> <b>Bild aus Datei</b> darin klicken und das erforderliche Bild auswählen, das auf Ihrem PC gespeichert ist, oder verwenden Sie die Schaltfläche <img alt="Bild aus URL Symbol" src="../images/placeholder_imagefromurl.png" /> <b>Bild aus URL</b> und geben Sie die URL-Adresse des Bildes:</p>
+            <p>Sie können auch ein Bild in einen Textplatzhalter einfügen, indem Sie das <div class = "icon icon-placeholder_imagefromfile"></div> <b>Bild aus Datei</b> darin klicken und das erforderliche Bild auswählen, das auf Ihrem PC gespeichert ist, oder verwenden Sie die Schaltfläche <div class = "icon icon-placeholder_imagefromurl"></div> <b>Bild aus URL</b> und geben Sie die URL-Adresse des Bildes:</p>
             <p><img alt="Bild in einen Textplatzhalter einfügen" src="../images/placeholder_object.png" /></p>
             <p>Es ist auch möglich, ein Bild zu einem Folienlayout hinzuzufügen. Weitere Informationen finden Sie in dieser <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">Artikel</a>.</p>
             <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>
@@ -63,7 +63,7 @@
                 <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 die Form anzupassen, d.h. den <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Linientyp</b></a>, Größe und Farbe auswählen oder die Form ändern und im Menü <b>AutoForm ändern</b> eine neue Form auswählen. 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 die Form anzupassen, d.h. den <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Linientyp</b></a>, Größe und Farbe auswählen oder die Form ändern und im Menü <b>AutoForm ändern</b> eine neue Form auswählen. Die Form des Bildes ändert sich entsprechend Ihrer Auswahl.</p>
             <p>Auf der Registerkarte <b>Formeinstellungen</b> können Sie auch die Option <b>Schatten anzeigen</b> verwenden, um dem Bild einen Schatten hinzuzufügen.</p>
             <p><img alt="Registerkarte Formeinstellungen" src="../images/right_image_shape.png" /></p>
             <hr />
@@ -71,7 +71,7 @@
             <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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertText.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertText.htm
index f2109c79a..b26aa172b 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertText.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/InsertText.htm
@@ -160,7 +160,7 @@
                 <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">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">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>
@@ -184,13 +184,13 @@
 			</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">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">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>
             <h2>TextArt-Stil bearbeiten</h2>
-            <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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManageSlides.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManageSlides.htm
index c93b1bb8d..d82d6616c 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManageSlides.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManageSlides.htm
@@ -24,7 +24,7 @@
 			</ul>
 			<p><b>Um eine neue Folie mit einem anderen Layout zu erstellen:</b></p>
 			<ol>
-				<li>Klicken Sie in der oberen Symbolleiste auf den Registerkarten <b>Startseite</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 auf den Registerkarten <b>Startseite</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">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>
@@ -60,7 +60,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">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>Um alle vorhandenen Folien auszuwählen:</b></p>
 			<ol>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManipulateObjects.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManipulateObjects.htm
index 3bde628ba..bb30a9057 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManipulateObjects.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/ManipulateObjects.htm
@@ -20,13 +20,13 @@
 				<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>
 			<p>Um eine AutoForm umzuformen, können Sie auch die Option <b>Punkte bearbeiten</b> aus dem <b>Kontextmenü</b> verwenden.</p>
 			<p>Die Option <b>Punkte bearbeiten</b> wird verwendet, um die Krümmung Ihrer Form anzupassen oder zu ändern.</p>
 			<ol>
@@ -36,7 +36,7 @@
 				</li>
 				<li>
 					Sobald Sie auf den Ankerpunkt klicken, werden zwei blaue Linien mit weißen Quadraten an den Enden angezeigt. Dies sind Bezier-Ziehpunkte, mit denen Sie eine Kurve erstellen und die Glätte einer Kurve ändern können.
-					<p><img alt="Punkte bearbeiten" src="../images/editpoints_example.png" /></p>
+					<p><div class = "big big-editpoints_example"></div></p>
 				</li>
 				<li>
 					Solange die Ankerpunkte aktiv sind, können Sie sie hinzufügen und löschen:
@@ -47,19 +47,19 @@
 			</ol>
 			<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 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>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/SetSlideParameters.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/SetSlideParameters.htm
index f23f9716c..ef7a37176 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/SetSlideParameters.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/SetSlideParameters.htm
@@ -20,16 +20,16 @@
                 <li>
                     Mit <b>Themen</b> können Sie das Präsentationsdesign schnell ändern, insbesondere das Aussehen des Folienhintergrunds, vordefinierte Schriftarten für Titel und Texte und das Farbschema, das für die Präsentationselemente verwendet wird.
                     <b>Um ein Thema für die Präsentation auszuwählen</b>, klicken Sie auf das erforderliche vordefinierte Thema aus der Themengalerie rechts in der oberen Symbolleiste auf der Registerkarte <b>Startseite</b>. Das ausgewählte Thema wird auf alle Folien angewendet, wenn Sie nicht zuvor bestimmte Folien zum Anwenden des Themas ausgewählt haben.
-                    <p><img alt="Themengalerie" src="../images/themes.png" /></p>
+                    <p><div class = "big big-themes"></div></p>
                     <p>Um das ausgewählte Thema für eine oder mehrere Folien zu ändern, können Sie mit der rechten Maustaste auf die ausgewählten Folien in der Liste links klicken (oder mit der rechten Maustaste auf eine Folie im Bearbeitungsbereich klicken), die Option <b>Thema ändern</b> auswählen aus dem Kontextmenü und wählen Sie das gewünschte Thema.</p>
                 </li>
                 <li>
                     <b>Farbschema</b> wirkt sich auf die vordefinierten Farben der Präsentationselemente (Schriften, Linien, Füllungen usw.) aus und ermöglichen Ihnen, die Farbkonsistenz während der gesamten Präsentation beizubehalten.
-                    <b>Um ein Farbschema zu ändern</b>, klicken Sie auf das Symbol <img alt="Farbschema ändern" src="../images/changecolorscheme.png" /> <b>Farbschema ändern</b> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie das erforderliche Schema aus der Drop-Down-Liste aus. Das ausgewählte Farbschema wird in der Liste hervorgehoben und auf alle Folien angewendet.
+                    <b>Um ein Farbschema zu ändern</b>, klicken Sie auf das Symbol <div class = "icon icon-changecolorscheme"></div> <b>Farbschema ändern</b> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie das erforderliche Schema aus der Drop-Down-Liste aus. Das ausgewählte Farbschema wird in der Liste hervorgehoben und auf alle Folien angewendet.
                     <p><img alt="Farbschema" src="../images/colorscheme.png" /></p>
                 </li>
                 <li>
-                    <b>Um die Größe aller Folien in der Präsentation zu ändern</b>, klicken Sie auf <img alt="Symbol Foliengröße auswählen" src="../images/selectslidesizeicon.png" /> <b>Foliegröße wählen</b> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie die erforderliche Option aus der Drop-Down-Liste aus. Sie können wählen:
+                    <b>Um die Größe aller Folien in der Präsentation zu ändern</b>, klicken Sie auf <div class = "icon icon-selectslidesizeicon"></div> <b>Foliegröße wählen</b> auf der Registerkarte <b>Startseite</b> der oberen Symbolleiste und wählen Sie die erforderliche Option aus der Drop-Down-Liste aus. Sie können wählen:
                     <ul>
                         <li>eine der beiden Schnellzugriffs-Voreinstellungen - <b>Standard (4:3)</b> oder <b>Breitbildschirm (16:9)</b>,</li>
                         <li>
@@ -64,7 +64,7 @@
                         <li>wählen Sie in der Folienliste auf der linken Seite die Folien aus, auf die Sie einen Übergang anwenden möchten,</li>
                         <li>
                             wählen Sie in der Drop-Down-Liste <b>Effekt</b> auf der Registerkarte <b>Folien-Einstellungen</b> einen Übergang aus,
-                            <p class="note">Um die Registerkarte <b>Folien-Einstellungen</b> zu öffnen, klicken Sie im Folienbearbeitungsbereich auf das Symbol <b>Folien-Einstellungen</b> <img alt="Folien-Einstellungen" src="../images/slide_settings_icon.png" /> oder öffnen Sie das Rechtsklickmenü und wählen Sie <b>Folien-Einstellungen</b> aus dem Kontextmenü aus.</p>
+                            <p class="note">Um die Registerkarte <b>Folien-Einstellungen</b> zu öffnen, klicken Sie im Folienbearbeitungsbereich auf das Symbol <b>Folien-Einstellungen</b> <div class = "icon icon-slide_settings_icon"></div> oder öffnen Sie das Rechtsklickmenü und wählen Sie <b>Folien-Einstellungen</b> aus dem Kontextmenü aus.</p>
                         </li>
                         <li>passen Sie die Übergangseigenschaften an: Wählen Sie einen Übergang, Dauer und die Art und Weise, wie die Folien vorgerückt werden,</li>
                         <li>
@@ -77,7 +77,7 @@
                     <a id="changelayout"></a><b>Um Folienlayout zu ändern,</b>
                     <ol>
                         <li>wählen Sie in der Folienliste auf der linken Seite die Folien aus, auf die Sie ein neues Layout anwenden möchten,</li>
-                        <li>klicken Sie auf das Symbol <img alt="Folienlayout ändern" src="../images/changelayout.png" /> <b>Folienlayout ändern</b> auf der Registerkarte <b>Startseite</b> der obere Symbolleiste,</li>
+                        <li>klicken Sie auf das Symbol <div class = "icon icon-changelayout"></div> <b>Folienlayout ändern</b> auf der Registerkarte <b>Startseite</b> der obere Symbolleiste,</li>
                         <li>
                             wählen Sie das gewünschte Layout aus dem Menü aus.
                             <p>Sie können auch mit der rechten Maustaste auf die gewünschte Folie in der Liste links klicken, die Option <b>Layout ändern</b> im Kontextmenü auswählen und das gewünschte Layout bestimmen.</p>
@@ -88,13 +88,13 @@
                 <li>
                     <a id="addtolayout"></a><b>Um einem Folienlayout Objekte hinzuzufügen</b>,
                     <ol>
-                        <li>Klicken Sie auf das Symbol <b>Folienlayout ändern</b> <img alt="Symbol Folienlayout ändern" src="../images/changelayout.png" /> und wählen Sie ein Layout aus, zu dem Sie ein Objekt hinzufügen möchten,</li>
+                        <li>Klicken Sie auf das Symbol <b>Folienlayout ändern</b> <div class = "icon icon-changelayout"></div> und wählen Sie ein Layout aus, zu dem Sie ein Objekt hinzufügen möchten,</li>
                         <li>
                             verwenden Sie die Registerkarte <b>Einfügen</b> der oberen Symbolleiste, fügen Sie das erforderliche Objekt zur Folie hinzu (<em>Bild</em>, <em>Tabelle</em>, <em>Diagramm</em> , <em>Form</em>), dann <b>mit der rechten Maustaste</b> auf dieses Objekt klicken und die Option <b>Zum Layout hinzufügen</b> auswählen,
                             <br /><img alt="Zum Layout hinzufügen" src="../images/addtolayout.png" />
                         </li>
                         <li>
-                            klicken Sie auf der Registerkarte <b>Startseite</b> auf <b>Folienlayout ändern</b> <img alt="Symbol Folienlayout ändern" src="../images/changelayout.png" /> und wenden Sie die geänderte Anordnung an.
+                            klicken Sie auf der Registerkarte <b>Startseite</b> auf <b>Folienlayout ändern</b> <div class = "icon icon-changelayout"></div> und wenden Sie die geänderte Anordnung an.
                             <p><img alt="Layout anwenden" src="../images/applylayout.png" /></p>
                             <p>Die ausgewählten Objekte werden dem Layout des aktuellen Themas hinzugefügt.</p>
                             <p class="note">Objekte, die auf diese Weise auf einer Folie platziert wurden, können nicht ausgewählt, in der Größe geändert oder verschoben werden.</p>
diff --git a/apps/presentationeditor/main/resources/help/de/UsageInstructions/SupportSmartArt.htm b/apps/presentationeditor/main/resources/help/de/UsageInstructions/SupportSmartArt.htm
index 492432c9b..1514c34a6 100644
--- a/apps/presentationeditor/main/resources/help/de/UsageInstructions/SupportSmartArt.htm
+++ b/apps/presentationeditor/main/resources/help/de/UsageInstructions/SupportSmartArt.htm
@@ -4,6 +4,7 @@
     <title>Unterstützung von SmartArt im ONLYOFFICE-Präsentationseditor</title>
     <meta charset="utf-8" />
     <meta name="description" content="Bearbeiten Sie SmartArt-Grafiken, die mit Editoren von Drittanbietern hinzugefügt wurden" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm b/apps/presentationeditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm
index 25c72ff31..d5b3826e4 100644
--- a/apps/presentationeditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm
+++ b/apps/presentationeditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm
@@ -17,15 +17,15 @@
             <h1>Co-editing presentations in real time</h1>
             <p>The <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a> allows you to maintain constant team-wide approach to work flow: <a href="https://helpcenter.onlyoffice.com/userguides/groups-guides-documents-share-documents.aspx">share</a> files and folders, <a href="../HelpfulHints/UsingChat.htm" onclick="onhyperlinkclick(this)">communicate</a> right in the editor, <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">comment</a> certain parts of your presentations that require additional third-party input, save <a href="../HelpfulHints/VersionHistory.htm" onclick="onhyperlinkclick(this)">presentation versions</a> for future use.</p>
             <p>In <b>Presentation Editor</b> you can collaborate on presentations in real time using two modes: <b>Fast</b> or <b>Strict</b>.</p>
-            <p>The modes can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>. It's also possible to choose the 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 modes 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="../../../../../../common/main/resources/help/en/images/coeditingmodemenu.png" /></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>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>
             <h3><b>Fast mode</b></h3>
             <p>The <b>Fast</b> mode is used by default and shows the changes made by other users in real time. When you co-edit a presentation in this mode, the possibility to <b>Redo</b> the last undone operation is not available. This mode will show the actions and the names of the co-editors. When a presentation is being edited by several users simultaneously in this mode, the edited objects are marked with dashed lines of different colors. By hovering the mouse cursor over one of the edited passages, the name of the user who is editing it at the moment is displayed.</p>
             <h3><b>Strict mode</b></h3>
-            <p>The <b>Strict</b> mode is selected to hide changes made by other users until you click the <b>Save</b> <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon to save your changes and accept the changes made by co-authors.</p>
+            <p>The <b>Strict</b> mode is selected to hide changes made by other users until you click the <b>Save</b> <div class = "icon icon-savewhilecoediting"></div> icon to save your changes and accept the changes made by co-authors.</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.</p>
-            <p>As soon as one of the users saves their changes by clicking the <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
+            <p>As soon as one of the users saves their changes by clicking the <div class = "icon icon-savewhilecoediting"></div> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <div class = "icon icon-saveupdate"></div> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
             <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>
diff --git a/apps/presentationeditor/main/resources/help/en/HelpfulHints/Commenting.htm b/apps/presentationeditor/main/resources/help/en/HelpfulHints/Commenting.htm
index ed8db1675..81eaad8d7 100644
--- a/apps/presentationeditor/main/resources/help/en/HelpfulHints/Commenting.htm
+++ b/apps/presentationeditor/main/resources/help/en/HelpfulHints/Commenting.htm
@@ -4,6 +4,7 @@
 		<title>Commenting</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Tips on using the Chat tool" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 	</head>
 	<body>
@@ -16,22 +17,22 @@
 			<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 />
+					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 they have 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>
 			<h3>Managing comments</h3>
 			<p>You can manage the added comments using the icons in the comment balloon or on the <b>Comments</b> panel on the left:</p>
 			<ul>
 				<li>
-					sort the added comments by clicking the <img alt="Sort icon" src="../images/sortcommentsicon.png" /> icon:
+					sort the added comments by clicking the <div class = "icon icon-sortcommentsicon"></div> icon:
 					<ul>
 						<li>by date: <b>Newest</b> or <b>Oldest</b>.</li>
 						<li>by author: <b>Author from A to Z</b> or <b>Author from Z to A</b>.</li>
@@ -41,9 +42,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>
 			<h3>Adding mentions</h3>
@@ -59,7 +60,7 @@
 			<h3>Removing comments</h3>
 			<p>To remove comments,</p>
 			<ol>
-				<li>click the <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Remove</b> button on the <b>Collaboration</b> tab of the top toolbar,</li>
+				<li>click the <div class = "icon icon-removecomment_toptoolbar"></div> <b>Remove</b> button on the <b>Collaboration</b> tab of the top toolbar,</li>
 				<li>
 					select the necessary option from the menu:
 					<ul>
@@ -69,7 +70,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>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/help/en/HelpfulHints/Password.htm b/apps/presentationeditor/main/resources/help/en/HelpfulHints/Password.htm
index 53a32327c..294380a38 100644
--- a/apps/presentationeditor/main/resources/help/en/HelpfulHints/Password.htm
+++ b/apps/presentationeditor/main/resources/help/en/HelpfulHints/Password.htm
@@ -24,7 +24,7 @@
 				<li>go to the <b>File</b> tab at the top toolbar,</li>
 				<li>choose the <b>Protect</b> option,</li>
 				<li>click the <b>Add password</b> button,</li>
-				<li>set a password in the <b>Password</b> field and repeat it in the <b>Repeat password</b> field below, then click <b>OK</b>. Click <img alt="Show password icon" src="../images/show_password.png" /> to show or hide password characters when entered.</li>
+				<li>set a password in the <b>Password</b> field and repeat it in the <b>Repeat password</b> field below, then click <b>OK</b>. Click <div class = "icon icon-show_password"></div> to show or hide password characters when entered.</li>
 			</ul>
 			<p><img alt="setting password" src="../../../../../../common/main/resources/help/en/images/setpassword.png" /></p>
 
diff --git a/apps/presentationeditor/main/resources/help/en/HelpfulHints/UsingChat.htm b/apps/presentationeditor/main/resources/help/en/HelpfulHints/UsingChat.htm
index 54ef9808c..3890482ec 100644
--- a/apps/presentationeditor/main/resources/help/en/HelpfulHints/UsingChat.htm
+++ b/apps/presentationeditor/main/resources/help/en/HelpfulHints/UsingChat.htm
@@ -19,8 +19,8 @@
 				<li>press the <b>Send</b> button.</li>
 			</ol>
 			<p class="note">The chat messages are stored during one session only. To discuss the presentation content, it is better to use <a href="../HelpfulHints/Commenting.htm" onclick="onhyperlinkclick(this)">comments</a> which are stored until they are deleted.</p>
-			<p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
-			<p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon 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>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/help/en/HelpfulHints/VersionHistory.htm b/apps/presentationeditor/main/resources/help/en/HelpfulHints/VersionHistory.htm
index 34dc280fd..77fc13e52 100644
--- a/apps/presentationeditor/main/resources/help/en/HelpfulHints/VersionHistory.htm
+++ b/apps/presentationeditor/main/resources/help/en/HelpfulHints/VersionHistory.htm
@@ -4,6 +4,7 @@
 	<title>Version history</title>
 	<meta charset="utf-8" />
 	<meta name="description" content="Tips on collaborative editing" />
+	<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 	<link type="text/css" rel="stylesheet" href="../editor.css" />
 	<script type="text/javascript" src="../callback.js"></script>
 	<script type="text/javascript" src="../search/js/page-search.js"></script>
@@ -25,7 +26,7 @@
 				<p>or</p>
 			</li>
 			<li>go to the <b>Collaboration</b> tab,</li>
-			<li>open the history of versions using the <img alt="Version history" src="../images/versionhistoryicon.png" /> <b>Version History</b> icon at the top toolbar.</li>
+			<li>open the history of versions using the <div class = "icon icon-versionhistoryicon"></div> <b>Version History</b> icon at the top toolbar.</li>
 		</ul>
 		<p>You'll see the list of the presentation versions and revisions 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>).</p>
 		<p><b>Viewing versions:</b></p>
diff --git a/apps/presentationeditor/main/resources/help/en/ProgramInterface/AnimationTab.htm b/apps/presentationeditor/main/resources/help/en/ProgramInterface/AnimationTab.htm
index ac5b2ec1e..b8b4d8aa4 100644
--- a/apps/presentationeditor/main/resources/help/en/ProgramInterface/AnimationTab.htm
+++ b/apps/presentationeditor/main/resources/help/en/ProgramInterface/AnimationTab.htm
@@ -4,6 +4,7 @@
 		<title>Animation tab</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Introducing the Presentation Editor user interface - Animation tab" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/en/ProgramInterface/ViewTab.htm b/apps/presentationeditor/main/resources/help/en/ProgramInterface/ViewTab.htm
index 042328e51..09c6b3e20 100644
--- a/apps/presentationeditor/main/resources/help/en/ProgramInterface/ViewTab.htm
+++ b/apps/presentationeditor/main/resources/help/en/ProgramInterface/ViewTab.htm
@@ -4,6 +4,7 @@
 		<title>View tab</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation Editor user interface - View tab" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/en/UsageInstructions/AddingAnimations.htm b/apps/presentationeditor/main/resources/help/en/UsageInstructions/AddingAnimations.htm
index bbe01c0eb..f61ed5c06 100644
--- a/apps/presentationeditor/main/resources/help/en/UsageInstructions/AddingAnimations.htm
+++ b/apps/presentationeditor/main/resources/help/en/UsageInstructions/AddingAnimations.htm
@@ -4,6 +4,7 @@
 		<title>Adding animations</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Describing how to add and manage animation effects on a slide." />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm b/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm
index be506f79b..10ad0d1da 100644
--- a/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm
+++ b/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm
@@ -20,7 +20,7 @@
             <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> tab or the <img alt="Shape Gallery" src="../images/shapegallery.png" /><b>Shape gallery</b> dropdown arrow on the <b>Insert</b> tab of the top toolbar,
+                    click the <div class = "icon icon-insertautoshape"></div> <b>Shape</b> icon on the <b>Home</b> tab or the <div class = "big big-shapegallery"></div><b>Shape gallery</b> dropdown arrow on the <b>Insert</b> tab of the top toolbar,
                 </li>
                 <li>select one of the available autoshape groups from the <b>Shape Gallery</b>: <em>Recently Used</em>, <em>Basic Shapes</em>, <em>Figured Arrows</em>, <em>Math</em>, <em>Charts</em>, <em>Stars & Ribbons</em>, <em>Callouts</em>, <em>Buttons</em>, <em>Rectangles</em>, <em>Lines</em>,</li>
                 <li>click on the necessary autoshape within the selected group,</li>
diff --git a/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm b/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm
index 8e7caca73..fa69e5c3f 100644
--- a/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm
+++ b/apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm
@@ -20,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">
diff --git a/apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm b/apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm
index 867d8de82..17f15abcd 100644
--- a/apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm
+++ b/apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm
@@ -20,13 +20,13 @@
                 <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>
             <p>To reshape an autoshape, you can also use the <b>Edit Points</b> option from the <b>context menu</b>.</p>
             <p>The <b>Edit Points</b> option is used to customize or to change the curvature of your shape.</p>
             <ol>
@@ -36,7 +36,7 @@
                 </li>
                 <li>
                     Once you click the anchor point, two blue lines with white squares at the ends will appear. These are Bezier handles that allow you to create and a curve and to change a curve’s smoothness.
-                    <p><img alt="Edit Points" src="../images/editpoints_example.png" /></p>
+                    <p><div class = "big big-editpoints_example"></div></p>
                 </li>
                 <li>
                     As long as the anchor points are active, you can add and delete them:
@@ -48,14 +48,14 @@
             </ol>
                 <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.
+                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><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>
diff --git a/apps/presentationeditor/main/resources/help/en/UsageInstructions/SupportSmartArt.htm b/apps/presentationeditor/main/resources/help/en/UsageInstructions/SupportSmartArt.htm
index 7d359088c..1ae70a709 100644
--- a/apps/presentationeditor/main/resources/help/en/UsageInstructions/SupportSmartArt.htm
+++ b/apps/presentationeditor/main/resources/help/en/UsageInstructions/SupportSmartArt.htm
@@ -4,6 +4,7 @@
     <title>Support of SmartArt in ONLYOFFICE Presentation Editor</title>
     <meta charset="utf-8" />
     <meta name="description" content="Edit SmartArt graphics that were added using third-party editors" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/CollaborativeEditing.htm b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/CollaborativeEditing.htm
index 0f85bc505..9f7deb6b1 100644
--- a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/CollaborativeEditing.htm
+++ b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/CollaborativeEditing.htm
@@ -66,20 +66,20 @@
             <ol>
                 <li>sélectionnez l'objet où vous pensez qu'il y a une erreur ou un problème,</li>
                 <li>
-                    passez à l'onglet Insertion ou Collaboration de la barre d'outils supérieure et cliquez sur le bouton Commentaire <img alt="L'icône Commentaires" src="../images/comment_toptoolbar.png" /> ou<br /> cliquez avec le bouton droit sur le passage de texte sélectionné et sélectionnez l'option <b>Ajouter un commentaire</b> dans le menu contextuel,<br />
+                    passez à l'onglet Insertion ou Collaboration de la barre d'outils supérieure et cliquez sur le bouton Commentaire <div class = "icon icon-comment_toptoolbar"></div> ou<br /> cliquez avec le bouton droit sur le passage de texte sélectionné et sélectionnez l'option <b>Ajouter un commentaire</b> dans le menu contextuel,<br />
                 </li>
                 <li>saisissez le texte nécessaire,</li>
                 <li>cliquez sur le bouton <b>Ajouter commentaire/Ajouter</b>.</li>
             </ol>
-            <p>L'objet que vous commenter sera marqué par l'icône  <img alt="L'icône de l'objet commenté" src="../images/added_comment_icon.png" /> . Pour lire le commentaire, il suffit de cliquer sur cette icône.</p>
-            <p>Pour ajouter un commentaire à une diapositive donnée, sélectionnez la diapositive et utilisez le bouton <b>Commentaires</b> <img alt="L'icône Commentaires" src="../images/comment_toptoolbar.png" /> dans l'onglet <b>Insertion</b> ou <b>Collaboration</b> de la barre d'outils supérieure. Le commentaire ajouté sera affiché dans le coin supérieur gauche de la diapositive.</p>
-            <p>Pour créer un commentaire de niveau présentation qui n'est pas lié à un objet ou une diapositive spécifique, cliquez sur l'icône <img alt="L'icône Commentaires" src="../images/commentsicon.png" /> dans la barre latérale gauche pour ouvrir le panneau <b>Commentaires</b> et utilisez le lien <b>Ajouter un commentaire au document</b>.  Les commentaires au niveau de la présentation peuvent être consultés dans le panneau <b>Commentaires</b>. Les commentaires relatifs aux objets et aux diapositives y sont également disponibles.</p>
+            <p>L'objet que vous commenter sera marqué par l'icône  <div class = "icon icon-added_comment_icon"></div> . Pour lire le commentaire, il suffit de cliquer sur cette icône.</p>
+            <p>Pour ajouter un commentaire à une diapositive donnée, sélectionnez la diapositive et utilisez le bouton <b>Commentaires</b> <div class = "icon icon-comment_toptoolbar"></div> dans l'onglet <b>Insertion</b> ou <b>Collaboration</b> de la barre d'outils supérieure. Le commentaire ajouté sera affiché dans le coin supérieur gauche de la diapositive.</p>
+            <p>Pour créer un commentaire de niveau présentation qui n'est pas lié à un objet ou une diapositive spécifique, cliquez sur l'icône <div class = "icon icon-commentsicon"></div> dans la barre latérale gauche pour ouvrir le panneau <b>Commentaires</b> et utilisez le lien <b>Ajouter un commentaire au document</b>.  Les commentaires au niveau de la présentation peuvent être consultés dans le panneau <b>Commentaires</b>. Les commentaires relatifs aux objets et aux diapositives y sont également disponibles.</p>
             <p>Tout autre utilisateur peut répondre au commentaire ajouté en posant une question ou en faisant référence au travail fait. Pour le faire il suffit de cliquer sur le lien <b>Ajouter une réponse</b> situé au-dessous du commentaire, saisissez votre réponse dans le champ de saisie et appuyez sur le bouton <b>Répondre</b>.</p>
-            <p>Si vous utilisez le mode de co-édition <b>Strict</b>, les nouveaux commentaires ajoutés par d'autres utilisateurs ne seront visibles qu'après un clic sur l'icône <img alt="L'icône Enregistrer" src="../images/saveupdate.png" /> dans le coin supérieur gauche de la barre supérieure.</p>
+            <p>Si vous utilisez le mode de co-édition <b>Strict</b>, les nouveaux commentaires ajoutés par d'autres utilisateurs ne seront visibles qu'après un clic sur l'icône <div class = "icon icon-saveupdate"></div> dans le coin supérieur gauche de la barre supérieure.</p>
             <p>Vous pouvez gérer les commentaires ajoutés en utilisant les icônes de la bulle de commentaire ou sur le panneau gauche <b>Commentaires</b>:</p>
             <ul>
                 <li>
-                    trier les commentaires ajoutés en cliquant sur l'icône <img alt="L'icône de tri" src="../images/sortcommentsicon.png" /> :
+                    trier les commentaires ajoutés en cliquant sur l'icône <div class = "icon icon-sortcommentsicon"></div> :
                     <ul>
                         <li>par date: <b>Plus récent</b> ou <b>Plus ancien</b>. C'est 'ordre de tri par défaut.</li>
                         <li>par auteur: <b>Auteur de A à Z</b> ou <b>Auteur de Z à A</b></li>
@@ -90,9 +90,9 @@
                         </li>
                     </ul>
                 </li>
-                <li>modifier le commentaire actuel en cliquant sur l'icône <img alt="L'icône Modifier" src="../images/editcommenticon.png" /> ,</li>
-                <li>supprimer le commentaire actuel en cliquant sur l'icône <img alt="L'icône Supprimer" src="../images/deletecommenticon.png" /> ,</li>
-                <li>fermez la discussion actuelle en cliquant sur l'icône <img alt="L'icône Résoudre" src="../images/resolveicon.png" /> si la tâche ou le problème décrit dans votre commentaire est résolu, après quoi la discussion ouverte par votre commentaire reçoit le statut résolu. Pour l'ouvrir à nouveau, cliquez sur l'icône <img alt="L'icône Ouvrir à nouveau" src="../images/resolvedicon.png" /> .</li>
+                <li>modifier le commentaire actuel en cliquant sur l'icône <div class = "icon icon-editcommenticon"></div> ,</li>
+                <li>supprimer le commentaire actuel en cliquant sur l'icône <div class = "icon icon-deletecommenticon"></div> ,</li>
+                <li>fermez la discussion actuelle en cliquant sur l'icône <div class = "icon icon-resolveicon"></div> si la tâche ou le problème décrit dans votre commentaire est résolu, après quoi la discussion ouverte par votre commentaire reçoit le statut résolu. Pour l'ouvrir à nouveau, cliquez sur l'icône <div class = "icon icon-resolvedicon"></div> .</li>
                 <li>si vous souhaitez gérer tous les commentaires à la fois, accédez le menu contextuel <b>Résoudre</b> sous l'onglet <b>Collaboration</b>. Sélectionnez l'une des options disponibles: <b>Résoudre les commentaires actuels</b>, <b>Marquer mes commentaires comme résolus</b> et <b>Marquer tous les commentaires comme résolus</b> dans la présentation.</li>
             </ul>
             <h4>Ajouter les mentions</h4>
@@ -112,7 +112,7 @@
                     </ul>
                 </li>
             </ol>
-            <p>Pour fermer le panneau avec les commentaires, cliquez sur l'icône <img alt="L'icône Commentaires" src="../images/commentsicon.png" /> de la barre latérale de gauche encore une fois.</p>
+            <p>Pour fermer le panneau avec les commentaires, cliquez sur l'icône <div class = "icon icon-commentsicon"></div> de la barre latérale de gauche encore une fois.</p>
         </div>
 	</body>
 </html>
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Navigation.htm b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Navigation.htm
index 7cba0154c..7807de573 100644
--- a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Navigation.htm
+++ b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Navigation.htm
@@ -21,7 +21,7 @@
 			</p>
 			<ul>
 				<li>
-					<b>Masquer la barre d'outils</b> sert à masquer la barre d'outils supérieure contenant les commandes pendant que les onglets restent visibles. Lorsque cette option est activée, vous pouvez cliquer sur n'importe quel onglet pour afficher la barre d'outils. La barre d'outils est affichée jusqu'à ce que vous cliquiez n'importe où à l'extérieur. Pour désactiver ce mode, cliquez sur l'icône <b>Paramètres d'affichage</b> <img alt="L'icône Paramètres d'affichage" src="../images/viewsettingsicon.png" /> et cliquez à nouveau sur l'option <b>Masquer la barre d'outils</b>. La barre d'outils supérieure sera affichée tout le temps.
+					<b>Masquer la barre d'outils</b> sert à masquer la barre d'outils supérieure contenant les commandes pendant que les onglets restent visibles. Lorsque cette option est activée, vous pouvez cliquer sur n'importe quel onglet pour afficher la barre d'outils. La barre d'outils est affichée jusqu'à ce que vous cliquiez n'importe où à l'extérieur. Pour désactiver ce mode, cliquez sur l'icône <b>Paramètres d'affichage</b> <div class = "icon icon-viewsettingsicon"></div> et cliquez à nouveau sur l'option <b>Masquer la barre d'outils</b>. La barre d'outils supérieure sera affichée tout le temps.
 					<p class="note"><b>Remarque</b>: vous pouvez également double-cliquer sur un onglet pour masquer la barre d'outils supérieure ou l'afficher à nouveau.</p>
 				</li>
 				<li><b>Masquer la barre d'état</b> sert à masquer la barre qui se situe tout en bas avec les boutons <b>Affichage des numéros de diapositives</b> et <b>Zoom</b>. Pour afficher la <b>Barre d'état</b> masquée cliquez sur cette option encore une fois.</li>
@@ -32,7 +32,7 @@
 			<h3>Utiliser les outils de navigation</h3>
 			<p>Pour naviguer à travers votre présentation, utilisez les outils suivants:</p>
 			<p>
-				Les boutons <b>Zoom</b> sont situés en bas à droite et sont utilisés pour faire un zoom avant et arrière dans la présentation active. Pour modifier la valeur de zoom sélectionnée en pourcentage, cliquez dessus et sélectionnez l'une des options de zoom disponibles dans la liste (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%) ou utilisez les boutons <b>Zoom avant</b> <img alt="Bouton Zoom avant" src="../images/zoomin.png" /> ou <b>Zoom arrière</b> <img alt="Bouton Zoom arrière" src="../images/zoomout.png" /> . Cliquez sur l'icône <b>Ajuster à la largeur</b> <img alt="Bouton Ajuster à la largeur" src="../images/fitwidth.png" /> pour adapter la largeur de la diapositive à la partie visible de la zone de travail. Pour adapter la page entière du document à la partie visible de la zone de travail, cliquez sur l'icône <b>Ajuster à la diapositive</b> <img alt="Bouton Ajuster à la diapositive" src="../images/fitslide.png" /> . Les paramètres de Zoom sont également disponibles dans la liste déroulante <b>Paramètres d'affichage</b> <img alt="L'icône Paramètres d'affichage" src="../images/viewsettingsicon.png" /> qui peuvent être bien utiles si vous décidez de masquer la <b>Barre d'état</b>.
+				Les boutons <b>Zoom</b> sont situés en bas à droite et sont utilisés pour faire un zoom avant et arrière dans la présentation active. Pour modifier la valeur de zoom sélectionnée en pourcentage, cliquez dessus et sélectionnez l'une des options de zoom disponibles dans la liste (50% / 75% / 100% / 125% / 150% / 175% / 200% / 300% / 400% / 500%) ou utilisez les boutons <b>Zoom avant</b> <div class = "icon icon-zoomin"></div> ou <b>Zoom arrière</b> <div class = "icon icon-zoomout"></div> . Cliquez sur l'icône <b>Ajuster à la largeur</b> <div class = "icon icon-fitwidth"></div> pour adapter la largeur de la diapositive à la partie visible de la zone de travail. Pour adapter la page entière du document à la partie visible de la zone de travail, cliquez sur l'icône <b>Ajuster à la diapositive</b> <div class = "icon icon-fitslide"></div> . Les paramètres de Zoom sont également disponibles dans la liste déroulante <b>Paramètres d'affichage</b> <div class = "icon icon-viewsettingsicon"></div> qui peuvent être bien utiles si vous décidez de masquer la <b>Barre d'état</b>.
 			</p>
 			<p class="note"><b>Remarque</b>: vous pouvez définir une valeur de zoom par défaut. Basculez vers l'onglet <b>Fichier</b> de la barre d'outils supérieure, allez à la section <b>Paramètres avancés...</b>, choisissez la <b>Valeur de zoom par défaut</b> nécessaire dans la liste et cliquez sur le bouton <b>Appliquer</b>.</p>
 			<p>Pour accéder à la diapositive précédente ou suivante lors de la modification de la présentation, vous pouvez utiliser les boutons <div class = "icon icon-previouspage"></div> et <div class = "icon icon-nextpage"></div> en haut et en bas de la barre de défilement verticale sur le côté droit de la diapositive.</p>
diff --git a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Password.htm b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Password.htm
index 8c9e7eae6..c79b749f9 100644
--- a/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Password.htm
+++ b/apps/presentationeditor/main/resources/help/fr/HelpfulHints/Password.htm
@@ -25,7 +25,7 @@
 				<li>choisissez l'option <b>Protéger</b>,</li>
 				<li>cliquez sur le bouton <b>Ajouter un mot de passe</b>.</li>
                 <li>
-                    saisissez le mot de passe dans le champ <b>Mot de passe</b> et validez-le dans le champ <b>Confirmez le mot de passe</b> au-dessous, ensuite cliquez sur <b>OK</b>. Cliquez sur <img alt="Show password icon" src="../images/show_password.png" /> pour afficher pi masquer les caractèrs du mot de passe lors de la saisie.
+                    saisissez le mot de passe dans le champ <b>Mot de passe</b> et validez-le dans le champ <b>Confirmez le mot de passe</b> au-dessous, ensuite cliquez sur <b>OK</b>. Cliquez sur <div class = "icon icon-show_password"></div> pour afficher pi masquer les caractèrs du mot de passe lors de la saisie.
                     <p><img alt="Définir un mot de passe" src="../../../../../../common/main/resources/help/fr/images/setpassword.png" /></p>
                 </li>
 			</ul>
diff --git a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/AnimationTab.htm b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/AnimationTab.htm
index 3a843a81c..1cfdc4607 100644
--- a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/AnimationTab.htm
+++ b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/AnimationTab.htm
@@ -4,6 +4,7 @@
 		<title>Onglet Animation</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Présentation de l'interface utilisateur de Presentation Editor - Onglet Animation" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/TransitionsTab.htm b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/TransitionsTab.htm
index 574a296d7..12104bc5b 100644
--- a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/TransitionsTab.htm
+++ b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/TransitionsTab.htm
@@ -4,6 +4,7 @@
 		<title>Onglet Transitions</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Introducing the Presentation Editor user interface - Transitions tab" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/ViewTab.htm b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/ViewTab.htm
index d363c24d8..6e797cb29 100644
--- a/apps/presentationeditor/main/resources/help/fr/ProgramInterface/ViewTab.htm
+++ b/apps/presentationeditor/main/resources/help/fr/ProgramInterface/ViewTab.htm
@@ -4,6 +4,7 @@
 		<title>Onglet Affichage</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Présentation de l'interface Presentation Editor - onglet Affichage" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/AddingAnimations.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/AddingAnimations.htm
index 18c22e8ea..d7c14108f 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/AddingAnimations.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/AddingAnimations.htm
@@ -4,6 +4,7 @@
 		<title>Ajouter des animations</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Description des possibilités de l'éditeur pour ajouter et gérer des effets d'animation sur une diapositive." />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/CopyPasteUndoRedo.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/CopyPasteUndoRedo.htm
index 8c857fb0d..50c7281a5 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/CopyPasteUndoRedo.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/CopyPasteUndoRedo.htm
@@ -30,7 +30,7 @@
             </ul>
             <h3>Utiliser la fonctionnalité Collage spécial</h3>
             <p class="note"><b>Note</b>: Pendant le travail collaboratif, la fonctionnalité <b>Collage spécial</b> n'est disponible que pour le mode de collaboration <b>Strict</b>.</p>
-            <p>Une fois le texte copié collé, le bouton <b>Collage spécial</b> <img alt="Collage spécial" src="../images/pastespecialbutton.png" /> apparaît à côté du passage de texte inséré. Cliquez sur ce bouton pour sélectionner l'option de collage requise.</p>
+            <p>Une fois le texte copié collé, le bouton <b>Collage spécial</b> <div class = "icon icon-pastespecialbutton"></div> apparaît à côté du passage de texte inséré. Cliquez sur ce bouton pour sélectionner l'option de collage requise.</p>
             <p>Lors du collage de passages de texte, les options suivantes sont disponibles:</p>
             <ul>
                 <li><em>Utiliser le thème de destination</em> - permet d'appliquer la mise en forme spécifiée par le thème de la présentation en cours. Cette option est utilisée par défaut.</li>
@@ -48,9 +48,9 @@
             <h3>Utiliser les opérations Annuler/Rétablir</h3>
             <p>Pour effectuer les opérations annuler/rétablir, utilisez les icônes correspondantes dans la partie gauche de l'en-tête de l'éditeur ou les raccourcis clavier :</p>
             <ul>
-                <li><b>Annuler</b> – utilisez l'icône <b>Annuler</b> <img alt="Icône Annuler" src="../images/undo.png" /> pour annuler la dernière action effectuée.</li>
+                <li><b>Annuler</b> – utilisez l'icône <b>Annuler</b> <div class = "icon icon-undo"></div> pour annuler la dernière action effectuée.</li>
                 <li>
-                    <b>Rétablir</b> – utilisez l'icône <b>Rétablir</b> <img alt="Icône Rétablir" src="../images/redo.png" /> pour rétablir la dernière action annulée.<p>Vous pouvez aussi utiliser la combinaison de touches <b>Ctrl+Z</b> pour annuler ou pour rétablir <b>Ctrl+Y</b>.</p>
+                    <b>Rétablir</b> – utilisez l'icône <b>Rétablir</b> <div class = "icon icon-redo"></div> pour rétablir la dernière action annulée.<p>Vous pouvez aussi utiliser la combinaison de touches <b>Ctrl+Z</b> pour annuler ou pour rétablir <b>Ctrl+Y</b>.</p>
                 </li>
             </ul>
             <p class="note"><b>Remarque</b> : lorsque vous co-éditez une présentation en mode <b>Rapide</b>, la possibilité de <b>Rétablir</b> la dernière opération annulée n'est pas disponible.</p>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertAutoshapes.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertAutoshapes.htm
index dd7273b03..a70423fda 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertAutoshapes.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertAutoshapes.htm
@@ -19,7 +19,7 @@
             <p>Pour <b>ajouter</b> une forme automatique à une diapositive dans <a target="_blank" href="https://www.onlyoffice.com/fr/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>,</p>
             <ol>
                 <li>sélectionnez la diapositive à laquelle vous voulez ajouter une forme automatique dans la liste des diapositives à gauche.</li>
-                <li>cliquez sur l'icône <img alt="Insérer une forme automatique" src="../images/insertautoshape.png" /> <b>Forme</b> dans l'onglet <b>Accueil</b> ou sur la flèche déroulante de la <img alt="Gallerie de formes" src="../images/shapegallery.png" /> <b>Galerie de formes</b> dans l'onglet <b>Insertion</b> de la barre d'outils supérieure,</li>
+                <li>cliquez sur l'icône <div class = "icon icon-insertautoshape"></div> <b>Forme</b> dans l'onglet <b>Accueil</b> ou sur la flèche déroulante de la <div class = "big big-shapegallery"></div> <b>Galerie de formes</b> dans l'onglet <b>Insertion</b> de la barre d'outils supérieure,</li>
                 <li>sélectionnez l'un des groupes des formes automatiques disponibles dans la <b>Galerie des formes</b>: <em>Récemment utilisé</em>, <em>Formes de base</em>, <em>Flèches figurées</em>, <em>Maths</em>, <em>Graphiques</em>, <em>Étoiles et rubans</em>, <em>Légendes</em>, <em>Boutons</em>, <em>Rectangles</em>, <em>Lignes</em>,</li>
                 <li>cliquez sur la forme automatique voulue du groupe sélectionné,</li>
                 <li>dans la zone d'édition de la diapositive, placez le curseur de la souris là où vous voulez insérer la forme,<p class="note"><b>Remarque</b> : vous pouvez cliquer et faire glisser pour étirer la forme.</li>
@@ -29,7 +29,7 @@
 
             <hr />
             <h3>Modifier les paramètres de la forme automatique</h3>
-            <p>Certains paramètres de la forme automatique peuvent être modifiés en utilisant l'onglet <b>Paramètres de la forme</b> de la barre latérale droite. Pour l'activer, sélectionnez la forme ajoutée avec la souris et sélectionnez l'icône <b>Paramètres de la forme</b> <img alt="Paramètres de la forme" src="../images/shape_settings_icon.png" /> à droite. Vous pouvez y modifier les paramètres suivants :</p>
+            <p>Certains paramètres de la forme automatique peuvent être modifiés en utilisant l'onglet <b>Paramètres de la forme</b> de la barre latérale droite. Pour l'activer, sélectionnez la forme ajoutée avec la souris et sélectionnez l'icône <b>Paramètres de la forme</b> <div class = "icon icon-shape_settings_icon"></div> à droite. Vous pouvez y modifier les paramètres suivants :</p>
             <p><img class="floatleft" alt="Onglet Paramètres de la forme" src="../images/shapesettingstab.png" /></p>
             <ul style="margin-left: 280px;">
                 <li>
@@ -51,10 +51,10 @@
                 </li>
                 <li>
                     <b>Rotation</b> permet de faire pivoter la forme de 90 degrés dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre, ainsi que de retourner la forme horizontalement ou verticalement. Cliquez sur l'un des boutons :<ul>
-                        <li><img alt="icône Pivoter dans le sens inverse des aiguilles d'une montre" src="../images/rotatecounterclockwise.png" /> pour faire pivoter la forme de 90 degrés dans le sens inverse des aiguilles d'une montre</li>
-                        <li><img alt="icône Pivoter dans le sens des aiguilles d'une montre" src="../images/rotateclockwise.png" /> pour faire pivoter la forme de 90 degrés dans le sens des aiguilles d'une montre</li>
-                        <li><img alt="icône Retourner horizontalement" src="../images/fliplefttoright.png" /> pour retourner la forme horizontalement (de gauche à droite)</li>
-                        <li><img alt="icône Retourner verticalement" src="../images/flipupsidedown.png" /> pour retourner la forme verticalement (à l'envers)</li>
+                        <li><div class = "icon icon-rotatecounterclockwise"></div> pour faire pivoter la forme de 90 degrés dans le sens inverse des aiguilles d'une montre</li>
+                        <li><div class = "icon icon-rotateclockwise"></div> pour faire pivoter la forme de 90 degrés dans le sens des aiguilles d'une montre</li>
+                        <li><div class = "icon icon-fliplefttoright"></div> pour retourner la forme horizontalement (de gauche à droite)</li>
+                        <li><div class = "icon icon-flipupsidedown"></div> pour retourner la forme verticalement (à l'envers)</li>
                     </ul>
                 </li>
                 <li><b>Modifier la forme</b> - utilisez cette section pour remplacer la forme automatique insérée par une autre sélectionnée de la liste déroulante.</li>
@@ -63,7 +63,7 @@
             <hr />
             <p>Pour changer les <b>paramètres avancés</b> de la forme automatique, cliquez sur la forme avec le bouton droit et sélectionnez l'option <b>Paramètres avancés</b> dans le menu contextuel ou cliquez avec le bouton gauche et utilisez le lien <b>Afficher paramètres avancés</b> sur la barre latérale droite. La fenêtre Propriétés de la forme s'ouvre :</p>
             <p><img alt="Paramètres de la forme - onglet Taille" src="../images/shape_properties1.png" /></p>
-            <p>L'onglet <b>Taille</b> vous permet de modifier la <b>Largeur</b> et/ou la <b>Hauteur</b> de la forme automatique. Si le bouton <b>Proportions constantes</b> <img alt="Icône Proportions constantes" src="../images/constantproportions.png" /> est activé (auquel cas il ressemble à ceci <img alt="Icône Proportions constantes activée" src="../images/constantproportionsactivated.png" />), la largeur et la hauteur seront changées en même temps et le ratio d'aspect de la forme automatique originale sera préservé.</p>
+            <p>L'onglet <b>Taille</b> vous permet de modifier la <b>Largeur</b> et/ou la <b>Hauteur</b> de la forme automatique. Si le bouton <b>Proportions constantes</b> <div class = "icon icon-constantproportions"></div> est activé (auquel cas il ressemble à ceci <div class = "icon icon-constantproportionsactivated"></div>), la largeur et la hauteur seront changées en même temps et le ratio d'aspect de la forme automatique originale sera préservé.</p>
             <p><img alt="Forme - Paramètres avancés" src="../images/shape_properties5.png" /></p>
             <p>L'onglet <b>Rotation</b> comporte les paramètres suivants :</p>
             <ul>
@@ -109,16 +109,16 @@
             <h3>Joindre des formes automatiques à l'aide de connecteurs</h3>
             <p>Vous pouvez connecter des formes automatiques à l'aide de lignes munies de points de connexion pour démontrer les dépendances entre les objets (par exemple, si vous souhaitez créer un diagramme). Pour le faire,</p>
             <ol>
-                <li>cliquez sur l'icône <img alt="Insérer une forme automatique" src="../images/insertautoshape.png" /> <b>Forme</b> dans l'onglet <b>Accueil</b> ou <b>Insertion</b> de la barre d'outils supérieure,</li>
+                <li>cliquez sur l'icône <div class = "icon icon-insertautoshape"></div> <b>Forme</b> dans l'onglet <b>Accueil</b> ou <b>Insertion</b> de la barre d'outils supérieure,</li>
                 <li>
                     sélectionnez le groupe <b>Lignes</b> dans le menu,<p><img alt="Formes - Lignes" src="../images/connectors.png" /></p>
                 </li>
                 <li>cliquez sur la forme souhaitée dans le groupe sélectionné (à l'exception des trois dernières formes qui ne sont pas des connecteurs, à savoir les formes <em>Courbe</em>, <em>Dessin à main levée</em> et <em>Forme libre</em>),</li>
                 <li>
-                    passez le curseur de la souris sur la première forme automatique et cliquez sur l'un des points de connexions <img alt="Icône Point de connexion" src="../images/connectionpoint.png" /> apparaissant sur le contour,<p><img alt="Utiliser des connecteurs" src="../images/connectors_firstshape.png" /></p>
+                    passez le curseur de la souris sur la première forme automatique et cliquez sur l'un des points de connexions <div class = "icon icon-connectionpoint"></div> apparaissant sur le contour,<p><div class = "big big-connectors_firstshape"></div></p>
                 </li>
                 <li>
-                    faites glisser le curseur de la souris vers la deuxième forme automatique et cliquez sur le point de connexion voulu sur son contour.<p><img alt="Utiliser des connecteurs" src="../images/connectors_secondshape.png" /></p>
+                    faites glisser le curseur de la souris vers la deuxième forme automatique et cliquez sur le point de connexion voulu sur son contour.<p><div class = "big big-connectors_secondshape"></div></p>
                 </li>
             </ol>
             <p>Si vous déplacez les formes automatiques jointes, le connecteur reste attaché aux formes et se déplace avec elles.</p>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertCharts.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertCharts.htm
index 5e4278b31..d9df78d6b 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertCharts.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertCharts.htm
@@ -20,7 +20,7 @@
             <ol>
                 <li>placez le curseur à l'endroit où vous voulez insérer un graphique,</li>
                 <li>passez à l'onglet <b>Insertion</b> de la barre d'outils supérieure,</li>
-                <li>cliquez sur l'icône <b>Graphique</b> <img alt="L'icône Insérer un graphique" src="../images/insertchart.png" /> de la barre d'outils supérieure,</li>
+                <li>cliquez sur l'icône <b>Graphique</b> <div class = "icon icon-insertchart"></div> de la barre d'outils supérieure,</li>
                 <li>
                     choisissez le type de graphique approprié: <details class="details-example">
                         <summary>Graphique à colonnes</summary>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertText.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertText.htm
index 39941f550..55ac9960e 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertText.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/InsertText.htm
@@ -168,10 +168,10 @@ La couleur sera appliquée à la sélection. Alternativement, vous pouvez d'abor
 				</li>
 			</ol>
             <p class="note"><b>Remarque</b>: on peut configurer les mêmes paramètres dans la fenêtre <a href="../UsageInstructions/InsertText.htm#textadvancedsettings" onclick="onhyperlinkclick(this)"><b>Paragraphe - Paramètres avancés</b></a> .</p>
-			<p>Pour modifier rapidement l'interligne du paragraphe actuel, vous pouvez aussi cliquer sur l'icône <b>Interligne</b> <img alt="Interligne" src="../images/linespacing.png" /> sous l'onglet <b>Accueil</b> de la barre d'outils supérieure et sélectionnez la valeur nécessaire dans la liste: 1.0, 1.15, 1.5, 2.0, 2.5, ou 3.0 lignes.</p>
-		    <p>Pour modifier le décalage de paragraphe du côté gauche de la zone de texte, placez le curseur dans le paragraphe de votre choix ou sélectionnez plusieurs paragraphes à l'aide de la souris et utilisez les icônes correspondantes dans l'onglet <b>Accueil</b> de la barre d'outils supérieure: Réduire le retrait <img alt="Réduire le retrait" src="../images/decreaseindent.png" /> et Augmenter le retrait <img alt="Augmenter le retrait" src="../images/increaseindent.png" />.</p>
+			<p>Pour modifier rapidement l'interligne du paragraphe actuel, vous pouvez aussi cliquer sur l'icône <b>Interligne</b> <div class = "icon icon-linespacing"></div> sous l'onglet <b>Accueil</b> de la barre d'outils supérieure et sélectionnez la valeur nécessaire dans la liste: 1.0, 1.15, 1.5, 2.0, 2.5, ou 3.0 lignes.</p>
+		    <p>Pour modifier le décalage de paragraphe du côté gauche de la zone de texte, placez le curseur dans le paragraphe de votre choix ou sélectionnez plusieurs paragraphes à l'aide de la souris et utilisez les icônes correspondantes dans l'onglet <b>Accueil</b> de la barre d'outils supérieure: Réduire le retrait <div class = "icon icon-decreaseindent"></div> et Augmenter le retrait <div class = "icon icon-increaseindent"></div>.</p>
             <h2 id="textadvancedsettings">Configurer les paramètres avancés du paragraphe</h2>
-		    <p>Pour ouvrir la fenêtre<b> Paragraphe - Paramètres avancés</b>, cliquer avec le bouton droit sur le texte et sélectionnez l'option <b>Paramètres avancés du texte</b> dans le menu. Il est également possible de placer le curseur dans le paragraphe de votre choix - l'onglet Paramètres du texte <img alt="L'icône Paramètres du texte" src="../images/text_settings_icon.png" /> devient actif sur la barre latérale droite. Appuyez sur le lien <b>Afficher les paramètres avancés</b>. La fenêtre paramètres du paragraphe s'ouvre:</p>
+		    <p>Pour ouvrir la fenêtre<b> Paragraphe - Paramètres avancés</b>, cliquer avec le bouton droit sur le texte et sélectionnez l'option <b>Paramètres avancés du texte</b> dans le menu. Il est également possible de placer le curseur dans le paragraphe de votre choix - l'onglet Paramètres du texte <div class = "icon icon-text_settings_icon"></div> devient actif sur la barre latérale droite. Appuyez sur le lien <b>Afficher les paramètres avancés</b>. La fenêtre paramètres du paragraphe s'ouvre:</p>
 			<img alt="Paramètres du paragraphe - Retraits et espacement" src="../images/textadvancedsettings1.png" />
 			<p>L'onglet<b> Retrait et emplacement</b> permet de:</p>
             <ul>
@@ -231,7 +231,7 @@ La couleur sera appliquée à la sélection. Alternativement, vous pouvez d'abor
                 </li>
             </ol>
             <h2>Modifier un style Text Art</h2>
-            <p>Sélectionnez un objet texte et cliquez sur l'icône des <b>Paramètres de Text Art</b> <img alt="L'icône Paramètres de Text Art" src="../images/textart_settings_icon.png" /> dans la barre latérale de droite.</p>
+            <p>Sélectionnez un objet texte et cliquez sur l'icône des <b>Paramètres de Text Art</b> <div class = "icon icon-textart_settings_icon"></div> dans la barre latérale de droite.</p>
             <p><img alt="Onglet Paramètres de Text Art" src="../images/right_textart.png" /></p>
             <ul>
                 <li>Modifiez le style de texte appliqué en sélectionnant un nouveau <b>Modèle</b> dans la galerie. Vous pouvez également modifier le style de base en sélectionnant un type de police différent, une autre taille, etc.</li>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManageSlides.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManageSlides.htm
index 494fd0956..dc79cfcad 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManageSlides.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManageSlides.htm
@@ -18,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>
@@ -60,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>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManipulateObjects.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManipulateObjects.htm
index 5671c53d0..e776e6441 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManipulateObjects.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/ManipulateObjects.htm
@@ -20,13 +20,13 @@
 				<b>Remarque</b>: la liste des raccourcis clavier qui peuvent être utilisés lorsque vous travaillez avec des objets est disponible <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">ici</a>.
 			</p>
 			<h3>Redimensionner des objets</h3>
-			<p>Pour changer la taille d'une <b>forme automatique/image/graphique/zone de texte</b>, faites glisser les petits carreaux <img alt="Icône Carreaux" src="../images/resize_square.png" /> situés sur les bords de l'objet. Pour garder les proportions de l'objet sélectionné lors du redimensionnement, maintenez la touche <b>Maj</b> enfoncée et faites glisser l'une des icônes de coin.</p>
-			<p><img alt="Conserver les proportions" src="../images/maintain_proportions.png" /></p>
+			<p>Pour changer la taille d'une <b>forme automatique/image/graphique/zone de texte</b>, faites glisser les petits carreaux <div class = "icon icon-resize_square"></div> situés sur les bords de l'objet. Pour garder les proportions de l'objet sélectionné lors du redimensionnement, maintenez la touche <b>Maj</b> enfoncée et faites glisser l'une des icônes de coin.</p>
+			<p><div class = "big big-maintain_proportions"></div></p>
 			<p>Pour spécifier la largeur et la hauteur précise d'un <b>graphique</b>, sélectionnez-le avec la souris et utilisez la section <b>Taille</b> de la barre latérale droite activée.</p>
 			<p>Pour spécifier les dimensions précises d'une <b>image</b> ou d'une <b>forme automatique</b>, cliquez avec le bouton droit de la souris sur l'objet nécessaire et sélectionnez l'option <b>Paramètres avancés de l'image/forme automatique</b> du menu contextuel. Réglez les valeurs nécessaires dans l'onglet <b>Taille</b> de la fenêtre <b>Paramètres avancés</b> et cliquez sur le bouton <b>OK</b>.</p>
 			<h3>Modifier des formes automatiques</h3>
-			<p>Lors de la modification des formes, par exemple des Flèches figurées ou les Légendes, l'icône jaune en forme de diamant <img alt="Icône jaune en forme de diamant" src="../images/yellowdiamond.png" /> est aussi disponible. Elle vous permet d'ajuster certains aspects de la forme, par exemple, la longueur de la pointe d'une flèche.</p>
-			<p><img alt="Modifier les formes automatiques" src="../images/reshaping.png" /></p>
+			<p>Lors de la modification des formes, par exemple des Flèches figurées ou les Légendes, l'icône jaune en forme de diamant <div class = "icon icon-yellowdiamond"></div> est aussi disponible. Elle vous permet d'ajuster certains aspects de la forme, par exemple, la longueur de la pointe d'une flèche.</p>
+			<p><div class = "big big-reshaping"></div></p>
 			<p>Pour modifier une forme, vous pouvez également utiliser l'option <b>Modifier les points</b> dans le <b>menu contextuel</b>.</p>
 			<p><b>Modifier les points</b> sert à personnaliser ou modifier le contour d'une forme.</p>
 			<ol>
@@ -36,7 +36,7 @@
 				</li>
 				<li>
 					Lorsque vous cliquez sur le point d'ancrage, deux lignes bleus avec des carrés blanches apparaissent. Ce sont les points de contrôle Bézier permettant de créer une courbe et de modifier la finesse de la courbe.
-					<p><img alt="Modifier les points" src="../images/editpoints_example.png" /></p>
+					<p><div class = "big big-editpoints_example"></div></p>
 				</li>
 				<li>
 					Autant que les points d'ancrage sont actifs, vous pouvez les modifier et supprimer:
@@ -51,15 +51,15 @@
 			<p>Pour spécifier les dimensions précises d'une <b>image</b>, cliquez avec le bouton droit de la souris sur l'objet nécessaire et sélectionnez l'option <b>Paramètres avancés de l'image</b> du menu contextuel. Réglez les valeurs nécessaires dans l'onglet <b>Taille</b> de la fenêtre <b>Paramètres avancés</b> et cliquez sur le bouton <b>OK</b>.</p>
 			<h3>Faire pivoter des objets</h3>
 			<p>
-				Pour faire pivoter manuellement une <b>forme automatique/image/bloc de texte</b>, placez le curseur de la souris sur la poignée de rotation <img alt="Poignée de rotation" src="../images/greencircle.png" /> et faites-la glisser vers la droite ou vers la gauche.
+				Pour faire pivoter manuellement une <b>forme automatique/image/bloc de texte</b>, placez le curseur de la souris sur la poignée de rotation <div class = "icon icon-greencircle"></div> et faites-la glisser vers la droite ou vers la gauche.
 				Pour limiter la rotation de l'angle à des incréments de 15 degrés, maintenez la touche Maj enfoncée. Pour faire pivoter par incréments de 15 degrés, maintenez enfoncée la touche <b>Maj</b> tout en faisant pivoter.
 			</p>
-			<p>Pour faire pivoter l'objet de 90 degrés dans le sens inverse des aiguilles d'une montre/dans le sens des aiguilles d'une montre ou le retourner horizontalement/verticalement, vous pouvez utiliser la section <b>Rotation</b> de la barre latérale droite qui sera activée lorsque vous aurez sélectionné l'objet nécessaire. Pour l'ouvrir, cliquez sur l'icône <b>Paramètres de la forme</b> <img alt="L'icône Paramètres de la forme" src="../images/shape_settings_icon.png" /> ou <b>Paramètres de l'image</b> <img alt="L'icône Paramètres de l'image" src="../images/image_settings_icon.png" /> à droite. Cliquez sur l'un des boutons:</p>
+			<p>Pour faire pivoter l'objet de 90 degrés dans le sens inverse des aiguilles d'une montre/dans le sens des aiguilles d'une montre ou le retourner horizontalement/verticalement, vous pouvez utiliser la section <b>Rotation</b> de la barre latérale droite qui sera activée lorsque vous aurez sélectionné l'objet nécessaire. Pour l'ouvrir, cliquez sur l'icône <b>Paramètres de la forme</b> <div class = "icon icon-shape_settings_icon"></div> ou <b>Paramètres de l'image</b> <div class = "icon icon-image_settings_icon"></div> à droite. Cliquez sur l'un des boutons:</p>
 			<ul>
-				<li><img alt="Icône Pivoter dans le sens inverse des aiguilles d'une montre" src="../images/rotatecounterclockwise.png" /> pour faire pivoter l'objet de 90 degrés dans le sens inverse des aiguilles d'une montre</li>
-				<li><img alt="Icône Pivoter dans le sens des aiguilles d'une montre" src="../images/rotateclockwise.png" /> pour faire pivoter l'objet de 90 degrés dans le sens des aiguilles d'une montre</li>
-				<li><img alt="Icône Retourner horizontalement" src="../images/fliplefttoright.png" /> pour retourner l'objet horizontalement (de gauche à droite)</li>
-				<li><img alt="Icône Retourner verticalement" src="../images/flipupsidedown.png" /> pour retourner l'objet verticalement (à l'envers)</li>
+				<li><div class = "icon icon-rotatecounterclockwise"></div> pour faire pivoter l'objet de 90 degrés dans le sens inverse des aiguilles d'une montre</li>
+				<li><div class = "icon icon-rotateclockwise"></div> pour faire pivoter l'objet de 90 degrés dans le sens des aiguilles d'une montre</li>
+				<li><div class = "icon icon-fliplefttoright"></div> pour retourner l'objet horizontalement (de gauche à droite)</li>
+				<li><div class = "icon icon-flipupsidedown"></div> pour retourner l'objet verticalement (à l'envers)</li>
 			</ul>
 			<p>Il est également possible de cliquer avec le bouton droit de la souris sur l'objet, de choisir l'option <b>Faire pivoter</b> dans le menu contextuel, puis d'utiliser une des options de rotation disponibles.</p>
 			<p>Pour faire pivoter l'objet selon un angle exactement spécifié, cliquez sur le lien <b>Afficher les paramètres avancés</b> dans la barre latérale droite et utilisez l'onglet <b>Rotation</b> de la fenêtre <b>Paramètres avancés</b>. Spécifiez la valeur nécessaire mesurée en degrés dans le champ <b>Angle </b>et cliquez sur <b>OK</b>.</p>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/PreviewPresentation.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/PreviewPresentation.htm
index 87b16d72c..1baeac03a 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/PreviewPresentation.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/PreviewPresentation.htm
@@ -19,7 +19,7 @@
             <p class="note"><b>Remarque</b>: Lors du téléchargement d'une présentation crée à l'aide des outils de présentation alternatifs, il est possible de lancer un aperçu des effets d'animation éventuels.</p>
             <p>Pour afficher un aperçu de la présentation en cours de l'édition dans <a target="_blank" href="https://www.onlyoffice.com/fr/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>:</p>
             <ul>
-                <li>cliquez sur l'icône <b>Démarrer le diaporama</b> <img alt="L'icône Démarrer le diaporama" src="../images/startpreview.png" /> dans l'onglet <b>Accueil</b> de la barre d'outils supérieure ou sur le côté gauche de la barre d'état, ou</li>
+                <li>cliquez sur l'icône <b>Démarrer le diaporama</b> <div class = "icon icon-startpreview"></div> dans l'onglet <b>Accueil</b> de la barre d'outils supérieure ou sur le côté gauche de la barre d'état, ou</li>
                 <li>sélectionnez une diapositive dans la liste à gauche, cliquez dessus avec le bouton droit de la souris et choisissez l'option <b>Démarrer le diaporama</b> dans le menu contextuel.</li>
             </ul>
             <p>L'aperçu commencera à partir de la diapositive actuellement sélectionnée. </p>
diff --git a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/SupportSmartArt.htm b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/SupportSmartArt.htm
index 06666d78f..f4777b093 100644
--- a/apps/presentationeditor/main/resources/help/fr/UsageInstructions/SupportSmartArt.htm
+++ b/apps/presentationeditor/main/resources/help/fr/UsageInstructions/SupportSmartArt.htm
@@ -4,6 +4,7 @@
     <title>Prise en charge des graphiques SmartArt par ONLYOFFICE Presentation Editor</title>
     <meta charset="utf-8" />
     <meta name="description" content="Modifier les graphiques SmartArt créés dans d'autes applications" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm b/apps/presentationeditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm
index 2b691f7a0..68e6909ee 100644
--- a/apps/presentationeditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm
+++ b/apps/presentationeditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm
@@ -80,7 +80,7 @@
                 <p>Вы можете управлять добавленными комментариями, используя значки во всплывающем окне комментария или на панели <b>Комментарии</b> слева:</p>
                 <ul>
                     <li>
-                        отсортируйте добавленные комментарии, нажав на значок <img alt="Значок Сортировка" src="../images/sortcommentsicon.png" />:
+                        отсортируйте добавленные комментарии, нажав на значок <div class = "icon icon-sortcommentsicon"></div>:
                         <ul>
                             <li>по дате: <b>От старых к новым</b> или <b>От новых к станым</b>. Это порядок сортировки выбран по умолчанию.</li>
                             <li>по автору: <b>По автору от А до Я</b> или <b>По автору от Я до А</b></li>
@@ -90,9 +90,9 @@
                             </li>
                         </ul>
                     </li>
-                    <li>отредактируйте выбранный комментарий, нажав значок <img alt="Значок Редактировать" src="../images/editcommenticon.png" />,</li>
-                    <li>удалите выбранный комментарий, нажав значок <img alt="Значок Удалить" src="../images/deletecommenticon.png" />,</li>
-                    <li>закройте выбранное обсуждение, нажав на значок <img alt="Значок Решить" src="../images/resolveicon.png" />, если задача или проблема, обозначенная в комментарии, решена; после этого обсуждение, которое вы открыли своим комментарием, приобретет статус решенного. Чтобы вновь его открыть, нажмите на значок <img alt="Значок Открыть снова" src="../images/resolvedicon.png" />.</li>
+                    <li>отредактируйте выбранный комментарий, нажав значок <div class = "icon icon-editcommenticon"></div>,</li>
+                    <li>удалите выбранный комментарий, нажав значок <div class = "icon icon-deletecommenticon"></div>,</li>
+                    <li>закройте выбранное обсуждение, нажав на значок <div class = "icon icon-resolveicon"></div>, если задача или проблема, обозначенная в комментарии, решена; после этого обсуждение, которое вы открыли своим комментарием, приобретет статус решенного. Чтобы вновь его открыть, нажмите на значок <div class = "icon icon-resolvedicon"></div>.</li>
                     <li>если вы хотите решить сразу несколько комментариев, на вкладке <b>Совместная работа</b> нажмите выпадающий список <b>Решить</b> и выберите один из вариантов решения комментариев: <b>решить текущие комментарии</b>, <b>решить мои комментарии</b> или <b>решить все комментарии</b> в презентации.</li>
                 </ul>
                 <h4>Добавление упоминаний</h4>
diff --git a/apps/presentationeditor/main/resources/help/ru/HelpfulHints/Password.htm b/apps/presentationeditor/main/resources/help/ru/HelpfulHints/Password.htm
index c7d62ddd9..16b6121b3 100644
--- a/apps/presentationeditor/main/resources/help/ru/HelpfulHints/Password.htm
+++ b/apps/presentationeditor/main/resources/help/ru/HelpfulHints/Password.htm
@@ -24,7 +24,7 @@
 				<li>перейдите на вкладку <b>Файл</b> на верхней панели инструментов,</li>
 				<li>выберите опцию <b>Защитить</b>,</li>
 				<li>нажмите кнопку <b>Добавить пароль</b>,</li>
-				<li>введите пароль в поле <b>Пароль</b> и продублируйте его в поле <b>Повторите пароль</b>, затем нажмите <b>ОК</b>. Нажмите <img alt="Значок Показать пароль" src="../images/show_password.png" />, чтобы показать или скрыть пароль.</li>
+				<li>введите пароль в поле <b>Пароль</b> и продублируйте его в поле <b>Повторите пароль</b>, затем нажмите <b>ОК</b>. Нажмите <div class = "icon icon-show_password"></div>, чтобы показать или скрыть пароль.</li>
 			</ul>
 			<p><img alt="установка пароля" src="../../../../../../common/main/resources/help/ru/images/setpassword.png" /></p>
 
diff --git a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/AnimationTab.htm b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/AnimationTab.htm
index 2b49d1991..b309c8866 100644
--- a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/AnimationTab.htm
+++ b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/AnimationTab.htm
@@ -4,6 +4,7 @@
 		<title>Вкладка Анимация</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Знакомство с пользовательским интерфейсом редактора презентаций - Вкладка Анимация" />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/TransitionsTab.htm b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/TransitionsTab.htm
index 039735b3b..ef5f707a1 100644
--- a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/TransitionsTab.htm
+++ b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/TransitionsTab.htm
@@ -4,6 +4,7 @@
 		<title>Вкладка Переходы</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Знакомство с пользовательским интерфейсом редактора презентаций - Вкладка Переходы" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/ViewTab.htm b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/ViewTab.htm
index 2895f2d6a..374986624 100644
--- a/apps/presentationeditor/main/resources/help/ru/ProgramInterface/ViewTab.htm
+++ b/apps/presentationeditor/main/resources/help/ru/ProgramInterface/ViewTab.htm
@@ -4,6 +4,7 @@
         <title>Вкладка Вид</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Знакомство с пользовательским интерфейсом редактора презентаций - Вкладка Вид" />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/AddingAnimations.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/AddingAnimations.htm
index 8e3b87b8a..192081e1c 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/AddingAnimations.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/AddingAnimations.htm
@@ -4,6 +4,7 @@
 		<title>Добавление анимаций</title>
 		<meta charset="utf-8" />
 		<meta name="description" content="Описание того, как добавлять эффекты анимаций в слайд и управлять ими." />
+		<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
 		<script type="text/javascript" src="../callback.js"></script>
 		<script type="text/javascript" src="../search/js/page-search.js"></script>
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/CopyPasteUndoRedo.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/CopyPasteUndoRedo.htm
index 26f1cb8d7..1a0d22429 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/CopyPasteUndoRedo.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/CopyPasteUndoRedo.htm
@@ -30,7 +30,7 @@
 			    </ul>
             <h3>Использование функции Специальная вставка</h3>
             <p class="note"><b>Примечание</b>: Во время совсестной работы, <b>Специальная вставка</b> доступна только в <b>Строгом</b> режиме редактирования.</p>
-            <p>После вставки скопированных данных рядом со вставленным текстовым фрагментом или объектом появляется кнопка <b>Специальная вставка</b> <img alt="Специальная вставка" src="../images/pastespecialbutton.png" />. Нажмите на эту кнопку, чтобы выбрать нужный параметр вставки. </p>
+            <p>После вставки скопированных данных рядом со вставленным текстовым фрагментом или объектом появляется кнопка <b>Специальная вставка</b> <div class = "icon icon-pastespecialbutton"></div>. Нажмите на эту кнопку, чтобы выбрать нужный параметр вставки. </p>
             <p>При вставке фрагментов текста доступны следующие параметры:</p>
             <ul>
                 <li><em>Использовать конечную тему</em> - позволяет применить форматирование, определяемое темой текущей презентации. Эта опция используется по умолчанию.</li>
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertAutoshapes.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertAutoshapes.htm
index 9c7c3ecce..d9bc683e5 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertAutoshapes.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertAutoshapes.htm
@@ -19,7 +19,7 @@
 			<p>Для <b>добавления</b> автофигуры на слайд:</p>
 			<ol>
 				<li>в списке слайдов слева выберите тот слайд, на который требуется добавить автофигуру,</li>
-                <li>щелкните по значку <img alt="Значок Фигура" src="../images/insertautoshape.png" /> <b>Фигура</b> на вкладке <b>Главная</b> или по стрелочке рядом с <img alt="Галерея фигур" src="../images/shapegallery.png" /><b>Галереей фигур</b> на вкладке <b>Вставка</b> верхней панели инструментов,</li>
+                <li>щелкните по значку <div class = "icon icon-insertautoshape"></div> <b>Фигура</b> на вкладке <b>Главная</b> или по стрелочке рядом с <div class = "big big-shapegallery"></div><b>Галереей фигур</b> на вкладке <b>Вставка</b> верхней панели инструментов,</li>
 				<li>выберите одну из доступных групп автофигур: Основные фигуры, Фигурные стрелки, Математические знаки, Схемы, Звезды и ленты, Выноски, Кнопки, Прямоугольники, Линии,</li>
 				<li>щелкните по нужной автофигуре внутри выбранной группы,</li>
 				<li>в области редактирования слайда установите курсор там, где требуется поместить автофигуру,
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertText.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertText.htm
index 447d93d13..2a0352f81 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertText.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/InsertText.htm
@@ -4,6 +4,7 @@
 		<title>Как вставить текст в презентацию PowerPoint - ONLYOFFICE</title>
 		<meta charset="utf-8" />
         <meta name="description" content="Работа с текстом в презентациях PowerPoint: узнайте, как добавлять и форматировать текст, менять его стиль и направление, задавать параметры абзаца." />
+        <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
         <meta name="keywords" content="текст в презентации, как в powerpoint добавить текст, как вставить текст в powerpoint, как добавить текст в презентацию, как написать текст на слайде в powerpoint, как вставить текст в презентацию, как вставить текст в презентацию powerpoint, как вставить текст в слайд презентации, как добавить текст в powerpoint, работа с текстом в powerpoint">
         <link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
@@ -173,10 +174,10 @@
 				</li>
 			</ol>
             <p class="note"><b>Примечание</b>: эти параметры также можно найти в окне <a href="../UsageInstructions/InsertText.htm#textadvancedsettings" onclick="onhyperlinkclick(this)"><b>Абзац - Дополнительные параметры</b></a>.</p>
-            <p>Чтобы быстро изменить междустрочный интервал в текущем абзаце, можно также использовать значок <b>Междустрочный интервал</b> <img alt="Междустрочный интервал" src="../images/linespacing.png" /> на вкладке <b>Главная</b> верхней панели инструментов, выбрав нужное значение из списка: 1.0, 1.15, 1.5, 2.0, 2.5, или 3.0 строки.</p>
-		    <p>Чтобы изменить смещение абзаца от левого края текстового поля, установите курсор в пределах нужного абзаца или выделите мышью несколько абзацев и используйте соответствующие значки на вкладке <b>Главная</b> верхней панели инструментов: <b>Уменьшить отступ</b> <img alt="Уменьшить отступ" src="../images/decreaseindent.png" /> и <b>Увеличить отступ</b> <img alt="Увеличить отступ" src="../images/increaseindent.png" />.</p>
+            <p>Чтобы быстро изменить междустрочный интервал в текущем абзаце, можно также использовать значок <b>Междустрочный интервал</b> <div class = "icon icon-linespacing"></div> на вкладке <b>Главная</b> верхней панели инструментов, выбрав нужное значение из списка: 1.0, 1.15, 1.5, 2.0, 2.5, или 3.0 строки.</p>
+		    <p>Чтобы изменить смещение абзаца от левого края текстового поля, установите курсор в пределах нужного абзаца или выделите мышью несколько абзацев и используйте соответствующие значки на вкладке <b>Главная</b> верхней панели инструментов: <b>Уменьшить отступ</b> <div class = "icon icon-decreaseindent"></div> и <b>Увеличить отступ</b> <div class = "icon icon-increaseindent"></div>.</p>
             <h2 id="textadvancedsettings">Изменение дополнительных параметров абзаца</h2>
-		    <p>Чтобы открыть окно <b>Абзац - Дополнительные параметры</b>, щелкните по тексту правой кнопкой мыши и выберите в контекстном меню пункт <b>Дополнительные параметры текста</b>. Также можно установить курсор в пределах нужного абзаца - на правой боковой панели будет активирована вкладка <img alt="Значок Параметры текста" src="../images/text_settings_icon.png" /> <b>Параметры текста</b>. Нажмите на ссылку <b>Дополнительные параметры</b>. Откроется окно свойств абзаца:</p>
+		    <p>Чтобы открыть окно <b>Абзац - Дополнительные параметры</b>, щелкните по тексту правой кнопкой мыши и выберите в контекстном меню пункт <b>Дополнительные параметры текста</b>. Также можно установить курсор в пределах нужного абзаца - на правой боковой панели будет активирована вкладка <div class = "icon icon-text_settings_icon"></div> <b>Параметры текста</b>. Нажмите на ссылку <b>Дополнительные параметры</b>. Откроется окно свойств абзаца:</p>
 			<img alt="Свойства абзаца - вкладка Отступы и интервалы" src="../images/textadvancedsettings1.png" />
 			<p>На вкладке <b>Отступы и интервалы</b> можно выполнить следующие действия:</p>
             <ul>
@@ -253,7 +254,7 @@
         </li>
       </ol>      
             <h2>Изменение стиля объекта Text Art</h2>
-            <p>Выделите текстовый объект и щелкните по значку <b>Параметры объектов Text Art</b> <img alt="Значок Параметры объектов Text Art" src="../images/textart_settings_icon.png" /> на правой боковой панели.</p>
+            <p>Выделите текстовый объект и щелкните по значку <b>Параметры объектов Text Art</b> <div class = "icon icon-textart_settings_icon"></div> на правой боковой панели.</p>
             <p><img alt="Вкладка Параметры объектов Text Art" src="../images/right_textart.png" /></p>
             <ul>
                 <li>Измените примененный стиль текста, выбрав из галереи новый <b>Шаблон</b>. Можно также дополнительно изменить этот базовый стиль, выбрав другой тип, размер шрифта и т.д.</li>
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/ManipulateObjects.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/ManipulateObjects.htm
index 83f2e10c6..d0accb96c 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/ManipulateObjects.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/ManipulateObjects.htm
@@ -20,13 +20,13 @@
 				<b>Примечание</b>: список сочетаний клавиш, которые можно использовать при работе с объектами, доступен <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">здесь</a>.
 			</p>
 			<h3>Изменение размера объектов</h3>
-			<p>Для изменения размера <b>автофигуры/изображения/диаграммы/таблицы/текстового поля</b> перетаскивайте маленькие квадраты <img alt="Значок Квадрат" src="../images/resize_square.png" />, расположенные по краям объекта. Чтобы сохранить исходные пропорции выбранного объекта при изменении размера, удерживайте клавишу <b>Shift</b> и перетаскивайте один из угловых значков.</p>
-			<p><img alt="Сохранение пропорций" src="../images/maintain_proportions.png" /></p>
+			<p>Для изменения размера <b>автофигуры/изображения/диаграммы/таблицы/текстового поля</b> перетаскивайте маленькие квадраты <div class = "icon icon-resize_square"></div>, расположенные по краям объекта. Чтобы сохранить исходные пропорции выбранного объекта при изменении размера, удерживайте клавишу <b>Shift</b> и перетаскивайте один из угловых значков.</p>
+			<p><div class = "big big-maintain_proportions"></div></p>
 			<p>Чтобы задать точную ширину и высоту <b>диаграммы</b>, выделите ее на слайде и используйте раздел <b>Размер</b> на правой боковой панели, которая будет активирована.</p>
 			<p>Чтобы задать точные размеры <b>изображения</b> или <b>автофигуры</b>, щелкните правой кнопкой мыши по нужному объекту на слайде и выберите пункт меню <b>Дополнительные параметры изображения/фигуры</b>. Укажите нужные значения на вкладке <b>Размер</b> окна <b>Дополнительные параметры</b> и нажмите кнопку <b>OK</b>.</p>
 			<h3>Изменение формы автофигур</h3>
-			<p>При изменении некоторых фигур, например, фигурных стрелок или выносок, также доступен желтый значок в форме ромба <img alt="Значок Желтый ромб" src="../images/yellowdiamond.png" />. Он позволяет изменять отдельные параметры формы, например, длину указателя стрелки.</p>
-			<p><img alt="Изменение формы автофигуры" src="../images/reshaping.png" /></p>
+			<p>При изменении некоторых фигур, например, фигурных стрелок или выносок, также доступен желтый значок в форме ромба <div class = "icon icon-yellowdiamond"></div>. Он позволяет изменять отдельные параметры формы, например, длину указателя стрелки.</p>
+			<p><div class = "big big-reshaping"></div></p>
 			<p>Чтобы изменить форму автофигуры, вы также можете использовать опцию <b>Изменить точки</b> в <b>контекстном меню</b>.</p>
 			<p><b>Изменить точки</b> используется для редактирования формы или изменения кривизны автофигуры.</p>
 			<ol>
@@ -36,7 +36,7 @@
 				</li>
 				<li>
 					После сдвига опорной точки фигуры, появятся две синие линии с белыми квадратами на концах. Это кривые Безье, которые позволяют создавать кривую и изменять ее значение.
-					<p><img alt="Изменить точки" src="../images/editpoints_example.png" /></p>
+					<p><div class = "big big-editpoints_example"></div></p>
 				</li>
 				<li>
 					Пока опорные точки активны, вы можете добавлять и удалять их:
@@ -48,19 +48,19 @@
 			</ol>
 			<h3>Перемещение объектов</h3>
 			<p>
-				Для изменения местоположения <b>автофигуры/изображения/диаграммы/таблицы/текстового поля</b> используйте значок <img alt="Стрелка" src="../images/arrow.png" />, который появляется после наведения курсора мыши на объект. Перетащите объект на нужное место, не отпуская кнопку мыши.
+				Для изменения местоположения <b>автофигуры/изображения/диаграммы/таблицы/текстового поля</b> используйте значок <div class = "icon icon-arrow"></div>, который появляется после наведения курсора мыши на объект. Перетащите объект на нужное место, не отпуская кнопку мыши.
 				Чтобы перемещать объект с шагом в один пиксель, удерживайте клавишу <b>Ctrl</b> и используйте стрелки на клавиатуре.
 				Чтобы перемещать объект строго по горизонтали/вертикали и предотвратить его смещение в перпендикулярном направлении, при перетаскивании удерживайте клавишу <b>Shift</b>.
 			</p>
 			<p>Чтобы задать точное положение <b>изображения</b>, щелкните правой кнопкой мыши по изображению на слайде и выберите пункт меню <b>Дополнительные параметры изображения</b>. Укажите нужные значения в разделе <b>Положение</b> окна <b>Дополнительные параметры</b> и нажмите кнопку <b>OK</b>.</p>
 			<h3>Поворот объектов</h3>
-			<p>Чтобы вручную повернуть <b>автофигуру/изображение/текстовое поле</b>, наведите курсор мыши на маркер поворота <img alt="Маркер поворота" src="../images/greencircle.png" /> и перетащите его по часовой стрелке или против часовой стрелки. Чтобы ограничить угол поворота шагом в 15 градусов, при поворачивании удерживайте клавишу <b>Shift</b>.</p>
-			<p>Чтобы повернуть объект на 90 градусов против часовой стрелки или по часовой стрелке или отразить объект по горизонтали или по вертикали, можно использовать раздел <b>Поворот</b> на правой боковой панели, которая будет активирована, как только вы выделите нужный объект. Чтобы открыть ее, нажмите на значок <b>Параметры фигуры</b> <img alt="Значок Параметры фигуры" src="../images/shape_settings_icon.png" />  или <b>Параметры изображения</b> <img alt="Значок Параметры изображения" src="../images/image_settings_icon.png" /> справа. Нажмите на одну из кнопок:</p>
+			<p>Чтобы вручную повернуть <b>автофигуру/изображение/текстовое поле</b>, наведите курсор мыши на маркер поворота <div class = "icon icon-greencircle"></div> и перетащите его по часовой стрелке или против часовой стрелки. Чтобы ограничить угол поворота шагом в 15 градусов, при поворачивании удерживайте клавишу <b>Shift</b>.</p>
+			<p>Чтобы повернуть объект на 90 градусов против часовой стрелки или по часовой стрелке или отразить объект по горизонтали или по вертикали, можно использовать раздел <b>Поворот</b> на правой боковой панели, которая будет активирована, как только вы выделите нужный объект. Чтобы открыть ее, нажмите на значок <b>Параметры фигуры</b> <div class = "icon icon-shape_settings_icon"></div>  или <b>Параметры изображения</b> <div class = "icon icon-image_settings_icon"></div> справа. Нажмите на одну из кнопок:</p>
 			<ul>
-				<li><img alt="Значок Повернуть против часовой стрелки" src="../images/rotatecounterclockwise.png" /> чтобы повернуть объект на 90 градусов против часовой стрелки</li>
-				<li><img alt="Значок Повернуть по часовой стрелке" src="../images/rotateclockwise.png" /> чтобы повернуть объект на 90 градусов по часовой стрелке</li>
-				<li><img alt="Значок Отразить слева направо" src="../images/fliplefttoright.png" /> чтобы отразить объект по горизонтали (слева направо)</li>
-				<li><img alt="Значок Отразить сверху вниз" src="../images/flipupsidedown.png" /> чтобы отразить объект по вертикали (сверху вниз)</li>
+				<li><div class = "icon icon-rotatecounterclockwise"></div> чтобы повернуть объект на 90 градусов против часовой стрелки</li>
+				<li><div class = "icon icon-rotateclockwise"></div> чтобы повернуть объект на 90 градусов по часовой стрелке</li>
+				<li><div class = "icon icon-fliplefttoright"></div> чтобы отразить объект по горизонтали (слева направо)</li>
+				<li><div class = "icon icon-flipupsidedown"></div> чтобы отразить объект по вертикали (сверху вниз)</li>
 			</ul>
 			<p>Также можно щелкнуть правой кнопкой мыши по объекту, выбрать из контекстного меню пункт <b>Поворот</b>, а затем использовать один из доступных вариантов поворота объекта.</p>
 			<p>Чтобы повернуть объект на точно заданный угол, нажмите на ссылку <b>Дополнительные параметры</b> на правой боковой панели и используйте вкладку <b>Поворот</b> в окне <b>Дополнительные параметры</b>. Укажите нужное значение в градусах в поле <b>Угол</b> и нажмите кнопку <b>OK</b>.</p>
diff --git a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/SupportSmartArt.htm b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/SupportSmartArt.htm
index 6b7c7ddbf..a04c7cc01 100644
--- a/apps/presentationeditor/main/resources/help/ru/UsageInstructions/SupportSmartArt.htm
+++ b/apps/presentationeditor/main/resources/help/ru/UsageInstructions/SupportSmartArt.htm
@@ -4,6 +4,7 @@
     <title>Поддержка SmartArt в редакторе резентаций ONLYOFFICE</title>
     <meta charset="utf-8" />
     <meta name="description" content="Редактируйте графические объекты SmartArt, добавленные с помощью сторонних редакторов" />
+    <link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>