Add icon to donation button in Help pages.

Change-Id: I3f565f9245252c4ca417dff9b49df272b4733648
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/196526
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

Package_html_media.mk

@@ -51,6 +51,7 @@ $(eval $(call gb_Package_add_files_with_dir,helpcontent2_html_media,$(LIBO_SHARE
     helpimg/dircurscent.png \
     helpimg/dircursleft.png \
     helpimg/dircursright.png \
+    helpimg/donate.png \
     helpimg/ein.png \
     helpimg/feldalle.png \
     helpimg/feldbrei.png \

help3xsl/default.css

@@ -706,10 +706,11 @@ li.disabled a {
 .donation {
     border: 1px solid #f1c62a;
     border-radius: 2px;
-    padding: 10px;
+    padding: 5px 10px;
     margin: 5px 10px;
     max-width: 200px;
     color: white;
+    align-items:center;
 }
 .donation:hover {
     background: linear-gradient(90deg, #1c71d8 0%, #30c877 100%);

help3xsl/online_transform.xsl

@@ -92,6 +92,7 @@
 <xsl:variable name="note_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/note.svg')"/>
 <xsl:variable name="tip_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/tip.svg')"/>
 <xsl:variable name="warning_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/warning.svg')"/>
+<xsl:variable name="donate_img" select="concat($img_url_prefix,'helpimg/donate.png')"/>
 
 <!-- Strings for the help UI page -->
 <xsl:variable name="tmp_href_ui"><xsl:value-of select="concat($urlpre,'text/shared/help/browserhelp.xhp')"/></xsl:variable>
@@ -275,12 +276,18 @@
         <xsl:apply-templates select="/helpdocument/body"/>
     </div>
     <div id="DonationFrame">
-        <xsl:if test="$online">
-            <div class="donation">
-                <p dir="auto"><a href="https://www.libreoffice.org/donate/?pk_campaign=help" target ="_blank"><xsl:value-of select="$ui_donate"/></a></p>
+        <a href="https://www.libreoffice.org/donate/?pk_campaign=help" target ="_blank">
+        <div class="icontable donation">
+            <div class="iconcell">
+                <img class="iconimage" src="{$donate_img}" alt="{$ui_donate}" style="{$iconsizestyle}"/>
             </div>
-        </xsl:if>
+            <div class="iconcell">
+                <p dir="auto"><xsl:value-of select="$ui_donate"/></p>
+            </div>
+        </div>
+        </a>
     </div>
+
     <footer>
         <h2 style="text-align: center;"><a href="https://books.libreoffice.org" target="_blank"><xsl:value-of select="$ui_books"/></a></h2>
         <div class="noteicon" dir="auto" style="display:flex;justify-content:center;flex-wrap:wrap;row-gap:15px;">